/* MTSAi Design System Bundle — 59 files concatenated */
/* Generated: 2026-04-09 */
/* ── assets/design-system/tokens/colors.css ─────────────────────────────── */
/* ============================================================
Design tokens — derived from MTSAi logo (mtsai-logo.png)
Primary: royal blue (M, T, A core, I) · Trust: logo green (S, A arch)
Accent: logo red reserved for alerts / sparse emphasis (see --red-*)
Pilot / warm UI accent: amber (legacy --saffron-* token names)
Neutrals: cool slate (government / civic readability)
============================================================ */
:root {
/* === ROYAL BLUE (maps to --blue-* — primary interactive, links) === */
--blue-100: #172554;
--blue-90: #1e3a8a;
--blue-80: #1e40af;
--blue-70: #1d4ed8;
--blue-60: #2563eb;
--blue-50: #3b82f6;
--blue-40: #60a5fa;
--blue-30: #93c5fd;
--blue-20: #bfdbfe;
--blue-10: #eff6ff;
/* === LOGO GREEN (maps to --green-* — trust, success, brand identity) === */
--green-100: #14532d;
--green-90: #166534;
--green-80: #15803d;
--green-70: #16a34a;
--green-60: #22c55e;
--green-50: #4ade80;
--green-40: #86efac;
--green-30: #bbf7d0;
--green-20: #dcfce7;
--green-10: #f0fdf4;
/* === AMBER (legacy --saffron-* — pilot, highlights, not primary CTA) === */
--saffron-100: #451a03;
--saffron-90: #78350f;
--saffron-80: #92400e;
--saffron-70: #b45309;
--saffron-60: #d97706;
--saffron-50: #ea580c;
--saffron-40: #fb923c;
--saffron-30: #fdba74;
--saffron-20: #fed7aa;
--saffron-10: #ffedd5;
/* === RED (alerts, errors — logo dot colour used sparingly in UI) === */
--red-100: #450a0a;
--red-90: #7f1d1d;
--red-80: #991b1b;
--red-70: #b91c1c;
--red-60: #dc2626;
--red-50: #ef4444;
--red-40: #f87171;
--red-30: #fca5a5;
--red-20: #fecaca;
--red-10: #fee2e2;
/* === SLATE (cool neutral — maps to --gray-*) === */
--gray-100: #0f172a;
--gray-90: #1e293b;
--gray-80: #334155;
--gray-70: #475569;
--gray-60: #64748b;
--gray-50: #94a3b8;
--gray-40: #cbd5e1;
--gray-30: #e2e8f0;
--gray-20: #f1f5f9;
--gray-10: #f8fafc;
--white: #ffffff;
--black: #000000;
/* === CYAN (informational) === */
--cyan-70: #164e63;
--cyan-60: #155e75;
--cyan-50: #0891b2;
--cyan-40: #22d3ee;
--cyan-30: #67e8f9;
--cyan-20: #a5f3fc;
--cyan-10: #cffafe;
/* === YELLOW (warning) === */
--yellow-70: #713f12;
--yellow-60: #854d0e;
--yellow-50: #a16207;
--yellow-40: #ca8a04;
--yellow-30: #eab308;
--yellow-20: #fde047;
--yellow-10: #fef9c3;
}
/* ── assets/design-system/tokens/semantic.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Semantic Token Layer
Theme: Dark (Gray 100 base)
============================================================ */
:root {
/* --- BACKGROUND LAYERS (Carbon layer model) --- */
--layer-bg: var(--gray-100); /* base canvas: #161616 */
--layer-01: var(--gray-90); /* first elevation: #262626 */
--layer-02: var(--gray-80); /* second elevation: #393939 */
--layer-03: var(--gray-70); /* third elevation: #525252 */
--overlay: rgba(0, 0, 0, 0.65);
/* --- TEXT --- */
--text-primary: var(--gray-10); /* #F4F4F4 */
--text-secondary: var(--gray-30); /* #C6C6C6 */
--text-placeholder: var(--gray-50); /* #8D8D8D */
--text-disabled: var(--gray-60); /* #6F6F6F */
--text-on-color: var(--white);
--text-on-saffron: var(--white); /* on-primary CTA (blue) */
--text-error: var(--red-40);
--text-success: var(--green-30);
--text-warning: var(--yellow-30);
--text-info: var(--cyan-30);
--text-brand: var(--green-40); /* brand green for labels */
--text-link: var(--blue-40);
/* --- INTERACTIVE (royal blue — logo primary) --- */
--interactive: var(--blue-60);
--interactive-hover: var(--blue-70);
--interactive-active: var(--blue-80);
--interactive-selected: var(--blue-90);
--interactive-focus: var(--blue-60);
/* --- BRAND TRUST (logo green) --- */
--brand-primary: var(--green-60);
--brand-hover: var(--green-70);
--brand-active: var(--green-80);
--brand-subtle: rgba(34, 197, 94, 0.14);
--brand-border: rgba(34, 197, 94, 0.32);
--green-vivid: var(--green-40);
/* --- PRIMARY CTA (government: credible blue, not novelty accent) --- */
--cta-primary: var(--blue-70);
--cta-hover: var(--blue-80);
--cta-active: var(--blue-90);
--cta-text: var(--white);
--cta-focus: var(--blue-60);
--accent-saffron: var(--green-50); /* decorative: second logo colour */
/* --- BORDER --- */
--border-subtle: rgba(255, 255, 255, 0.08);
--border-strong: var(--gray-60);
--border-interactive: var(--interactive);
--border-error: var(--red-50);
--border-brand: var(--brand-primary);
/* --- ICON --- */
--icon-primary: var(--gray-10);
--icon-secondary: var(--gray-30);
--icon-disabled: var(--gray-60);
--icon-interactive: var(--blue-40);
--icon-brand: var(--green-40);
--icon-error: var(--red-40);
--icon-success: var(--green-30);
--icon-warning: var(--yellow-30);
--icon-info: var(--cyan-30);
/* --- SEMANTIC STATUS --- */
--status-active: var(--green-50);
--status-warning: var(--yellow-30);
--status-error: var(--red-60);
--status-info: var(--cyan-50);
--status-neutral: var(--gray-50);
--status-pilot: var(--saffron-50); /* pilot / notice — amber scale */
/* --- BUTTON TOKENS --- */
--btn-primary-bg: var(--cta-primary);
--btn-primary-text: var(--cta-text);
--btn-primary-hover: var(--cta-hover);
--btn-secondary-bg: var(--interactive); /* blue — secondary interactive */
--btn-secondary-text: var(--white);
--btn-secondary-hover: var(--interactive-hover);
--btn-ghost-text: var(--interactive);
--btn-ghost-hover-bg: rgba(37, 99, 235, 0.12);
--btn-danger-bg: var(--red-60);
--btn-danger-hover: var(--red-70, #A2191F);
--btn-disabled-bg: var(--gray-80);
--btn-disabled-text: var(--gray-60);
/* --- INPUT TOKENS --- */
--input-bg: var(--layer-01);
--input-border: var(--gray-60);
--input-border-focus: var(--interactive);
--input-border-error: var(--red-50);
--input-text: var(--text-primary);
--input-placeholder: var(--text-placeholder);
--input-label: var(--text-secondary);
--input-helper: var(--gray-50);
--input-height: 48px; /* 44px minimum + breathing room */
/* --- TAG TOKENS --- */
--tag-blue-bg: rgba(37, 99, 235, 0.18);
--tag-blue-text: var(--blue-30);
--tag-green-bg: rgba(34, 197, 94, 0.18);
--tag-green-text: var(--green-30);
--tag-saffron-bg: rgba(234, 88, 12, 0.16);
--tag-saffron-text: var(--saffron-30);
--tag-red-bg: rgba(218, 30, 40, 0.15);
--tag-red-text: var(--red-30);
--tag-gray-bg: var(--gray-80);
--tag-gray-text: var(--gray-30);
--tag-cyan-bg: rgba(17, 146, 232, 0.15);
--tag-cyan-text: var(--cyan-30);
/* --- NOTIFICATION TOKENS --- */
--notif-error-bg: rgba(218, 30, 40, 0.1);
--notif-error-border: var(--red-60);
--notif-warning-bg: rgba(241, 194, 27, 0.1);
--notif-warning-border: var(--yellow-30);
--notif-success-bg: rgba(34, 197, 94, 0.12);
--notif-success-border: var(--green-50);
--notif-info-bg: rgba(17, 146, 232, 0.1);
--notif-info-border: var(--cyan-50);
/* --- ALPHA / TRANSPARENCY TOKENS --- */
/* Blue alpha */
--blue-alpha-08: rgba(37, 99, 235, 0.09);
--blue-alpha-12: rgba(37, 99, 235, 0.14);
--blue-alpha-15: rgba(37, 99, 235, 0.18);
--blue-alpha-20: rgba(37, 99, 235, 0.22);
--blue-alpha-25: rgba(37, 99, 235, 0.28);
/* Green alpha */
--green-alpha-08: rgba(34, 197, 94, 0.09);
--green-alpha-12: rgba(34, 197, 94, 0.14);
--green-alpha-15: rgba(34, 197, 94, 0.18);
--green-alpha-20: rgba(34, 197, 94, 0.22);
--green-alpha-30: rgba(34, 197, 94, 0.32);
/* Amber alpha (legacy saffron token names) */
--saffron-alpha-05: rgba(234, 88, 12, 0.06);
--saffron-alpha-08: rgba(234, 88, 12, 0.10);
--saffron-alpha-15: rgba(234, 88, 12, 0.16);
--saffron-alpha-20: rgba(234, 88, 12, 0.22);
--saffron-alpha-30: rgba(234, 88, 12, 0.28);
/* Red alpha */
--red-alpha-08: rgba(218, 30, 40, 0.08);
--red-alpha-10: rgba(218, 30, 40, 0.10); /* notification bg */
--red-alpha-15: rgba(218, 30, 40, 0.15); /* tag background */
--red-alpha-20: rgba(218, 30, 40, 0.20);
/* Cyan alpha */
--cyan-alpha-10: rgba(17, 146, 232, 0.10);
--cyan-alpha-15: rgba(17, 146, 232, 0.15); /* tag background */
--cyan-alpha-20: rgba(17, 146, 232, 0.20);
/* Yellow/Warning alpha */
--yellow-alpha-10: rgba(241, 194, 27, 0.10);
--yellow-alpha-20: rgba(241, 194, 27, 0.20);
/* White/Black alpha */
--white-alpha-04: rgba(255, 255, 255, 0.04);
--white-alpha-06: rgba(255, 255, 255, 0.06);
--white-alpha-08: rgba(255, 255, 255, 0.08);
--white-alpha-12: rgba(255, 255, 255, 0.12);
--black-alpha-50: rgba(0, 0, 0, 0.50);
--black-alpha-65: rgba(0, 0, 0, 0.65);
}
/* --- LIGHT THEME OVERRIDE --- */
[data-theme="light"] {
/* Layers */
--layer-bg: #f8fafc;
--layer-01: #f1f5f9;
--layer-02: #e2e8f0;
--layer-03: #cbd5e1;
--overlay: rgba(0, 0, 0, 0.50);
/* Text */
--text-primary: #0f172a;
--text-secondary: #475569;
--text-placeholder: #64748b;
--text-disabled: #94a3b8;
--text-on-color: #FFFFFF;
--text-error: var(--red-60);
--text-success: var(--green-70);
--text-warning: var(--yellow-70);
--text-info: var(--cyan-70);
--text-brand: var(--green-70);
--text-link: var(--blue-70);
/* Interactive */
--interactive: var(--blue-60);
--interactive-hover: var(--blue-70);
--interactive-active: var(--blue-80);
--interactive-selected: var(--blue-10);
--interactive-focus: var(--blue-60);
/* Brand */
--brand-primary: var(--green-60);
--brand-hover: var(--green-70);
--brand-subtle: rgba(34, 197, 94, 0.10);
--brand-border: rgba(34, 197, 94, 0.28);
/* CTA — primary actions (credible blue) */
--cta-primary: var(--blue-70);
--cta-hover: var(--blue-80);
--cta-text: #ffffff;
--accent-india: var(--green-60);
/* Borders */
--border-subtle: #e2e8f0;
--border-strong: #64748b;
--border-interactive: var(--blue-60);
--border-error: var(--red-60);
--border-brand: var(--green-60);
/* Icons */
--icon-primary: #0f172a;
--icon-secondary: #475569;
--icon-disabled: #94a3b8;
--icon-interactive: var(--blue-60);
--icon-brand: var(--green-60);
/* Inputs */
--input-bg: #ffffff;
--input-border: #94a3b8;
--input-border-focus: var(--blue-60);
--input-border-error: var(--red-60);
--input-text: #0f172a;
--input-placeholder: #64748b;
--input-label: #475569;
--input-helper: #64748b;
/* Buttons */
--btn-primary-bg: var(--blue-70);
--btn-primary-text: #ffffff;
--btn-primary-hover: var(--blue-80);
--btn-secondary-bg: var(--blue-60);
--btn-secondary-text: #FFFFFF;
--btn-secondary-hover: var(--blue-70);
--btn-ghost-text: var(--blue-60);
--btn-ghost-hover-bg: rgba(37, 99, 235, 0.08);
--btn-danger-bg: var(--red-60);
--btn-danger-hover: var(--red-70, #A2191F);
--btn-disabled-bg: #E0E0E0;
--btn-disabled-text: #8D8D8D;
/* Tags */
--tag-blue-bg: rgba(37, 99, 235, 0.12);
--tag-blue-text: var(--blue-80);
--tag-green-bg: rgba(34, 197, 94, 0.12);
--tag-green-text: var(--green-80);
--tag-saffron-bg: rgba(234, 88, 12, 0.12);
--tag-saffron-text: var(--saffron-70);
--tag-red-bg: rgba(218, 30, 40, 0.10);
--tag-red-text: var(--red-70, #A2191F);
--tag-gray-bg: #E0E0E0;
--tag-gray-text: #525252;
--tag-cyan-bg: rgba(17, 146, 232, 0.12);
--tag-cyan-text: var(--cyan-70);
/* Notifications */
--notif-error-bg: rgba(218, 30, 40, 0.08);
--notif-error-border: var(--red-60);
--notif-warning-bg: rgba(241, 194, 27, 0.10);
--notif-warning-border: var(--yellow-50, #B28600);
--notif-success-bg: rgba(34, 197, 94, 0.10);
--notif-success-border: var(--green-60);
--notif-info-bg: rgba(17, 146, 232, 0.08);
--notif-info-border: var(--cyan-60, #0072C3);
/* Shadows (lighter for light bg) */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.14);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.14);
--shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16);
}
/* ── assets/design-system/tokens/brand-visual.css ─────────────────────────────── */
/* ============================================================
Brand visual language — aligned to mtsai-logo.png
Royal blue + logo green (+ red reserved for alerts in --red-*)
============================================================ */
:root {
/* ─── SIGNATURE GRADIENTS ──────────────────────────────── */
--gradient-hero:
radial-gradient(ellipse 80% 60% at 20% 30%, rgba(37, 99, 235, 0.20) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(34, 197, 94, 0.10) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 90%, rgba(29, 78, 216, 0.12) 0%, transparent 50%),
linear-gradient(160deg, #0c1224 0%, #0f172a 40%, #0c1224 100%);
--gradient-hero-cta:
radial-gradient(ellipse 70% 50% at 15% 40%, rgba(34, 197, 94, 0.08) 0%, transparent 55%),
radial-gradient(ellipse 60% 45% at 85% 60%, rgba(37, 99, 235, 0.16) 0%, transparent 55%),
linear-gradient(150deg, #0f1419 0%, #0f172a 100%);
--gradient-band-blue:
linear-gradient(135deg, #0a1628 0%, #0f1f3a 50%, #0a1628 100%);
--gradient-band-green:
radial-gradient(ellipse 100% 100% at 50% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 70%),
linear-gradient(180deg, #0c1810 0%, #0a120c 100%);
--gradient-section-dark: linear-gradient(180deg, #111111 0%, #171717 100%);
--gradient-masterbrand: linear-gradient(90deg, #1e40af 0%, #2563eb 42%, #22c55e 100%);
--gradient-cta: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
--gradient-data: linear-gradient(135deg, #60a5fa 0%, #4ade80 100%);
/* ─── GEOMETRY / PATTERN ───────────────────────────────── */
--pattern-dot-grid: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.035)'/%3E%3C/svg%3E");
--pattern-fine-grid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
--pattern-cross: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='rgba(37,99,235,0.10)'/%3E%3C/svg%3E");
/* ─── DISPLAY TYPOGRAPHY EXPANSION ─────────────────────── */
--type-display-hero: 6rem;
--type-display-epic: 7.5rem;
--type-display-cinematic: 9rem;
/* ─── GLASS SURFACE ────────────────────────────────────── */
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-bg-hover: rgba(255, 255, 255, 0.055);
--glass-border: rgba(255, 255, 255, 0.09);
--glass-border-hover: rgba(255, 255, 255, 0.16);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
--glass-blur: blur(12px);
--glass-blur-heavy: blur(24px);
--glass-blue-tint: rgba(37, 99, 235, 0.08);
--glass-green-tint: rgba(34, 197, 94, 0.06);
/* ─── SECTION RHYTHM SYSTEM ─────────────────────────────── */
--section-hero: var(--gradient-hero);
--section-dark: #111111;
--section-raised: #171717;
--section-card-grid: #0d0d0d;
--section-band-blue: var(--gradient-band-blue);
--section-band-green: var(--gradient-band-green);
--section-cta: var(--gradient-hero-cta);
--section-pad-sm: clamp(48px, 8vw, 80px);
--section-pad-md: clamp(80px, 12vw, 128px);
--section-pad-lg: clamp(120px, 16vw, 192px);
}
.glass-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
border-radius: 14px;
transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.glass-card:hover {
background: var(--glass-bg-hover);
border-color: var(--glass-border-hover);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.glass-card--blue {
background: var(--glass-blue-tint);
border-color: rgba(37, 99, 235, 0.18);
}
.glass-card--blue:hover {
border-color: rgba(37, 99, 235, 0.32);
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.16);
}
.glass-card--green {
background: var(--glass-green-tint);
border-color: rgba(34, 197, 94, 0.18);
}
.glass-card--green:hover {
border-color: rgba(34, 197, 94, 0.32);
box-shadow: 0 8px 32px rgba(34, 197, 94, 0.14);
}
.type-hero { font-size: var(--type-display-hero); font-family: var(--font-display); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; }
.type-epic { font-size: var(--type-display-epic); font-family: var(--font-display); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; }
.type-cinematic { font-size: var(--type-display-cinematic); font-family: var(--font-display); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; }
.type-hero-fluid {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.03em;
font-size: clamp(52px, 8vw, 112px);
}
.text-gradient-masterbrand {
background: var(--gradient-masterbrand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-data {
background: var(--gradient-data);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-cta {
background: var(--gradient-cta);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.pattern-overlay {
position: relative;
}
.pattern-overlay::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--pattern-dot-grid);
pointer-events: none;
z-index: 0;
}
.pattern-overlay > * { position: relative; z-index: 1; }
.pattern-grid-overlay::before {
background-image: var(--pattern-fine-grid);
}
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent 100%);
border: none;
margin: 0;
}
.accent-line {
display: block;
width: 40px;
height: 3px;
background: var(--gradient-masterbrand);
border-radius: 2px;
margin-bottom: 1.5rem;
}
.accent-line--saffron {
background: var(--gradient-cta);
}
/* ── assets/design-system/tokens/density.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Density Tokens
Controls: compact / comfortable / spacious modes
Apply .mts-density--compact or .mts-density--spacious
to or any container to shift component scale.
Reference: IBM Carbon, Material M3 density
============================================================ */
/* ── Default (comfortable) — same as current token values ── */
:root {
--density-input-height: var(--input-height-md); /* 48px */
--density-btn-height: var(--btn-height-md); /* 48px */
--density-row-padding-y: var(--space-4); /* 12px */
--density-cell-padding-y: var(--space-4);
--density-cell-padding-x: var(--space-5);
--density-gap: var(--space-5); /* 16px */
--density-card-padding: var(--space-8); /* 40px */
--density-nav-item-height: 44px;
--density-icon-size: var(--size-icon-md); /* 20px */
}
/* ── Compact density — tighter spacing for data-dense UIs ── */
.mts-density--compact {
--density-input-height: var(--input-height-sm); /* 32px */
--density-btn-height: var(--btn-height-sm); /* 32px */
--density-row-padding-y: var(--space-2); /* 4px */
--density-cell-padding-y: var(--space-2);
--density-cell-padding-x: var(--space-4);
--density-gap: var(--space-3); /* 8px */
--density-card-padding: var(--space-5); /* 16px */
--density-nav-item-height: 32px;
--density-icon-size: var(--size-icon-sm); /* 16px */
}
/* ── Spacious density — airy layout for content/marketing ── */
.mts-density--spacious {
--density-input-height: var(--input-height-lg); /* 64px */
--density-btn-height: var(--btn-height-lg); /* 64px */
--density-row-padding-y: var(--space-6); /* 24px */
--density-cell-padding-y: var(--space-6);
--density-cell-padding-x: var(--space-7);
--density-gap: var(--space-7); /* 32px */
--density-card-padding: var(--space-10); /* 64px */
--density-nav-item-height: 56px;
--density-icon-size: var(--size-icon-lg); /* 24px */
}
/* ── Apply density tokens to components ───────────────────── */
/* Inputs */
.mts-density--compact input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.mts-density--compact select,
.mts-density--compact textarea,
.mts-density--spacious input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.mts-density--spacious select {
height: var(--density-input-height);
}
/* Buttons */
.mts-density--compact .mts-btn,
.mts-density--spacious .mts-btn {
height: var(--density-btn-height);
}
/* Table rows */
.mts-density--compact .mts-table td,
.mts-density--compact .mts-table th {
padding-top: var(--density-cell-padding-y);
padding-bottom: var(--density-cell-padding-y);
padding-left: var(--density-cell-padding-x);
padding-right: var(--density-cell-padding-x);
}
/* Cards */
.mts-density--compact .mts-card--feature,
.mts-density--compact .mts-card--dark,
.mts-density--compact .mts-card--challenge,
.mts-density--compact .mts-card--approach {
padding: var(--density-card-padding);
}
/* Nav items */
.mts-density--compact .mts-side-nav__item {
padding-top: var(--density-row-padding-y);
padding-bottom: var(--density-row-padding-y);
}
/* ── assets/design-system/tokens/data-viz.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Data Visualisation Tokens
Colour palettes for charts, graphs, and maps.
Designed for WCAG 2.1 AA contrast on both light and dark
backgrounds, and distinguishable for the most common forms
of colour blindness (deuteranopia, protanopia, tritanopia).
Reference: IBM Carbon Data Visualization, Polaris charts
============================================================ */
:root {
/* ── Categorical palette (up to 14 series) ─────────────── */
/* Use in order: cat-01 → cat-02 → ... for sequential series */
--viz-cat-01: #2563eb; /* Logo royal blue — primary series */
--viz-cat-02: #22c55e; /* Logo green — secondary series */
--viz-cat-03: #ea580c; /* Amber — tertiary (distinct from red alerts) */
--viz-cat-04: #1192E8; /* Cyan — fourth series */
--viz-cat-05: #9B59B6; /* Purple — fifth series */
--viz-cat-06: #E74C3C; /* Coral Red — sixth series */
--viz-cat-07: #2ECC71; /* Emerald — seventh series */
--viz-cat-08: #F39C12; /* Amber — eighth series */
--viz-cat-09: #1ABC9C; /* Teal — ninth series */
--viz-cat-10: #E67E22; /* Orange — tenth series */
--viz-cat-11: #3498DB; /* Sky Blue — eleventh series */
--viz-cat-12: #27AE60; /* Forest Green — twelfth series */
--viz-cat-13: #8E44AD; /* Violet — thirteenth series */
--viz-cat-14: #D35400; /* Burnt Orange — fourteenth series */
/* Semantic shorthand arrays (for JS charting libs) */
--viz-palette-3: var(--viz-cat-01), var(--viz-cat-02), var(--viz-cat-03);
--viz-palette-5: var(--viz-cat-01), var(--viz-cat-02), var(--viz-cat-03), var(--viz-cat-04), var(--viz-cat-05);
/* ── Sequential palettes (single-hue intensity scales) ─── */
/* Blue sequential (low → high intensity) */
--viz-seq-blue-01: #eff6ff;
--viz-seq-blue-02: #bfdbfe;
--viz-seq-blue-03: #93c5fd;
--viz-seq-blue-04: #60a5fa;
--viz-seq-blue-05: #3b82f6;
--viz-seq-blue-06: #2563eb;
--viz-seq-blue-07: #1d4ed8;
--viz-seq-blue-08: #1e3a8a;
/* Green sequential */
--viz-seq-green-01: #DEFBE6;
--viz-seq-green-02: #A7F0BA;
--viz-seq-green-03: #6FDC8C;
--viz-seq-green-04: #42BE65;
--viz-seq-green-05: #22c55e;
--viz-seq-green-06: #198038;
--viz-seq-green-07: #0E6027;
--viz-seq-green-08: #022D0D;
/* Saffron/Orange sequential */
--viz-seq-saffron-01: #ffedd5;
--viz-seq-saffron-02: #fed7aa;
--viz-seq-saffron-03: #fdba74;
--viz-seq-saffron-04: #fb923c;
--viz-seq-saffron-05: #ea580c;
--viz-seq-saffron-06: #c2410c;
--viz-seq-saffron-07: #9a3412;
--viz-seq-saffron-08: #7c2d12;
/* ── Diverging palettes (negative ↔ neutral ↔ positive) ── */
/* Blue–Red (performance below/above target) */
--viz-div-neg-strong: #A82020;
--viz-div-neg-mid: #E85555;
--viz-div-neg-light: #F28080;
--viz-div-neutral: #E0E0E0;
--viz-div-pos-light: #6FDC8C;
--viz-div-pos-mid: #22c55e;
--viz-div-pos-strong: #0E6027;
/* Blue–Orange (for maps, heatmaps) */
--viz-div2-neg-strong: #1e3a8a;
--viz-div2-neg-mid: #2563eb;
--viz-div2-neg-light: #93c5fd;
--viz-div2-neutral: #F4F4F4;
--viz-div2-pos-light: #86efac;
--viz-div2-pos-mid: #22c55e;
--viz-div2-pos-strong: #15803d;
/* ── Status / traffic-light colours (for KPI charts) ───── */
--viz-status-good: #22c55e;
--viz-status-warning: #ca8a04;
--viz-status-critical: #D82B2B;
--viz-status-neutral: #8D8D8D;
--viz-status-info: #2563eb;
/* ── Chart UI tokens ────────────────────────────────────── */
--viz-axis-line: var(--border-subtle);
--viz-axis-label: var(--text-secondary);
--viz-grid-line: rgba(0, 0, 0, 0.06);
--viz-grid-line-dark: rgba(255, 255, 255, 0.06);
--viz-tooltip-bg: #161616;
--viz-tooltip-text: #F4F4F4;
--viz-tooltip-border: rgba(255,255,255,0.08);
--viz-legend-text: var(--text-secondary);
--viz-highlight: rgba(37, 99, 235, 0.16);
--viz-selection: rgba(37, 99, 235, 0.26);
/* ── Chart sizing tokens ────────────────────────────────── */
--viz-bar-min-width: 4px;
--viz-bar-max-width: 48px;
--viz-dot-size: 6px;
--viz-dot-size-lg: 10px;
--viz-stroke-width: 2px;
--viz-stroke-width-lg: 3px;
/* ── Light theme overrides ──────────────────────────────── */
}
[data-theme="light"] {
--viz-axis-line: #E0E0E0;
--viz-grid-line: rgba(0, 0, 0, 0.06);
--viz-tooltip-bg: #161616; /* tooltip stays dark for contrast */
}
/* ── Chart container patterns ─────────────────────────────
Utility classes for wrapping charting library canvases.
─────────────────────────────────────────────────────── */
/* Responsive wrapper — maintains 16:9 aspect by default */
.mts-chart {
position: relative;
width: 100%;
}
.mts-chart--16-9 { aspect-ratio: 16 / 9; }
.mts-chart--4-3 { aspect-ratio: 4 / 3; }
.mts-chart--sq { aspect-ratio: 1 / 1; }
.mts-chart--fixed { height: 320px; }
.mts-chart--sm { height: 200px; }
.mts-chart--lg { height: 480px; }
.mts-chart canvas,
.mts-chart svg {
display: block;
width: 100% !important;
height: 100% !important;
}
/* Chart card wrapper */
.mts-chart-card {
background: #fff;
border: 1px solid var(--border-subtle);
padding: var(--space-6);
}
.mts-chart-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-5);
gap: var(--space-5);
}
.mts-chart-card__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.mts-chart-card__subtitle {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 3px;
}
/* Legend row */
.mts-chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin-top: var(--space-5);
}
.mts-chart-legend__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 12px;
color: var(--viz-legend-text);
}
.mts-chart-legend__dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.mts-chart-legend__line {
width: 20px;
height: 3px;
flex-shrink: 0;
}
/* Colour swatch helpers for legend dots */
.mts-chart-legend__dot--01 { background: var(--viz-cat-01); }
.mts-chart-legend__dot--02 { background: var(--viz-cat-02); }
.mts-chart-legend__dot--03 { background: var(--viz-cat-03); }
.mts-chart-legend__dot--04 { background: var(--viz-cat-04); }
.mts-chart-legend__dot--05 { background: var(--viz-cat-05); }
.mts-chart-legend__dot--06 { background: var(--viz-cat-06); }
/* Donut / pie centre label */
.mts-chart-donut-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.mts-chart-donut-label__val {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
}
.mts-chart-donut-label__label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
/* Mini sparkline container */
.mts-sparkline {
display: inline-flex;
align-items: center;
height: 32px;
min-width: 80px;
}
.mts-sparkline canvas,
.mts-sparkline svg { display: block; }
/* ── Colour reference table (used in design docs) ──────── */
.mts-viz-palette {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
list-style: none;
padding: 0; margin: 0;
}
.mts-viz-palette__swatch {
width: 40px;
height: 40px;
border: 1px solid rgba(0,0,0,0.08);
position: relative;
}
.mts-viz-palette__swatch::after {
content: attr(data-name);
position: absolute;
top: 44px;
left: 0;
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-secondary);
white-space: nowrap;
}
/* ── assets/design-system/tokens/typography.css ─────────────────────────────── */
/* ============================================================
Typography tokens — Fraunces + DM Sans + JetBrains Mono
(fonts loaded async from page , not @import)
============================================================ */
:root {
/* --- Font Families --- */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-ui: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
/* --- Font Weights --- */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* --- Type Scale (Carbon 2x) --- */
/* Utility / UI */
--type-label-01: 0.75rem; /* 12px — labels, captions */
--type-label-02: 0.875rem; /* 14px — helper text, small UI */
--type-body-01: 0.875rem; /* 14px — compact body */
--type-body-02: 1rem; /* 16px — standard body */
--type-body-compact-01: 0.875rem;
--type-body-compact-02: 1rem;
/* Headings */
--type-heading-01: 0.875rem; /* 14px — h6 equivalent */
--type-heading-02: 1rem; /* 16px — h5 */
--type-heading-03: 1.25rem; /* 20px — h4 */
--type-heading-04: 1.75rem; /* 28px — h3 */
--type-heading-05: 2rem; /* 32px — h2 */
--type-heading-06: 2.625rem; /* 42px — h1 */
--type-heading-07: 3.375rem; /* 54px — display */
/* Display / Expressive */
--type-display-01: 2.625rem; /* 42px */
--type-display-02: 3.375rem; /* 54px */
--type-display-03: 4.25rem; /* 68px */
--type-display-04: 5.25rem; /* 84px */
/* --- Line Heights --- */
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-normal: 1.5;
--lh-relaxed: 1.625;
--lh-loose: 2;
/* --- Letter Spacing --- */
--ls-tighter: -0.02em;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Long-form readability (trust, policies, articles) */
--prose-max-width: 68ch;
}
/* --- Base Typography Styles --- */
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-size: var(--type-body-02);
font-weight: var(--weight-regular);
line-height: var(--lh-normal);
color: var(--text-primary);
}
/* Display headings use --font-display */
h1, h2, h3, .display, .heading {
font-family: var(--font-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--type-heading-06); font-weight: var(--weight-bold); }
h2 { font-size: var(--type-heading-05); font-weight: var(--weight-semibold); }
h3 { font-size: var(--type-heading-04); font-weight: var(--weight-semibold); }
h4 { font-size: var(--type-heading-03); font-weight: var(--weight-medium); font-family: var(--font-ui); }
h5 { font-size: var(--type-heading-02); font-weight: var(--weight-medium); font-family: var(--font-ui); }
h6 { font-size: var(--type-heading-01); font-weight: var(--weight-semibold); font-family: var(--font-ui); letter-spacing: var(--ls-wide); text-transform: uppercase; }
/* Type utility classes */
.type-label { font-size: var(--type-label-01); font-weight: var(--weight-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.type-helper { font-size: var(--type-label-02); color: var(--text-secondary); }
.type-body-sm { font-size: var(--type-body-01); line-height: var(--lh-normal); }
.type-body { font-size: var(--type-body-02); line-height: var(--lh-normal); }
.type-mono { font-family: var(--font-mono); font-size: 0.875em; }
.type-display { font-family: var(--font-display); font-size: var(--type-display-01); font-weight: var(--weight-bold); letter-spacing: var(--ls-tighter); }
/* ── Mono font usage constraint ─────────────────────────────────
JetBrains Mono is reserved for: live data values, system status
indicators, technical IDs, and inline code. Section labels and
navigation micro-copy use DM Sans with wide letter-spacing
instead. Override .font-mono--ui for the permitted exceptions.
────────────────────────────────────────────────────────────── */
.type-label-ui {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
}
/* ── assets/design-system/tokens/spacing.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Spacing & Sizing Tokens
Base: 4px grid (Carbon 2x compatible)
============================================================ */
:root {
/* --- Base spacing scale (4px grid) --- */
--space-1: 0.125rem; /* 2px */
--space-2: 0.25rem; /* 4px */
--space-3: 0.5rem; /* 8px */
--space-4: 0.75rem; /* 12px */
--space-5: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-7: 2rem; /* 32px */
--space-8: 2.5rem; /* 40px */
--space-9: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
--space-11: 5rem; /* 80px */
--space-12: 6rem; /* 96px */
--space-13: 10rem; /* 160px */
/* --- Component Sizing --- */
--size-touch-target: 44px; /* WCAG 2.5.5 minimum */
--size-icon-sm: 16px;
--size-icon-md: 20px;
--size-icon-lg: 24px;
--size-icon-xl: 32px;
/* --- Button Sizes --- */
--btn-height-sm: 32px;
--btn-height-md: 48px; /* default */
--btn-height-lg: 64px;
--btn-height-xl: 80px; /* expressive hero */
/* --- Input Sizes --- */
--input-height-sm: 32px;
--input-height-md: 48px; /* default */
--input-height-lg: 64px;
/* --- Border Radius --- */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px; /* pill */
/* --- Layout --- */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
--grid-columns: 16;
--grid-gutter: var(--space-5); /* 16px */
--grid-margin: var(--space-5); /* 16px — expanded to 32px at lg */
/* Sticky nav + anchor offset (used by scroll-padding / scroll-margin) */
--nav-sticky-offset: 5.75rem; /* ~92px — 64px bar + breathing room */
}
/* ── assets/design-system/tokens/motion.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Motion System v2
Philosophy: Functional motion only. Every animation has purpose.
Sources: Carbon productive motion + Linear, Stripe, Vercel,
Framer Motion, Apple — all filtered through the
GOV.UK constraint: no decoration for decoration's sake.
============================================================ */
:root {
/* ─── DURATION SCALE ────────────────────────────────────── */
/* Micro — imperceptible state change */
--duration-instant: 0ms;
--duration-micro: 50ms; /* icon color swap, dot pulse */
/* Fast — hover, focus, chip toggle */
--duration-fast-01: 70ms; /* Carbon fast-01 */
--duration-fast-02: 110ms; /* Carbon fast-02 */
/* Moderate — expand, reveal, slide */
--duration-moderate-01: 150ms; /* Carbon moderate-01 */
--duration-moderate-02: 240ms; /* Carbon moderate-02 */
--duration-moderate-03: 320ms; /* Extended moderate */
/* Slow — page-level, hero, modal */
--duration-slow-01: 400ms; /* Carbon slow-01 */
--duration-slow-02: 700ms; /* Carbon slow-02 */
--duration-slow-03: 1000ms; /* Long reveal sequences */
/* Spring — physics-based overshoot */
--duration-spring-sm: 350ms; /* Small spring (dialog) */
--duration-spring-md: 500ms; /* Medium spring (card, panel) */
--duration-spring-lg: 700ms; /* Large spring (page hero) */
/* ─── EASING CURVES ─────────────────────────────────────── */
/* Carbon standard */
--ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
--ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
--ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
--ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
--ease-linear: linear;
/* Spring / Overshoot (Framer Motion style) */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot ~6% */
--ease-spring-gentle: cubic-bezier(0.25, 1.25, 0.5, 1); /* subtle overshoot */
--ease-spring-bouncy: cubic-bezier(0.34, 1.8, 0.64, 1); /* noticeable bounce */
/* Smooth / Decelerate (Apple style) */
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Material decel */
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Material accel */
/* Ease variants */
--ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1); /* smooth in-out */
--ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* slight snap-back */
/* ─── SHORTHAND TRANSITIONS ────────────────────────────── */
--transition-color: color var(--duration-fast-02) var(--ease-standard),
background-color var(--duration-fast-02) var(--ease-standard),
border-color var(--duration-fast-02) var(--ease-standard);
--transition-shadow: box-shadow var(--duration-moderate-01) var(--ease-smooth);
--transition-transform: transform var(--duration-moderate-01) var(--ease-spring-gentle);
--transition-opacity: opacity var(--duration-moderate-01) var(--ease-entrance);
--transition-all: all var(--duration-fast-02) var(--ease-standard);
--transition-card: transform var(--duration-moderate-01) var(--ease-smooth),
box-shadow var(--duration-moderate-01) var(--ease-smooth);
}
/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
:root {
--duration-micro: 0ms;
--duration-fast-01: 0ms;
--duration-fast-02: 0ms;
--duration-moderate-01: 0ms;
--duration-moderate-02: 0ms;
--duration-moderate-03: 0ms;
--duration-slow-01: 0ms;
--duration-slow-02: 0ms;
--duration-slow-03: 0ms;
--duration-spring-sm: 0ms;
--duration-spring-md: 0ms;
--duration-spring-lg: 0ms;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════════════
KEYFRAME LIBRARY
════════════════════════════════════════════════════════════ */
/* ─── ENTRANCE: Fade variants ────────────────────────────── */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
/* ─── ENTRANCE: Scale variants (Vercel / Framer style) ───── */
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes springIn {
0% { opacity: 0; transform: scale(0.92) translateY(8px); }
60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
80% { transform: scale(0.99) translateY(1px); }
100% { transform: scale(1) translateY(0); }
}
@keyframes springInSmall {
0% { opacity: 0; transform: scale(0.96); }
65% { opacity: 1; transform: scale(1.015); }
100% { transform: scale(1); }
}
/* ─── ENTRANCE: Clip-path reveals (Linear / Stripe style) ── */
@keyframes clipRevealUp {
from { clip-path: inset(100% 0 0 0); opacity: 0.6; }
to { clip-path: inset(0% 0 0 0); opacity: 1; }
}
@keyframes clipRevealDown {
from { clip-path: inset(0 0 100% 0); opacity: 0.6; }
to { clip-path: inset(0 0 0% 0); opacity: 1; }
}
@keyframes clipRevealLeft {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}
/* ─── ENTRANCE: Blur reveal (Apple style) ────────────────── */
@keyframes blurReveal {
from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
to { opacity: 1; filter: blur(0px); transform: translateY(0); }
}
@keyframes blurRevealSubtle {
from { opacity: 0; filter: blur(3px); }
to { opacity: 1; filter: blur(0); }
}
/* ─── SLIDE (Toast, Notification, Drawer) ────────────────── */
@keyframes slideInRight {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-100%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideOutRight {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }
}
/* ─── STATUS / PULSE indicators ─────────────────────────── */
@keyframes statusPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@keyframes saffronGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.45); }
50% { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
}
@keyframes blueGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@keyframes dotBlink {
0%, 80%, 100% { transform: scale(1); opacity: 1; }
40% { transform: scale(0.6); opacity: 0.5; }
}
/* ─── LOADING states ─────────────────────────────────────── */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes shimmer {
from { background-position: -400% 0; }
to { background-position: 400% 0; }
}
@keyframes skeletonWave {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
@keyframes progressBar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ─── GRADIENT FLOW (Stripe CTA style) ───────────────────── */
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes gradientShift {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
/* ─── TEXT effects ───────────────────────────────────────── */
@keyframes textShimmer {
from { background-position: -200% center; }
to { background-position: 200% center; }
}
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
@keyframes cursorBlink {
0%, 100% { border-color: transparent; }
50% { border-color: currentColor; }
}
/* ─── UI-SPECIFIC ────────────────────────────────────────── */
@keyframes underlineExpand {
from { transform: scaleX(0); transform-origin: left; }
to { transform: scaleX(1); transform-origin: left; }
}
@keyframes ripple {
from { transform: scale(0); opacity: 0.35; }
to { transform: scale(4); opacity: 0; }
}
@keyframes checkDraw {
from { stroke-dashoffset: 24; opacity: 0; }
to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes successCircle {
from { stroke-dashoffset: 157; }
to { stroke-dashoffset: 0; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes counterUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes flipIn {
0% { transform: rotateX(-90deg); opacity: 0; transform-origin: bottom; }
100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes accordionOpen {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes focusRingExpand {
0% { outline-offset: 1px; outline-width: 2px; }
100% { outline-offset: 3px; outline-width: 3px; }
}
@keyframes modalBackdrop {
from { opacity: 0; backdrop-filter: blur(0px); }
to { opacity: 1; backdrop-filter: blur(4px); }
}
/* ── assets/design-system/tokens/elevation.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Elevation & Shadow Tokens
============================================================ */
:root {
/* --- Stacking (nav, overlays, a11y chrome) --- */
--z-sticky-nav: 100;
--z-dropdown: 1000;
--z-scroll-progress: 9999;
--z-skip-link: 10000;
/* --- Shadows (layered: soft ambient + key light, light-surface tuned) --- */
--shadow-none: none;
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
--shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.09);
--shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px rgba(15, 23, 42, 0.11);
--shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 28px 56px rgba(15, 23, 42, 0.12);
--shadow-2xl: 0 12px 24px rgba(15, 23, 42, 0.07), 0 40px 72px rgba(15, 23, 42, 0.14);
/* --- Brand-tinted shadows --- */
--shadow-blue: 0 2px 8px rgba(37, 99, 235, 0.12), 0 12px 32px rgba(37, 99, 235, 0.2);
--shadow-green: 0 2px 8px rgba(34, 197, 94, 0.1), 0 12px 32px rgba(34, 197, 94, 0.16);
--shadow-saffron: 0 2px 8px rgba(234, 88, 12, 0.1), 0 12px 32px rgba(234, 88, 12, 0.16);
--shadow-red: 0 2px 8px rgba(218, 30, 40, 0.12), 0 12px 32px rgba(218, 30, 40, 0.18);
/* --- Focus ring (semantic tokens — works on light sections) --- */
--focus-ring: 0 0 0 3px var(--interactive-focus);
--focus-ring-offset: 0 0 0 2px var(--layer-bg), 0 0 0 5px var(--interactive-focus);
--focus-ring-on-dark: 0 0 0 3px #ffffff;
--focus-ring-brand: 0 0 0 3px var(--brand-primary);
--focus-ring-saffron: 0 0 0 3px var(--saffron-50);
}
/* ── assets/design-system/base/reset.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — CSS Reset
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
text-size-adjust: 100%;
}
body {
min-height: 100vh;
background-color: var(--layer-bg);
color: var(--text-primary);
font-family: var(--font-body);
line-height: var(--lh-normal);
}
img, svg, video {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: var(--text-link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, ol {
list-style: none;
}
table {
border-collapse: collapse;
}
fieldset {
border: none;
}
:focus-visible {
outline: 3px solid var(--interactive-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
box-shadow: none; /* outline is canonical; avoids double ring with layered focus utilities */
}
/* High-visibility focus ring on dark backgrounds (heroes, dark sections, CTAs) */
.mts-hero :focus-visible,
.mts-section--dark :focus-visible,
.mts-section-cta :focus-visible,
.mts-section--dark-green :focus-visible {
outline-color: #FFFFFF;
outline-offset: 3px;
}
/* Saffron focus ring on CTA buttons specifically */
.mts-hero .mts-btn--primary:focus-visible {
outline-color: var(--cta-primary);
}
/* ── assets/design-system/base/grid.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — 16-Column Grid System
Breakpoints: sm 320, md 672, lg 1056, xl 1312, 2xl 1584
============================================================ */
:root {
--breakpoint-sm: 320px;
--breakpoint-md: 672px;
--breakpoint-lg: 1056px;
--breakpoint-xl: 1312px;
--breakpoint-2xl: 1584px;
}
.mts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
padding: 0 var(--space-5);
max-width: var(--container-2xl);
margin: 0 auto;
}
@media (min-width: 672px) {
.mts-grid {
grid-template-columns: repeat(8, 1fr);
padding: 0 var(--space-6);
}
}
@media (min-width: 1056px) {
.mts-grid {
grid-template-columns: repeat(16, 1fr);
padding: 0 var(--space-7);
}
}
/* Span helpers */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.col-16 { grid-column: span 16; }
@media (max-width: 671px) {
[class*="col-"] {
grid-column: span 4;
}
}
/* Container utility */
.mts-container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Section spacing */
.section { padding: var(--space-10) 0; }
.section-sm { padding: var(--space-7) 0; }
.section-lg { padding: var(--space-12) 0; }
/* ── assets/design-system/base/utilities.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Utility Classes
============================================================ */
/* Display */
.hidden { display: none !important; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
/* Flex utils */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: var(--text-secondary); }
.text-brand { color: var(--brand-primary); }
.text-interactive { color: var(--interactive); }
.text-saffron { color: var(--saffron-50); }
.text-error { color: var(--text-error); }
.font-mono { font-family: var(--font-mono); }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Backgrounds */
.bg-base { background-color: var(--layer-bg); }
.bg-01 { background-color: var(--layer-01); }
.bg-02 { background-color: var(--layer-02); }
.bg-03 { background-color: var(--layer-03); }
.bg-brand { background-color: var(--brand-subtle); }
.bg-blue { background-color: var(--blue-alpha-12); }
/* Border */
.border { border: 1px solid var(--border-subtle); }
.border-strong { border: 1px solid var(--border-strong); }
.border-brand { border: 1px solid var(--border-brand); }
.border-radius { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-full); }
/* Spacing */
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }
.p-9 { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }
/* Divider */
.divider {
height: 1px;
background: var(--border-subtle);
margin: var(--space-6) 0;
}
/* Skip link (accessibility) */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-5);
background: var(--interactive);
color: var(--white);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-sm);
font-weight: var(--weight-semibold);
z-index: 9999;
transition: top var(--motion-hover);
}
.skip-link:focus {
top: var(--space-3);
}
/* Status dot */
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.status-dot.active {
background: var(--status-active);
animation: statusPulse 2s ease infinite;
}
.status-dot.warning {
background: var(--status-warning);
}
.status-dot.error {
background: var(--status-error);
}
.status-dot.neutral {
background: var(--status-neutral);
}
.status-dot.pilot {
background: var(--status-pilot);
}
/* Skeleton / shimmer */
.skeleton {
background: linear-gradient(90deg, var(--layer-01) 25%, var(--layer-02) 50%, var(--layer-01) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-sm);
}
/* Visually hidden (accessible) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ── assets/design-system/base/utilities-extended.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Extended Utility Classes
Full spacing scale, margin helpers, flex/grid utilities,
overflow, position, sizing, and colour utilities.
Inspired by: Tailwind CSS (MIT), Open Props (MIT)
============================================================ */
/* ── Margin utilities ────────────────────────────────────── */
/* All sides */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }
/* Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }
.mt-11 { margin-top: var(--space-11); }
.mt-12 { margin-top: var(--space-12); }
.mt-auto { margin-top: auto; }
/* Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-auto { margin-bottom: auto; }
/* Left / Right */
.ml-0 { margin-left: 0; }
.ml-auto { margin-left: auto; }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.mr-0 { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
/* Horizontal */
.mx-auto { margin-inline: auto; }
.mx-0 { margin-inline: 0; }
.mx-3 { margin-inline: var(--space-3); }
.mx-4 { margin-inline: var(--space-4); }
.mx-5 { margin-inline: var(--space-5); }
.mx-6 { margin-inline: var(--space-6); }
/* Vertical */
.my-0 { margin-block: 0; }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }
.my-5 { margin-block: var(--space-5); }
.my-6 { margin-block: var(--space-6); }
.my-7 { margin-block: var(--space-7); }
.my-8 { margin-block: var(--space-8); }
.my-10 { margin-block: var(--space-10); }
/* ── Padding utilities ────────────────────────────────────── */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
/* Top/bottom */
.pt-0 { padding-top: 0; }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }
.pb-0 { padding-bottom: 0; }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-7 { padding-bottom: var(--space-7); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
/* Left/right */
.pl-0 { padding-left: 0; }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pr-0 { padding-right: 0; }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
/* Horizontal / vertical */
.px-0 { padding-inline: 0; }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }
.px-7 { padding-inline: var(--space-7); }
.px-8 { padding-inline: var(--space-8); }
.py-0 { padding-block: 0; }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }
.py-7 { padding-block: var(--space-7); }
.py-8 { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
/* ── Display ─────────────────────────────────────────────── */
.inline-block { display: inline-block; }
.inline { display: inline; }
.contents { display: contents; }
.flow-root { display: flow-root; }
.table { display: table; }
.table-cell { display: table-cell; }
/* ── Flexbox ─────────────────────────────────────────────── */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-around { justify-content: space-around; }
/* ── Grid ────────────────────────────────────────────────── */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-full { grid-column: 1 / -1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
/* ── Sizing ──────────────────────────────────────────────── */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-screen { width: 100vw; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }
.max-w-full { max-width: 100%; }
.max-w-prose { max-width: 65ch; }
.min-w-0 { min-width: 0; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
/* ── Position ────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
/* ── Overflow ────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-visible { overflow: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
/* ── Typography ──────────────────────────────────────────── */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 22px; }
.text-2xl { font-size: 28px; }
.text-3xl { font-size: 36px; }
.text-4xl { font-size: 48px; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semi { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 800; }
.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-loose { line-height: 1.8; }
.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }
.italic { font-style: italic; }
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.whitespace-pre { white-space: pre; }
.break-words { overflow-wrap: break-word; word-break: break-word; }
.break-all { word-break: break-all; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
/* ── Opacity ─────────────────────────────────────────────── */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
/* ── Cursor ──────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
/* ── User select ─────────────────────────────────────────── */
.select-none { user-select: none; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }
/* ── List ────────────────────────────────────────────────── */
.list-none { list-style: none; padding: 0; margin: 0; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }
.list-inside { list-style-position: inside; }
/* ── Borders ─────────────────────────────────────────────── */
.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }
.border-l { border-left: 1px solid var(--border-subtle); }
.border-r { border-right: 1px solid var(--border-subtle); }
.border-none { border: none; }
.border-transparent { border-color: transparent; }
.border-interactive { border-color: var(--interactive); }
.border-brand { border-color: var(--brand-primary); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
/* ── Shadow ──────────────────────────────────────────────── */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.shadow-md { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,0.10); }
.shadow-xl { box-shadow: 0 16px 48px rgba(0,0,0,0.14); }
.shadow-blue { box-shadow: 0 8px 32px rgba(37, 99, 235, 0.16); }
.shadow-green { box-shadow: 0 8px 32px rgba(83,170,0,0.18); }
/* ── Backgrounds (extended) ──────────────────────────────── */
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-transparent { background-color: transparent; }
.bg-navy { background-color: #000C2E; }
.bg-interactive { background-color: var(--interactive); }
.bg-brand { background-color: var(--brand-primary); }
.bg-saffron { background-color: var(--cta-primary); }
/* ── Responsive visibility ───────────────────────────────── */
@media (max-width: 768px) {
.md\:hidden { display: none !important; }
.md\:flex { display: flex !important; }
.md\:block { display: block !important; }
.md\:col-span-full { grid-column: 1 / -1; }
}
@media (min-width: 769px) {
.md\:visible { display: revert !important; }
.only-mobile { display: none !important; }
}
@media (max-width: 1024px) {
.lg\:hidden { display: none !important; }
}
@media (min-width: 1025px) {
.only-mobile, .only-tablet { display: none !important; }
}
/* ── Gap extended ────────────────────────────────────────── */
.gap-1 { gap: var(--space-1); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }
.gap-10 { gap: var(--space-10); }
/* ── Object fit ──────────────────────────────────────────── */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-center { object-position: center; }
.object-top { object-position: top; }
/* ── Misc ────────────────────────────────────────────────── */
.isolate { isolation: isolate; }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-neg-90 { transform: rotate(-90deg); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.transition-all { transition: all 200ms; }
.transition-transform { transition: transform 200ms; }
.transition-opacity { transition: opacity 200ms; }
.transition-colors { transition: color 150ms, background 150ms, border-color 150ms; }
.no-transition { transition: none !important; }
/* ── assets/design-system/base/animations.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Animation Utility Library
Apply these classes to elements to trigger named animations.
All respect prefers-reduced-motion via tokens/motion.css.
============================================================ */
/* ─── BASE ANIMATION CLASS ───────────────────────────────── */
/* Add .is-animated to trigger, use with .animate-* */
[class*="animate-"] {
animation-fill-mode: both;
}
/* ─── FADE ANIMATIONS ─────────────────────────────────────── */
.animate-fade-in { animation: fadeIn var(--duration-moderate-01) var(--ease-entrance); }
.animate-fade-in-up { animation: fadeInUp var(--duration-moderate-02) var(--ease-expressive); }
.animate-fade-in-down { animation: fadeInDown var(--duration-moderate-02) var(--ease-expressive); }
.animate-fade-in-left { animation: fadeInLeft var(--duration-moderate-02) var(--ease-expressive); }
.animate-fade-in-right { animation: fadeInRight var(--duration-moderate-02) var(--ease-expressive); }
/* ─── SCALE / SPRING ANIMATIONS ─────────────────────────── */
.animate-scale-in { animation: scaleIn var(--duration-moderate-01) var(--ease-spring-gentle); }
.animate-spring-in { animation: springIn var(--duration-spring-sm) var(--ease-standard); }
.animate-spring-in-sm { animation: springInSmall var(--duration-moderate-02) var(--ease-spring-gentle); }
/* ─── BLUR REVEAL (Apple / Stripe style) ─────────────────── */
.animate-blur-reveal { animation: blurReveal var(--duration-moderate-03) var(--ease-smooth); }
.animate-blur-reveal-subtle { animation: blurRevealSubtle var(--duration-moderate-02) var(--ease-smooth); }
/* ─── CLIP-PATH REVEALS (Linear style) ──────────────────── */
.animate-clip-up { animation: clipRevealUp var(--duration-moderate-02) var(--ease-entrance); }
.animate-clip-down { animation: clipRevealDown var(--duration-moderate-02) var(--ease-entrance); }
.animate-clip-left { animation: clipRevealLeft var(--duration-moderate-02) var(--ease-entrance); }
/* ─── SLIDE ANIMATIONS ───────────────────────────────────── */
.animate-slide-right { animation: slideInRight var(--duration-moderate-02) var(--ease-entrance); }
.animate-slide-left { animation: slideInLeft var(--duration-moderate-02) var(--ease-entrance); }
.animate-slide-up { animation: slideInUp var(--duration-moderate-02) var(--ease-entrance); }
/* ─── STATUS / FEEDBACK ANIMATIONS ──────────────────────── */
.animate-status-pulse { animation: statusPulse 2.4s ease infinite; }
.animate-saffron-glow { animation: saffronGlow 2.4s ease infinite; }
.animate-blue-glow { animation: blueGlow 2.4s ease infinite; }
.animate-pulse { animation: pulse 2s var(--ease-standard) infinite; }
.animate-float { animation: float 3s var(--ease-in-out-soft) infinite; }
.animate-shake { animation: shake var(--duration-moderate-02) var(--ease-standard); }
/* ─── LOADING ANIMATIONS ─────────────────────────────────── */
.animate-spin { animation: spin 0.7s var(--ease-linear) infinite; }
.animate-spin-slow { animation: spin 1.4s var(--ease-linear) infinite; }
/* Shimmer skeleton */
.animate-shimmer {
background: linear-gradient(
90deg,
var(--layer-01) 25%,
var(--layer-02) 50%,
var(--layer-01) 75%
);
background-size: 400% 100%;
animation: shimmer 1.6s var(--ease-linear) infinite;
}
/* Skeleton wave overlay */
.animate-skeleton-wave::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 50%,
transparent 100%
);
animation: skeletonWave 1.6s var(--ease-standard) infinite;
}
/* ─── TEXT EFFECTS ───────────────────────────────────────── */
/* Shimmer text — for hero numbers, highlight text */
.animate-text-shimmer {
background: linear-gradient(
90deg,
var(--text-primary) 0%,
var(--blue-40) 30%,
var(--brand-primary) 50%,
var(--blue-40) 70%,
var(--text-primary) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 3s var(--ease-linear) infinite;
}
/* Gradient flow text — for saffron CTA highlights */
.animate-gradient-text {
background: linear-gradient(
135deg,
var(--saffron-50) 0%,
var(--saffron-40) 50%,
var(--saffron-50) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 2s var(--ease-standard) infinite;
}
/* ─── BUTTON EFFECTS ─────────────────────────────────────── */
/* Gradient flow on saffron CTA (Stripe style) */
.btn-gradient-flow {
background: linear-gradient(
135deg,
var(--saffron-60) 0%,
var(--saffron-50) 30%,
var(--saffron-40) 60%,
var(--saffron-50) 100%
);
background-size: 250% 250%;
animation: gradientFlow 4s var(--ease-standard) infinite;
transition: box-shadow var(--duration-moderate-01) var(--ease-smooth);
}
.btn-gradient-flow:hover {
animation-duration: 1.5s;
box-shadow: 0 4px 20px rgba(234, 88, 12, 0.28);
}
/* Ripple container */
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple .ripple-effect {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
pointer-events: none;
animation: ripple var(--duration-slow-01) var(--ease-exit) forwards;
}
/* ─── CARD HOVER LIFT (Vercel / Linear style) ─────────────── */
.card-lift {
transition: var(--transition-card);
}
.card-lift:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
/* Blue card lift */
.card-lift-blue:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-blue);
}
/* Saffron card lift (CTA cards) */
.card-lift-saffron:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-saffron);
}
/* ─── NAVIGATION EFFECTS ─────────────────────────────────── */
/* Underline slide for nav links */
.nav-underline {
position: relative;
}
.nav-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: var(--interactive);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-moderate-01) var(--ease-spring-gentle);
}
.nav-underline:hover::after,
.nav-underline.active::after {
transform: scaleX(1);
}
/* Tab indicator slide */
.tab-indicator {
position: absolute;
bottom: 0;
height: 2px;
background: var(--interactive);
transition: left var(--duration-moderate-02) var(--ease-spring-gentle),
width var(--duration-moderate-02) var(--ease-spring-gentle);
}
/* ─── STAGGER HELPERS ────────────────────────────────────── */
/* Apply to parent, children stagger automatically */
.stagger-children > * { opacity: 0; animation-fill-mode: forwards; }
.stagger-children.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2) { animation-delay: 60ms; }
.stagger-children.is-visible > *:nth-child(3) { animation-delay: 120ms; }
.stagger-children.is-visible > *:nth-child(4) { animation-delay: 180ms; }
.stagger-children.is-visible > *:nth-child(5) { animation-delay: 240ms; }
.stagger-children.is-visible > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children.is-visible > *:nth-child(7) { animation-delay: 360ms; }
.stagger-children.is-visible > *:nth-child(8) { animation-delay: 420ms; }
.stagger-children.is-visible > *:nth-child(n+9){ animation-delay: 480ms; }
.stagger-children.is-visible > * {
animation: fadeInUp var(--duration-moderate-02) var(--ease-expressive) forwards;
}
/* ─── SCROLL REVEAL (IntersectionObserver triggered) ───────── */
/* Two equivalent APIs:
- .scroll-reveal → JS adds .is-visible (DS canonical)
- .reveal → JS adds .visible (page shorthand, same effect)
Both supported; site.js observes both. */
.scroll-reveal,
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--duration-slow-01) var(--ease-smooth),
transform var(--duration-slow-01) var(--ease-smooth);
}
.scroll-reveal.is-visible,
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* reveal-group: parent container — children with .reveal animate in
when the group scrolls into view (JS adds .visible to the group) */
.reveal-group.visible .reveal { opacity: 1; transform: translateY(0); }
/* Blur scroll reveal */
.scroll-reveal-blur {
opacity: 0;
filter: blur(4px);
transform: translateY(8px);
transition: opacity var(--duration-slow-01) var(--ease-smooth),
filter var(--duration-moderate-03) var(--ease-smooth),
transform var(--duration-slow-01) var(--ease-smooth);
}
.scroll-reveal-blur.is-visible {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* Scale scroll reveal */
.scroll-reveal-scale {
opacity: 0;
transform: scale(0.96);
transition: opacity var(--duration-moderate-03) var(--ease-smooth),
transform var(--duration-moderate-03) var(--ease-spring-gentle);
}
.scroll-reveal-scale.is-visible {
opacity: 1;
transform: scale(1);
}
/* ─── ACCORDION ANIMATION ────────────────────────────────── */
.accordion-content {
overflow: hidden;
max-height: 0;
transition: max-height var(--duration-moderate-02) var(--ease-standard),
opacity var(--duration-moderate-01) var(--ease-entrance);
opacity: 0;
}
.accordion-content.is-open {
opacity: 1;
/* max-height set via JS */
}
.accordion-content-inner {
animation: accordionOpen var(--duration-moderate-01) var(--ease-entrance);
}
/* ─── MODAL ANIMATIONS ───────────────────────────────────── */
.modal-backdrop-enter {
animation: modalBackdrop var(--duration-moderate-02) var(--ease-entrance) forwards;
}
.modal-panel-enter {
animation: springIn var(--duration-spring-sm) var(--ease-standard) forwards;
}
.modal-panel-exit {
animation: scaleIn var(--duration-fast-02) var(--ease-exit) reverse forwards;
}
/* ─── TOAST / NOTIFICATION ───────────────────────────────── */
.toast-enter {
animation: slideInRight var(--duration-moderate-02) var(--ease-spring-gentle);
}
.toast-exit {
animation: slideOutRight var(--duration-moderate-01) var(--ease-accelerate) forwards;
}
/* ─── FOCUS RING ANIMATION ───────────────────────────────── */
:focus-visible {
outline: 3px solid var(--interactive-focus);
outline-offset: 2px;
animation: focusRingExpand var(--duration-fast-02) var(--ease-standard) forwards;
}
/* ─── TIMING / DELAY UTILITIES ───────────────────────────── */
.delay-0 { animation-delay: 0ms; }
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }
.delay-8 { animation-delay: 400ms; }
.delay-10 { animation-delay: 500ms; }
.delay-12 { animation-delay: 600ms; }
.delay-16 { animation-delay: 800ms; }
/* Duration overrides */
.duration-fast { animation-duration: var(--duration-fast-02) !important; }
.duration-moderate { animation-duration: var(--duration-moderate-02) !important; }
.duration-slow { animation-duration: var(--duration-slow-01) !important; }
/* ─── EASING OVERRIDES ───────────────────────────────────── */
.ease-spring { animation-timing-function: var(--ease-spring) !important; }
.ease-smooth { animation-timing-function: var(--ease-smooth) !important; }
.ease-expressive { animation-timing-function: var(--ease-expressive) !important; }
/* ─── ITERATION ──────────────────────────────────────────── */
.loop { animation-iteration-count: infinite; }
.once { animation-iteration-count: 1; }
.twice { animation-iteration-count: 2; }
/* ─── MARQUEE ────────────────────────────────────────────── */
.marquee-track {
display: flex;
overflow: hidden;
width: 100%;
}
.marquee-content {
display: flex;
gap: var(--space-6);
flex-shrink: 0;
min-width: 100%;
animation: marquee var(--duration-slow-03) var(--ease-linear) infinite;
}
.marquee-content:hover { animation-play-state: paused; }
/* ── assets/design-system/components/button.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Button Component
Variants: primary(saffron CTA), secondary(blue), ghost,
brand(green), danger
Sizes: sm (32px), md (48px), lg (64px)
============================================================ */
/* Base button */
.mts-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
font-family: var(--font-ui);
font-size: var(--type-body-01);
font-weight: var(--weight-semibold);
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-sm);
padding: 0 var(--space-6);
height: var(--btn-height-md);
min-width: 80px;
transition: var(--transition-color), transform var(--duration-fast-01) var(--ease-standard), box-shadow var(--duration-fast-02) var(--ease-standard);
position: relative;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
}
/* Ripple effect on click */
.mts-btn::after {
content: '';
position: absolute;
inset: 0;
background: transparent;
transition: background var(--duration-fast-01) var(--ease-standard);
}
.mts-btn:active::after { background: var(--white-alpha-06); }
/* Focus */
.mts-btn:focus-visible {
outline: 3px solid var(--interactive-focus);
outline-offset: 2px;
}
/* Disabled */
.mts-btn:disabled,
.mts-btn[aria-disabled="true"] {
background-color: var(--btn-disabled-bg);
color: var(--btn-disabled-text);
border-color: transparent;
cursor: not-allowed;
pointer-events: none;
}
/* === PRIMARY (Saffron CTA — use sparingly!) === */
.mts-btn--primary {
background-color: var(--cta-primary);
color: var(--cta-text);
border-color: var(--cta-primary);
}
.mts-btn--primary:hover {
background-color: var(--cta-hover);
border-color: var(--cta-hover);
box-shadow: var(--shadow-saffron);
transform: translateY(-1px);
}
.mts-btn--primary:active {
background-color: var(--cta-active);
transform: translateY(0);
}
.mts-btn--primary:focus-visible {
outline-color: var(--saffron-50);
}
/* === SECONDARY (Blue interactive) === */
.mts-btn--secondary {
background-color: var(--interactive);
color: var(--white);
border-color: var(--interactive);
}
.mts-btn--secondary:hover {
background-color: var(--interactive-hover);
border-color: var(--interactive-hover);
box-shadow: var(--shadow-blue);
transform: translateY(-1px);
}
.mts-btn--secondary:active {
background-color: var(--interactive-active);
transform: translateY(0);
}
/* === GHOST (Blue outlined) === */
.mts-btn--ghost {
background-color: transparent;
color: var(--interactive);
border-color: var(--interactive);
}
.mts-btn--ghost:hover {
background-color: var(--btn-ghost-hover-bg);
transform: translateY(-1px);
}
.mts-btn--ghost:active {
background-color: var(--blue-alpha-20);
transform: translateY(0);
}
/* === BRAND (Green secondary action) === */
.mts-btn--brand {
background-color: var(--brand-subtle);
color: var(--brand-primary);
border-color: var(--brand-border);
}
.mts-btn--brand:hover {
background-color: var(--green-alpha-20);
border-color: var(--brand-primary);
box-shadow: var(--shadow-green);
transform: translateY(-1px);
}
.mts-btn--brand:active {
background-color: var(--green-alpha-30);
transform: translateY(0);
}
/* === DANGER === */
.mts-btn--danger {
background-color: var(--btn-danger-bg);
color: var(--white);
border-color: var(--btn-danger-bg);
}
.mts-btn--danger:hover {
background-color: var(--btn-danger-hover, #A2191F);
border-color: var(--btn-danger-hover, #A2191F);
transform: translateY(-1px);
}
/* === TERTIARY (no border, text only) === */
.mts-btn--tertiary {
background-color: transparent;
color: var(--text-secondary);
border-color: transparent;
padding: 0 var(--space-3);
}
.mts-btn--tertiary:hover {
color: var(--text-primary);
background-color: var(--layer-01);
}
/* === SIZES === */
.mts-btn--sm { height: var(--btn-height-sm); font-size: var(--type-label-02); padding: 0 var(--space-4); min-width: 60px; }
.mts-btn--lg { height: var(--btn-height-lg); font-size: var(--type-body-02); padding: var(--space-2) var(--space-8); }
.mts-btn--xl { height: var(--btn-height-xl); font-size: var(--type-heading-03); padding: var(--space-2) var(--space-10); }
/* Compact toolbar / nav CTA — ≥44px touch target without full md height */
.mts-btn--nav {
height: auto;
min-height: var(--size-touch-target);
padding: 10px var(--space-5);
font-size: 13px;
letter-spacing: 0.02em;
}
/* === ICON BUTTON === */
.mts-btn--icon {
padding: 0;
width: var(--btn-height-md);
min-width: unset;
border-radius: var(--radius-sm);
}
.mts-btn--icon.mts-btn--sm { width: var(--btn-height-sm); }
.mts-btn--icon.mts-btn--lg { width: var(--btn-height-lg); }
/* === FULL WIDTH === */
.mts-btn--full { width: 100%; }
/* === LOADING STATE === */
.mts-btn--loading {
pointer-events: none;
opacity: 0.8;
}
.mts-btn--loading .mts-btn__text { opacity: 0.6; }
.mts-btn__spinner {
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: var(--radius-full);
animation: spin 0.6s linear infinite;
}
/* Button group */
.mts-btn-group {
display: inline-flex;
gap: 0;
}
.mts-btn-group .mts-btn { border-radius: 0; border-right-width: 0; }
.mts-btn-group .mts-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.mts-btn-group .mts-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right-width: 2px; }
/* ── assets/design-system/components/nav.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Navigation (Header, Sidebar, Tabs) */
/* Top Navigation */
.mts-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--layer-bg);
border-bottom: 1px solid var(--border-subtle);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.mts-nav__inner {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--space-6);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.mts-nav__logo {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--text-primary);
text-decoration: none;
}
.mts-nav__logo-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--brand-primary);
animation: statusPulse 3s ease infinite;
}
/* Hidden on mobile by default (mobile-first) */
.mts-nav__links {
display: none;
align-items: center;
gap: var(--space-2);
list-style: none;
}
.mts-nav__link {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
font-size: var(--type-body-01);
font-weight: var(--weight-medium);
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--radius-sm);
transition: var(--transition-color);
cursor: pointer;
}
.mts-nav__link:hover { color: var(--text-primary); background: var(--layer-01); }
.mts-nav__link.active { color: var(--interactive); background: var(--blue-alpha-08); }
.mts-nav__actions { display: flex; align-items: center; gap: var(--space-3); }
/* ── Mobile hamburger toggle — visible by default (mobile-first) */
.mts-nav__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: var(--size-touch-target);
height: var(--size-touch-target);
min-width: var(--size-touch-target);
min-height: var(--size-touch-target);
padding: 10px;
background: none;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
}
.mts-nav__hamburger span {
display: block;
width: 100%;
height: 1.5px;
background: var(--text-primary);
border-radius: 1px;
transition: transform 200ms ease, opacity 150ms ease;
}
/* ── Mobile menu overlay ─────────────────────────────────────── */
.mts-mobile-nav {
display: none;
position: fixed;
inset: 0;
z-index: 200;
}
.mts-mobile-nav.open { display: block; }
.mts-mobile-nav__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
animation: mts-backdrop-in 200ms ease forwards;
}
@keyframes mts-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.mts-mobile-nav__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 85vw);
background: #fff;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
animation: mts-panel-in 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
overflow-y: auto;
}
@keyframes mts-panel-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.mts-mobile-nav__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--blue-20);
flex-shrink: 0;
}
.mts-mobile-nav__close {
width: var(--size-touch-target);
height: var(--size-touch-target);
min-width: var(--size-touch-target);
min-height: var(--size-touch-target);
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--blue-20);
border-radius: 4px;
cursor: pointer;
font-size: 16px;
color: var(--text-secondary);
transition: background 150ms;
}
.mts-mobile-nav__close:hover { background: var(--blue-10); }
.mts-mobile-nav__links {
flex: 1;
padding: var(--space-4) 0;
list-style: none;
}
.mts-mobile-nav__links a,
.mts-mobile-nav__links button {
display: block;
width: 100%;
padding: var(--space-3) var(--space-5);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
background: none;
border: none;
text-align: left;
cursor: pointer;
transition: background 150ms;
font-family: var(--font-body);
}
.mts-mobile-nav__links a:hover,
.mts-mobile-nav__links button:hover { background: var(--blue-10); }
.mts-mobile-nav__links a.active { color: var(--interactive); font-weight: 600; }
.mts-mobile-nav__group-label {
display: block;
padding: var(--space-5) var(--space-5) var(--space-2);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-secondary);
border-top: 1px solid var(--blue-20);
}
.mts-mobile-nav__group-label:first-child { border-top: none; }
.mts-mobile-nav__sub a {
padding-left: var(--space-8);
font-size: 13px;
color: var(--text-secondary);
}
.mts-mobile-nav__footer {
padding: var(--space-5);
border-top: 1px solid var(--blue-20);
flex-shrink: 0;
}
/* Hide CTA button + status indicator on mobile */
.mts-nav__actions .mts-btn { display: none; }
.mts-nav-status { display: none; }
/* Desktop (≥ 769px): show nav links, CTA, status; hide hamburger */
@media (min-width: 769px) {
.mts-nav__links { display: flex; }
.mts-nav__hamburger { display: none; }
.mts-nav__actions .mts-btn { display: inline-flex; }
.mts-nav-status { display: flex; }
}
/* Sidebar */
.mts-sidebar {
width: 240px;
background: var(--layer-01);
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
padding: var(--space-6) 0;
height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
}
.mts-sidebar__section { margin-bottom: var(--space-5); }
.mts-sidebar__label {
padding: 0 var(--space-5);
font-size: var(--type-label-01);
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.mts-sidebar__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
font-size: var(--type-body-01);
color: var(--text-secondary);
text-decoration: none;
transition: var(--transition-color);
border-left: 3px solid transparent;
}
.mts-sidebar__link:hover { color: var(--text-primary); background: var(--layer-02); border-left-color: var(--border-subtle); }
.mts-sidebar__link.active { color: var(--interactive); background: var(--blue-alpha-08); border-left-color: var(--interactive); font-weight: var(--weight-semibold); }
/* ── assets/design-system/components/card.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Card */
.mts-card {
background: var(--layer-01);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--duration-fast-02) var(--ease-standard),
box-shadow var(--duration-fast-02) var(--ease-standard),
transform var(--duration-fast-02) var(--ease-standard);
}
.mts-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
.mts-card--interactive { cursor: pointer; }
.mts-card--interactive:hover {
border-color: var(--interactive);
box-shadow: var(--shadow-blue);
transform: translateY(-2px);
}
.mts-card--interactive:active { transform: translateY(0); }
/* Brand accented card */
.mts-card--brand {
border-left: 4px solid var(--brand-primary);
}
.mts-card--brand:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-green); }
/* Blue accented */
.mts-card--blue { border-left: 4px solid var(--interactive); }
/* Saffron CTA card */
.mts-card--cta {
border: 1px solid var(--saffron-alpha-30);
background: var(--saffron-alpha-05);
}
.mts-card--cta:hover { border-color: var(--cta-primary); box-shadow: var(--shadow-saffron); }
/* Elevated card */
.mts-card--elevated { box-shadow: var(--shadow-lg); border-color: transparent; }
.mts-card__header { padding: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.mts-card__body { padding: var(--space-6); }
.mts-card__footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--layer-02); }
.mts-card__media { width: 100%; height: 200px; object-fit: cover; }
/* Stat card */
.mts-stat-card {
background: var(--layer-01);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.mts-stat-card__value {
font-family: var(--font-display);
font-size: var(--type-display-01);
font-weight: var(--weight-bold);
line-height: 1;
color: var(--text-primary);
}
.mts-stat-card__value--blue { color: var(--blue-40); }
.mts-stat-card__value--green { color: var(--green-40); }
.mts-stat-card__value--saffron { color: var(--saffron-50); }
.mts-stat-card__label { font-size: var(--type-label-01); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-secondary); margin-top: var(--space-2); }
.mts-stat-card__sublabel { font-size: var(--type-label-02); color: var(--text-secondary); margin-top: var(--space-2); }
/* ── assets/design-system/components/tag.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Tags, Chips, Badges */
.mts-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3);
height: 24px;
border-radius: var(--radius-full);
font-family: var(--font-ui);
font-size: var(--type-label-01);
font-weight: var(--weight-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
border: 1px solid transparent;
}
/* Color variants */
.mts-tag--blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); border-color: var(--blue-alpha-20); }
.mts-tag--green { background: var(--tag-green-bg); color: var(--tag-green-text); border-color: var(--green-alpha-20); }
.mts-tag--saffron { background: var(--tag-saffron-bg); color: var(--tag-saffron-text); border-color: var(--saffron-alpha-20); }
.mts-tag--red { background: var(--tag-red-bg); color: var(--tag-red-text); border-color: var(--red-alpha-20); }
.mts-tag--gray { background: var(--tag-gray-bg); color: var(--tag-gray-text); }
.mts-tag--cyan { background: var(--tag-cyan-bg); color: var(--tag-cyan-text); border-color: var(--cyan-alpha-20); }
.mts-tag--outline { background: transparent; color: var(--text-secondary); border-color: var(--border-subtle); }
/* Hero dark variant — used on dark hero backgrounds across all pages */
.mts-tag--hero-dark {
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.92);
border-color: rgba(255,255,255,0.22);
font-family: var(--font-ui);
font-size: 11px;
height: 26px;
padding: 0 var(--space-3);
}
/* Per-domain tint modifiers (stack with --hero-dark) */
.mts-tag--hero-dark.mts-tag--tint-saffron { background: rgba(255,153,51,0.18); border-color: rgba(255,153,51,0.35); }
.mts-tag--hero-dark.mts-tag--tint-green { background: rgba(83,170,0,0.18); border-color: rgba(83,170,0,0.35); }
.mts-tag--hero-dark.mts-tag--tint-indigo { background: rgba(101,84,192,0.25); border-color: rgba(101,84,192,0.40); }
.mts-tag--hero-dark.mts-tag--tint-teal { background: rgba(13,148,136,0.22); border-color: rgba(13,148,136,0.42); }
/* Sizes */
.mts-tag--sm { height: 20px; font-size: 10px; padding: 0 var(--space-2); }
.mts-tag--lg { height: 32px; font-size: var(--type-label-02); padding: 0 var(--space-4); }
/* Interactive tag (chip) */
.mts-chip {
cursor: pointer;
transition: var(--transition-color), transform var(--duration-fast-01) var(--ease-standard);
min-height: var(--size-touch-target);
height: 36px;
padding: 0 var(--space-4);
border-radius: var(--radius-full);
font-size: var(--type-label-02);
border: 1px solid var(--border-subtle);
background: var(--layer-01);
color: var(--text-secondary);
}
.mts-chip:hover { border-color: var(--interactive); color: var(--text-primary); }
.mts-chip.active { background: var(--blue-alpha-15); border-color: var(--interactive); color: var(--blue-30); }
/* Dot indicator in tag */
.mts-tag__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: currentColor;
opacity: 0.8;
}
/* Badge (numeric) */
.mts-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-2);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: var(--weight-bold);
line-height: 1;
}
.mts-badge--blue { background: var(--interactive); color: var(--white); }
.mts-badge--green { background: var(--brand-primary); color: var(--white); }
.mts-badge--saffron { background: var(--cta-primary); color: var(--cta-text); }
.mts-badge--red { background: var(--red-60); color: var(--white); }
.mts-badge--gray { background: var(--gray-60); color: var(--white); }
/* ── assets/design-system/components/layout.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Layout Primitives
Provides: Stack, Inline, Box, Cluster, Grid, Switcher
Pattern: Every Layout (every-layout.dev) + Radix Themes
============================================================ */
/* ══════════════════════════════════════════════════════════════
BOX
A generic layout box with padding and optional border/bg.
Replaces ad-hoc padding wrappers throughout pages.
════════════════════════════════════════════════════════════════ */
.mts-box {
padding: var(--space-5);
}
.mts-box--sm { padding: var(--space-3); }
.mts-box--md { padding: var(--space-6); }
.mts-box--lg { padding: var(--space-8); }
.mts-box--xl { padding: var(--space-10); }
.mts-box--bordered { border: 1px solid var(--border-subtle); }
.mts-box--filled { background: var(--layer-01); }
.mts-box--elevated { background: #fff; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.07); }
.mts-box--dark { background: var(--navy-100); }
/* ══════════════════════════════════════════════════════════════
STACK
Vertical block flow with consistent gap between children.
No margin collapsing surprises.
════════════════════════════════════════════════════════════════ */
.mts-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.mts-stack > * + * { margin-top: var(--space-5); }
/* Gap modifiers — override child margin-top */
.mts-stack--gap-1 > * + * { margin-top: var(--space-1); }
.mts-stack--gap-2 > * + * { margin-top: var(--space-2); }
.mts-stack--gap-3 > * + * { margin-top: var(--space-3); }
.mts-stack--gap-4 > * + * { margin-top: var(--space-4); }
.mts-stack--gap-5 > * + * { margin-top: var(--space-5); }
.mts-stack--gap-6 > * + * { margin-top: var(--space-6); }
.mts-stack--gap-7 > * + * { margin-top: var(--space-7); }
.mts-stack--gap-8 > * + * { margin-top: var(--space-8); }
/* ══════════════════════════════════════════════════════════════
INLINE
Horizontal flow, wraps to new lines, consistent gap.
Replaces flex-wrap containers with inconsistent margins.
════════════════════════════════════════════════════════════════ */
.mts-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}
.mts-inline--gap-2 { gap: var(--space-2); }
.mts-inline--gap-3 { gap: var(--space-3); }
.mts-inline--gap-5 { gap: var(--space-5); }
.mts-inline--gap-6 { gap: var(--space-6); }
.mts-inline--gap-8 { gap: var(--space-8); }
.mts-inline--start { align-items: flex-start; }
.mts-inline--end { align-items: flex-end; }
.mts-inline--stretch { align-items: stretch; }
/* ══════════════════════════════════════════════════════════════
CLUSTER
Like Inline, but justify-content: flex-start by default —
used for tag groups, button clusters, metadata rows.
════════════════════════════════════════════════════════════════ */
.mts-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: flex-start;
align-items: center;
}
.mts-cluster--center { justify-content: center; }
.mts-cluster--end { justify-content: flex-end; }
.mts-cluster--between { justify-content: space-between; }
/* ══════════════════════════════════════════════════════════════
FLEX
Low-level flex utility with explicit direction + alignment.
Use Inline/Cluster for most cases; Flex for custom needs.
════════════════════════════════════════════════════════════════ */
.mts-flex { display: flex; }
.mts-flex--col { flex-direction: column; }
.mts-flex--center { align-items: center; justify-content: center; }
.mts-flex--between { align-items: center; justify-content: space-between; }
.mts-flex--start { align-items: flex-start; }
.mts-flex--gap-3 { gap: var(--space-3); }
.mts-flex--gap-4 { gap: var(--space-4); }
.mts-flex--gap-5 { gap: var(--space-5); }
.mts-flex--gap-6 { gap: var(--space-6); }
.mts-flex--gap-8 { gap: var(--space-8); }
.mts-flex--wrap { flex-wrap: wrap; }
/* ══════════════════════════════════════════════════════════════
GRID (named)
Semantic grid layouts used for common page patterns.
════════════════════════════════════════════════════════════════ */
/* 2-col equal */
.mts-grid--2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
/* 3-col equal */
.mts-grid--3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
/* 4-col equal */
.mts-grid--4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
/* Auto-fill responsive: min 280px per column */
.mts-grid--auto-sm {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-5);
}
/* Auto-fill: min 360px — for larger cards */
.mts-grid--auto-md {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: var(--space-6);
}
/* Sidebar + main: 300px | 1fr */
.mts-grid--sidebar {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--space-8);
}
/* Main + aside: 1fr | 320px */
.mts-grid--aside {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--space-8);
}
/* 2 col: 40% | 60% */
.mts-grid--split-4060 {
display: grid;
grid-template-columns: 2fr 3fr;
gap: var(--space-8);
}
/* Gap modifiers */
.mts-grid--gap-4 { gap: var(--space-4); }
.mts-grid--gap-5 { gap: var(--space-5); }
.mts-grid--gap-7 { gap: var(--space-7); }
.mts-grid--gap-8 { gap: var(--space-8); }
.mts-grid--gap-10 { gap: var(--space-10); }
/* ══════════════════════════════════════════════════════════════
SWITCHER
Side-by-side until breakpoint, then stacks vertically.
The "magic breakpoint" is set via --mts-switcher-threshold.
════════════════════════════════════════════════════════════════ */
.mts-switcher {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
--mts-switcher-threshold: 640px;
}
.mts-switcher > * {
flex-basis: calc((var(--mts-switcher-threshold) - 100%) * 999);
flex-grow: 1;
}
/* ══════════════════════════════════════════════════════════════
REEL (horizontal scroll container)
For logo clouds, card carousels, horizontal lists.
════════════════════════════════════════════════════════════════ */
.mts-reel {
display: flex;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: var(--space-5);
padding-bottom: var(--space-3);
scrollbar-width: none; /* Firefox */
}
.mts-reel::-webkit-scrollbar { display: none; }
.mts-reel > * {
flex-shrink: 0;
scroll-snap-align: start;
}
/* ══════════════════════════════════════════════════════════════
CENTER
Centres max-width block content on the page.
════════════════════════════════════════════════════════════════ */
.mts-center {
box-sizing: content-box;
max-width: var(--container-xl);
margin-inline: auto;
padding-inline: var(--space-5);
}
.mts-center--sm { max-width: var(--container-sm); }
.mts-center--md { max-width: var(--container-md); }
.mts-center--lg { max-width: var(--container-lg); }
.mts-center--2xl { max-width: var(--container-2xl); }
/* ══════════════════════════════════════════════════════════════
COVER
Vertically centres a child element within a min-height block.
Used for hero sections and fullscreen panels.
════════════════════════════════════════════════════════════════ */
.mts-cover {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: var(--space-5);
}
.mts-cover > * { margin-top: auto; margin-bottom: auto; }
/* ══════════════════════════════════════════════════════════════
SIDEBAR LAYOUT
Two-column where sidebar has a fixed min-width;
main content takes remaining space.
════════════════════════════════════════════════════════════════ */
.mts-sidebar-layout {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.mts-sidebar-layout__sidebar {
flex-basis: 260px;
flex-grow: 1;
}
.mts-sidebar-layout__main {
flex-basis: 0;
flex-grow: 999;
min-width: 50%;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE BREAKDOWNS
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.mts-grid--4 { grid-template-columns: repeat(2, 1fr); }
.mts-grid--sidebar { grid-template-columns: 1fr; }
.mts-grid--aside { grid-template-columns: 1fr; }
.mts-grid--split-4060 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.mts-grid--2 { grid-template-columns: 1fr; }
.mts-grid--3 { grid-template-columns: 1fr; }
.mts-grid--4 { grid-template-columns: 1fr; }
}
/* ── assets/design-system/components/segmented-control.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Segmented Control & Button Group
Provides: segmented control (radio-button style selector),
button group (joined action buttons)
Reference: IBM Carbon ToggleGroup, Material SegmentedButton
============================================================ */
/* ══════════════════════════════════════════════════════════════
SEGMENTED CONTROL
Mutually-exclusive option selector; horizontal pill container.
Usage:
════════════════════════════════════════════════════════════════ */
.mts-segmented {
display: inline-flex;
background: var(--layer-01);
border: 1px solid var(--border-subtle);
padding: 3px;
gap: 2px;
}
.mts-segmented__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-5);
height: 36px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: color 150ms, background 150ms;
white-space: nowrap;
position: relative;
}
.mts-segmented__item:hover:not(.active) {
color: var(--text-primary);
background: var(--layer-02);
}
.mts-segmented__item.active {
background: var(--interactive);
color: #fff;
}
/* Size variants */
.mts-segmented--sm .mts-segmented__item {
height: 28px;
font-size: 10px;
padding: 0 var(--space-4);
}
.mts-segmented--lg .mts-segmented__item {
height: 44px;
font-size: 12px;
padding: 0 var(--space-6);
}
/* Icon-only segmented control */
.mts-segmented__item--icon-only {
width: 36px;
padding: 0;
justify-content: center;
}
.mts-segmented--sm .mts-segmented__item--icon-only { width: 28px; }
.mts-segmented--lg .mts-segmented__item--icon-only { width: 44px; }
/* Colour variants */
.mts-segmented--green .mts-segmented__item.active {
background: var(--brand-primary);
}
.mts-segmented--saffron .mts-segmented__item.active {
background: var(--cta-primary);
color: #000;
}
/* ══════════════════════════════════════════════════════════════
BUTTON GROUP
Joined set of action buttons (not mutually exclusive).
Usage:
════════════════════════════════════════════════════════════════ */
.mts-btn-group {
display: inline-flex;
}
.mts-btn-group > .mts-btn {
border-radius: 0;
border-right-width: 0;
}
.mts-btn-group > .mts-btn:first-child {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.mts-btn-group > .mts-btn:last-child {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
border-right-width: 1px;
}
.mts-btn-group > .mts-btn:not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.15);
}
/* ══════════════════════════════════════════════════════════════
TAB BAR (pill-style, used inline within sections)
Distinct from the full .mts-tabs component.
════════════════════════════════════════════════════════════════ */
.mts-tab-bar {
display: flex;
gap: var(--space-2);
padding: var(--space-2);
background: var(--layer-01);
border: 1px solid var(--border-subtle);
width: fit-content;
}
.mts-tab-bar__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--size-touch-target);
padding: var(--space-2) var(--space-5);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
transition: color var(--duration-moderate-01) var(--ease-standard),
background var(--duration-moderate-01) var(--ease-standard);
}
.mts-tab-bar__item:hover { color: var(--text-primary); background: var(--layer-02); }
.mts-tab-bar__item.active { background: var(--interactive); color: #fff; }
.mts-tab-bar__item--green.active { background: var(--brand-primary); }
.mts-tab-bar__item--saffron.active { background: var(--cta-primary); color: #000; }
/* ══════════════════════════════════════════════════════════════
FILTER CHIPS ROW
Horizontal row of toggleable filter chips.
Usage:
════════════════════════════════════════════════════════════════ */
.mts-filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.mts-filter-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 5px var(--space-4);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
background: transparent;
border: 1px solid var(--border-subtle);
cursor: pointer;
transition: color 150ms, background 150ms, border-color 150ms;
white-space: nowrap;
}
.mts-filter-chip:hover {
color: var(--text-primary);
border-color: var(--border-strong);
}
.mts-filter-chip.active {
background: var(--interactive);
border-color: var(--interactive);
color: #fff;
}
.mts-filter-chip.active--green {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: #fff;
}
/* Remove button within chip */
.mts-filter-chip__remove {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
font-size: 10px;
}
.mts-filter-chip__remove:hover { opacity: 1; }
/* ── assets/design-system/components/side-nav.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Side Navigation
Provides: vertical sidebar nav (fixed/sticky), nav rail,
collapsible tree nav, sub-navigation
Reference: IBM Carbon Side Navigation, Atlassian Nav
============================================================ */
/* ══════════════════════════════════════════════════════════════
SIDE NAV SHELL
The outer container — should be positioned sticky/fixed
by the page layout that uses it.
════════════════════════════════════════════════════════════════ */
.mts-side-nav {
width: 256px;
display: flex;
flex-direction: column;
background: #fff;
border-right: 1px solid var(--border-subtle);
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-6) 0;
flex-shrink: 0;
}
/* Dark variant (for app shell with dark sidebar) */
.mts-side-nav--dark {
background: #161616;
border-right-color: rgba(255, 255, 255, 0.08);
}
/* Collapsed state — icon-only rail */
.mts-side-nav--collapsed {
width: 48px;
}
.mts-side-nav--collapsed .mts-side-nav__label,
.mts-side-nav--collapsed .mts-side-nav__category,
.mts-side-nav--collapsed .mts-side-nav__chevron { display: none; }
/* ── Header / brand ──────────────────────────────────────── */
.mts-side-nav__header {
padding: 0 var(--space-5) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
margin-bottom: var(--space-5);
}
.mts-side-nav--dark .mts-side-nav__header {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* ── Category headings ───────────────────────────────────── */
.mts-side-nav__category {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
padding: var(--space-4) var(--space-5) var(--space-2);
display: block;
}
.mts-side-nav--dark .mts-side-nav__category { color: #525252; }
/* ── Nav items ───────────────────────────────────────────── */
.mts-side-nav__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px var(--space-5);
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
transition: color 150ms, background 150ms;
position: relative;
white-space: nowrap;
overflow: hidden;
}
.mts-side-nav__item:hover {
background: var(--layer-01);
color: var(--text-primary);
}
.mts-side-nav__item.active {
background: var(--blue-alpha-12);
color: var(--interactive);
font-weight: 600;
}
.mts-side-nav__item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--interactive);
}
/* Dark variant item states */
.mts-side-nav--dark .mts-side-nav__item { color: #8D8D8D; }
.mts-side-nav--dark .mts-side-nav__item:hover { background: rgba(255,255,255,0.05); color: #F4F4F4; }
.mts-side-nav--dark .mts-side-nav__item.active { background: rgba(37, 99, 235, 0.18); color: #93c5fd; }
/* ── Item icon ───────────────────────────────────────────── */
.mts-side-nav__icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
opacity: 0.7;
}
.mts-side-nav__item.active .mts-side-nav__icon,
.mts-side-nav__item:hover .mts-side-nav__icon { opacity: 1; }
/* ── Item badge/count ────────────────────────────────────── */
.mts-side-nav__badge {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
background: var(--interactive);
color: #fff;
border-radius: 10px;
flex-shrink: 0;
}
.mts-side-nav__badge--warning { background: var(--cta-primary); color: #000; }
.mts-side-nav__badge--error { background: var(--red-50); }
/* ── Chevron for expandable items ────────────────────────── */
.mts-side-nav__chevron {
margin-left: auto;
width: 16px;
height: 16px;
transition: transform 200ms;
flex-shrink: 0;
opacity: 0.5;
}
.mts-side-nav__item[aria-expanded="true"] .mts-side-nav__chevron {
transform: rotate(180deg);
}
/* ── Sub-menu ────────────────────────────────────────────── */
.mts-side-nav__sub {
overflow: hidden;
max-height: 0;
transition: max-height 200ms ease;
}
.mts-side-nav__sub.open {
max-height: 400px;
}
.mts-side-nav__sub-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 8px var(--space-5) 8px calc(var(--space-5) + 20px + var(--space-3));
font-size: 13px;
color: var(--text-secondary);
text-decoration: none;
transition: color 150ms, background 150ms;
position: relative;
}
.mts-side-nav__sub-item:hover { background: var(--layer-01); color: var(--text-primary); }
.mts-side-nav__sub-item.active { color: var(--interactive); font-weight: 600; }
.mts-side-nav__sub-item.active::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--interactive);
}
/* ── Divider ─────────────────────────────────────────────── */
.mts-side-nav__divider {
height: 1px;
background: var(--border-subtle);
margin: var(--space-4) var(--space-5);
}
.mts-side-nav--dark .mts-side-nav__divider { background: rgba(255,255,255,0.08); }
/* ── Footer area ─────────────────────────────────────────── */
.mts-side-nav__footer {
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px solid var(--border-subtle);
}
.mts-side-nav--dark .mts-side-nav__footer { border-top-color: rgba(255,255,255,0.08); }
/* ══════════════════════════════════════════════════════════════
NAVIGATION RAIL
Compact icon-only sidebar (48px wide) for app layouts.
Labels appear as tooltips on hover.
════════════════════════════════════════════════════════════════ */
.mts-nav-rail {
width: 48px;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-right: 1px solid var(--border-subtle);
padding: var(--space-4) 0;
gap: var(--space-1);
flex-shrink: 0;
}
.mts-nav-rail--dark {
background: #161616;
border-right-color: rgba(255,255,255,0.08);
}
.mts-nav-rail__item {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
border: none;
background: none;
cursor: pointer;
transition: color 150ms, background 150ms;
}
.mts-nav-rail__item:hover { background: var(--layer-01); color: var(--text-primary); }
.mts-nav-rail__item.active {
background: var(--blue-alpha-12);
color: var(--interactive);
}
.mts-nav-rail__item.active::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--interactive);
}
.mts-nav-rail--dark .mts-nav-rail__item { color: #8D8D8D; }
.mts-nav-rail--dark .mts-nav-rail__item:hover { background: rgba(255,255,255,0.06); color: #F4F4F4; }
.mts-nav-rail--dark .mts-nav-rail__item.active { background: rgba(37, 99, 235, 0.18); color: #93c5fd; }
/* Tooltip on hover */
.mts-nav-rail__item::before {
content: attr(data-label);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
background: #161616;
color: #F4F4F4;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
padding: 4px 8px;
pointer-events: none;
opacity: 0;
transition: opacity 150ms;
z-index: 100;
}
.mts-nav-rail__item:hover::before { opacity: 1; }
/* ══════════════════════════════════════════════════════════════
PAGE LAYOUT WITH SIDE NAV
Convenience wrapper for app-shell layouts.
════════════════════════════════════════════════════════════════ */
.mts-app-shell {
display: flex;
min-height: 100vh;
}
.mts-app-shell__sidebar {
position: sticky;
top: 0;
height: 100vh;
flex-shrink: 0;
}
.mts-app-shell__main {
flex: 1;
min-width: 0;
overflow: auto;
}
@media (max-width: 1024px) {
.mts-side-nav { width: 220px; }
}
@media (max-width: 768px) {
.mts-app-shell { flex-direction: column; }
.mts-app-shell__sidebar {
position: fixed;
left: -260px;
top: 0; bottom: 0;
z-index: 200;
transition: left 250ms ease;
box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}
.mts-app-shell__sidebar.open { left: 0; }
}
/* ── assets/design-system/components/stepper.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Stepper / Progress Tracker
Provides: horizontal stepper, vertical stepper,
numbered process list, mini stepper
Reference: IBM Carbon ProgressIndicator, Atlassian Wizard
============================================================ */
/* ══════════════════════════════════════════════════════════════
HORIZONTAL STEPPER
Used in multi-step forms, onboarding flows, checkout.
════════════════════════════════════════════════════════════════ */
.mts-stepper {
display: flex;
align-items: flex-start;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mts-stepper__step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-width: 80px;
position: relative;
}
/* Connector line between steps */
.mts-stepper__step::before {
content: '';
position: absolute;
top: 14px;
left: calc(-50% + 14px);
right: calc(50% + 14px);
height: 2px;
background: var(--border-subtle);
z-index: 0;
}
.mts-stepper__step:first-child::before { display: none; }
.mts-stepper__step.complete::before,
.mts-stepper__step.active::before { background: var(--interactive); }
/* Step indicator (circle) */
.mts-stepper__indicator {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--border-subtle);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
position: relative;
z-index: 1;
transition: background 200ms, border-color 200ms, color 200ms;
flex-shrink: 0;
}
.mts-stepper__step.active .mts-stepper__indicator {
background: var(--interactive);
border-color: var(--interactive);
color: #fff;
}
.mts-stepper__step.complete .mts-stepper__indicator {
background: var(--interactive);
border-color: var(--interactive);
color: #fff;
}
/* Checkmark for completed steps — via data-icon attribute or CSS */
.mts-stepper__step.complete .mts-stepper__indicator::after {
content: '✓';
font-size: 12px;
}
.mts-stepper__step.complete .mts-stepper__indicator .mts-stepper__num { display: none; }
.mts-stepper__step.error .mts-stepper__indicator {
background: var(--red-50);
border-color: var(--red-50);
color: #fff;
}
/* Step label */
.mts-stepper__label {
margin-top: var(--space-3);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
text-align: center;
white-space: nowrap;
}
.mts-stepper__step.active .mts-stepper__label { color: var(--interactive); }
.mts-stepper__step.complete .mts-stepper__label { color: var(--text-secondary); }
.mts-stepper__step.error .mts-stepper__label { color: var(--red-50); }
/* Optional sub-label */
.mts-stepper__sublabel {
font-size: 11px;
color: var(--text-secondary);
text-align: center;
margin-top: 2px;
font-family: inherit;
}
/* ── Compact / inline stepper (used in forms) ────────────── */
.mts-stepper--sm .mts-stepper__indicator { width: 22px; height: 22px; font-size: 10px; }
.mts-stepper--sm .mts-stepper__step::before { top: 11px; }
.mts-stepper--sm .mts-stepper__label { font-size: 9px; }
/* ══════════════════════════════════════════════════════════════
VERTICAL STEPPER
Used in process documentation, roadmaps, timelines.
════════════════════════════════════════════════════════════════ */
.mts-stepper--vertical {
flex-direction: column;
gap: 0;
align-items: flex-start;
}
.mts-stepper--vertical .mts-stepper__step {
flex-direction: row;
align-items: flex-start;
gap: var(--space-5);
flex: none;
width: 100%;
padding-bottom: var(--space-7);
}
/* Connector line — vertical */
.mts-stepper--vertical .mts-stepper__step::before {
top: 28px;
left: 13px;
right: auto;
bottom: 0;
width: 2px;
height: auto;
}
.mts-stepper--vertical .mts-stepper__step:last-child::before { display: none; }
.mts-stepper--vertical .mts-stepper__label {
text-align: left;
margin-top: 4px;
}
.mts-stepper--vertical .mts-stepper__content {
flex: 1;
min-width: 0;
}
.mts-stepper--vertical .mts-stepper__content h3 {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.mts-stepper--vertical .mts-stepper__content p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════
NUMBERED PROCESS LIST
Decorative ordered list; larger step numbers as headings.
Used in "How It Works" sections.
════════════════════════════════════════════════════════════════ */
.mts-process-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: process-step;
}
.mts-process-list__item {
display: flex;
gap: var(--space-6);
padding: var(--space-7) 0;
border-bottom: 1px solid var(--border-subtle);
counter-increment: process-step;
}
.mts-process-list__item:last-child { border-bottom: none; }
.mts-process-list__num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--interactive);
letter-spacing: 0.08em;
flex-shrink: 0;
min-width: 32px;
}
.mts-process-list__body h3 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.mts-process-list__body p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════
TIMELINE
Vertical event sequence with date stamps on the left.
════════════════════════════════════════════════════════════════ */
.mts-timeline {
position: relative;
padding-left: var(--space-8);
}
/* Vertical spine */
.mts-timeline::before {
content: '';
position: absolute;
left: 16px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-subtle);
}
.mts-timeline__event {
position: relative;
padding-bottom: var(--space-8);
}
/* Dot on spine */
.mts-timeline__dot {
position: absolute;
left: calc(-1 * var(--space-8) + 8px);
top: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--border-subtle);
z-index: 1;
}
.mts-timeline__event--active .mts-timeline__dot { border-color: var(--interactive); background: var(--interactive); }
.mts-timeline__event--success .mts-timeline__dot { border-color: var(--brand-primary); background: var(--brand-primary); }
.mts-timeline__event--warning .mts-timeline__dot { border-color: var(--cta-primary); background: var(--cta-primary); }
.mts-timeline__event--error .mts-timeline__dot { border-color: var(--red-50); background: var(--red-50); }
.mts-timeline__date {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.mts-timeline__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.mts-timeline__body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ── assets/design-system/components/marketing.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Marketing / Landing Page Components
Provides: announcement bar, logo cloud, pricing table,
testimonials, comparison table, video section,
blog card, team card, newsletter signup, feature row
============================================================ */
/* ══════════════════════════════════════════════════════════════
ANNOUNCEMENT BAR
Full-width sticky strip at top of page for CTAs/notices.
════════════════════════════════════════════════════════════════ */
.mts-announce-bar {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: 10px var(--space-5);
background: var(--interactive);
color: #fff;
font-size: 13px;
font-weight: 500;
text-align: center;
flex-wrap: wrap;
position: relative;
z-index: 200;
}
.mts-announce-bar--green { background: var(--brand-primary); }
.mts-announce-bar--saffron { background: var(--cta-primary); color: #000; }
.mts-announce-bar--dark { background: #161616; }
.mts-announce-bar a {
color: inherit;
text-decoration: underline;
font-weight: 700;
}
.mts-announce-bar__badge {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 2px 8px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
white-space: nowrap;
}
.mts-announce-bar--saffron .mts-announce-bar__badge { background: rgba(0,0,0,0.15); }
.mts-announce-bar__close {
position: absolute;
right: var(--space-5);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: inherit;
opacity: 0.7;
cursor: pointer;
font-size: 16px;
line-height: 1;
min-width: var(--size-touch-target);
min-height: var(--size-touch-target);
padding: var(--space-2);
display: inline-flex;
align-items: center;
justify-content: center;
}
.mts-announce-bar__close:hover { opacity: 1; }
/* ══════════════════════════════════════════════════════════════
LOGO CLOUD
Responsive grid of partner/client logos.
════════════════════════════════════════════════════════════════ */
.mts-logo-cloud {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-8);
}
.mts-logo-cloud__item {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.45;
filter: grayscale(1);
transition: opacity 200ms, filter 200ms;
}
.mts-logo-cloud__item:hover { opacity: 0.75; filter: grayscale(0); }
.mts-logo-cloud__item img {
max-height: 32px;
max-width: 120px;
object-fit: contain;
}
/* Scrolling marquee variant */
.mts-logo-cloud--marquee {
overflow: hidden;
flex-wrap: nowrap;
justify-content: flex-start;
mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
}
.mts-logo-cloud--marquee .mts-logo-cloud__track {
display: flex;
gap: var(--space-10);
animation: marquee 30s linear infinite;
flex-shrink: 0;
min-width: 100%;
}
.mts-logo-cloud--marquee:hover .mts-logo-cloud__track {
animation-play-state: paused;
}
/* ══════════════════════════════════════════════════════════════
PRICING TABLE
Card-per-tier layout with feature list + CTA.
════════════════════════════════════════════════════════════════ */
.mts-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
align-items: start;
}
.mts-pricing-card {
background: #fff;
border: 1px solid var(--blue-20);
padding: var(--space-8);
display: flex;
flex-direction: column;
position: relative;
}
.mts-pricing-card:hover {
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.10);
}
/* Featured tier */
.mts-pricing-card--featured {
border-color: var(--interactive);
border-width: 2px;
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.12);
}
.mts-pricing-card__badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: var(--interactive);
color: #fff;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 12px;
}
.mts-pricing-card__tier {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.mts-pricing-card__price {
font-family: var(--font-display);
font-size: 40px;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
margin-bottom: var(--space-2);
letter-spacing: -0.02em;
}
.mts-pricing-card__price sup {
font-size: 20px;
vertical-align: super;
font-weight: 600;
}
.mts-pricing-card__price sub {
font-size: 14px;
vertical-align: baseline;
font-weight: 400;
color: var(--text-secondary);
}
.mts-pricing-card__tagline {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: var(--space-7);
line-height: 1.5;
}
.mts-pricing-card__features {
list-style: none;
padding: 0; margin: 0;
margin-bottom: var(--space-8);
flex: 1;
}
.mts-pricing-card__features li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) 0;
font-size: 13px;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.mts-pricing-card__features li:last-child { border-bottom: none; }
.mts-pricing-card__features li::before {
content: '✓';
color: var(--brand-primary);
font-weight: 700;
flex-shrink: 0;
}
.mts-pricing-card__features li.unavailable { opacity: 0.4; }
.mts-pricing-card__features li.unavailable::before { content: '–'; color: var(--text-secondary); }
/* ══════════════════════════════════════════════════════════════
COMPARISON TABLE
Feature matrix: rows = features, cols = tiers/products.
════════════════════════════════════════════════════════════════ */
.mts-compare-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border-subtle);
}
.mts-compare-table th {
padding: var(--space-5) var(--space-6);
background: var(--layer-01);
border-bottom: 2px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
text-align: center;
}
.mts-compare-table th:first-child { text-align: left; }
.mts-compare-table td {
padding: var(--space-4) var(--space-6);
font-size: 13px;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-subtle);
text-align: center;
vertical-align: middle;
}
.mts-compare-table td:first-child {
text-align: left;
color: var(--text-primary);
font-weight: 500;
}
.mts-compare-table tr:hover td { background: var(--layer-01); }
.mts-compare-table .mts-compare-table--featured { background: var(--blue-alpha-12); }
.mts-compare-check { color: var(--brand-primary); font-weight: 700; }
.mts-compare-x { color: var(--red-50); opacity: 0.5; }
/* Category row (group header) */
.mts-compare-table__category td {
background: var(--layer-01);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--interactive);
padding: var(--space-3) var(--space-6);
text-align: left;
border-bottom: 1px solid var(--border-subtle);
}
/* ══════════════════════════════════════════════════════════════
TESTIMONIALS
Quote cards for social proof sections.
════════════════════════════════════════════════════════════════ */
.mts-testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
}
.mts-testimonial {
background: #fff;
border: 1px solid var(--blue-20);
padding: var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-5);
position: relative;
}
.mts-testimonial::before {
content: '\201C';
position: absolute;
top: var(--space-4);
left: var(--space-6);
font-size: 64px;
color: var(--interactive);
opacity: 0.12;
font-family: Georgia, serif;
line-height: 1;
}
.mts-testimonial__stars {
display: flex;
gap: 2px;
color: var(--cta-primary);
font-size: 14px;
}
.mts-testimonial__quote {
font-size: 14px;
line-height: 1.7;
color: var(--text-primary);
font-style: italic;
flex: 1;
}
.mts-testimonial__author {
display: flex;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
.mts-testimonial__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: var(--blue-alpha-12);
flex-shrink: 0;
}
.mts-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mts-testimonial__name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.mts-testimonial__role {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
}
/* Large featured testimonial */
.mts-testimonial--featured {
border-top: 3px solid var(--interactive);
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.10);
}
/* ══════════════════════════════════════════════════════════════
FEATURE ROW (alternating image + text)
Used in "How it works" / product feature sections.
════════════════════════════════════════════════════════════════ */
.mts-feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center;
padding: var(--space-10) 0;
border-bottom: 1px solid var(--border-subtle);
}
.mts-feature-row:last-child { border-bottom: none; }
/* Odd rows: text left / visual right (default) */
/* Even rows: visual left / text right */
.mts-feature-row:nth-child(even) .mts-feature-row__text { order: 2; }
.mts-feature-row:nth-child(even) .mts-feature-row__visual { order: 1; }
.mts-feature-row__eyebrow {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--interactive);
margin-bottom: var(--space-4);
display: block;
}
.mts-feature-row__title {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-5);
line-height: 1.25;
letter-spacing: -0.02em;
}
.mts-feature-row__body {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: var(--space-6);
}
.mts-feature-row__visual {
background: var(--layer-01);
border: 1px solid var(--border-subtle);
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mts-feature-row__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ══════════════════════════════════════════════════════════════
BLOG CARD
Article preview card for blog/news grids.
════════════════════════════════════════════════════════════════ */
.mts-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
}
.mts-blog-card {
background: #fff;
border: 1px solid var(--blue-20);
display: flex;
flex-direction: column;
transition: box-shadow 200ms, transform 200ms;
}
.mts-blog-card:hover {
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.10);
transform: translateY(-2px);
}
.mts-blog-card__image {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--layer-01);
}
.mts-blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms;
}
.mts-blog-card:hover .mts-blog-card__image img { transform: scale(1.04); }
.mts-blog-card__body {
padding: var(--space-6);
display: flex;
flex-direction: column;
flex: 1;
}
.mts-blog-card__meta {
display: flex;
gap: var(--space-4);
align-items: center;
margin-bottom: var(--space-4);
}
.mts-blog-card__category {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--interactive);
}
.mts-blog-card__date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
}
.mts-blog-card__title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-3);
line-height: 1.35;
letter-spacing: -0.01em;
}
.mts-blog-card:hover .mts-blog-card__title { color: var(--interactive); }
.mts-blog-card__excerpt {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
flex: 1;
margin-bottom: var(--space-5);
}
.mts-blog-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
/* ══════════════════════════════════════════════════════════════
TEAM CARD
Individual team member profile cards.
════════════════════════════════════════════════════════════════ */
.mts-team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-6);
}
.mts-team-card {
background: #fff;
border: 1px solid var(--blue-20);
padding: var(--space-7);
text-align: center;
transition: box-shadow 200ms;
}
.mts-team-card:hover { box-shadow: 0 6px 24px rgba(37, 99, 235, 0.10); }
.mts-team-card__photo {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto var(--space-5);
background: var(--blue-alpha-12);
border: 2px solid var(--border-subtle);
}
.mts-team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.mts-team-card__name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.mts-team-card__role {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--interactive);
margin-bottom: var(--space-4);
}
.mts-team-card__bio {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.6;
}
.mts-team-card__links {
display: flex;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-5);
}
.mts-team-card__links a {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
text-decoration: none;
font-size: 13px;
transition: color 150ms, border-color 150ms;
}
.mts-team-card__links a:hover { color: var(--interactive); border-color: var(--interactive); }
/* ══════════════════════════════════════════════════════════════
NEWSLETTER SIGNUP
Inline email capture block.
════════════════════════════════════════════════════════════════ */
.mts-newsletter {
display: flex;
flex-direction: column;
gap: var(--space-5);
max-width: 560px;
}
.mts-newsletter__form {
display: flex;
gap: var(--space-3);
}
.mts-newsletter__form input[type="email"] {
flex: 1;
height: var(--input-height-md);
padding: 0 var(--space-5);
border: 1px solid var(--border-subtle);
background: #fff;
font-size: 14px;
color: var(--text-primary);
outline: none;
transition: border-color 150ms;
}
.mts-newsletter__form input[type="email"]:focus {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.mts-newsletter__disclaimer {
font-size: 11px;
color: var(--text-secondary);
}
/* Dark variant (for dark backgrounds) */
.mts-newsletter--dark .mts-newsletter__form input[type="email"] {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: #fff;
}
.mts-newsletter--dark .mts-newsletter__form input[type="email"]:focus {
border-color: rgba(255,255,255,0.4);
}
.mts-newsletter--dark .mts-newsletter__disclaimer { color: rgba(255,255,255,0.4); }
/* ══════════════════════════════════════════════════════════════
STAT BLOCK (large metrics / social proof numbers)
════════════════════════════════════════════════════════════════ */
.mts-stat-row {
display: flex;
gap: var(--space-10);
flex-wrap: wrap;
align-items: center;
}
.mts-stat-row__divider {
width: 1px;
height: 60px;
background: var(--border-subtle);
flex-shrink: 0;
}
.mts-stat-block { text-align: left; }
.mts-stat-block__val {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: var(--space-2);
}
.mts-stat-block__val .suffix { font-size: 0.6em; }
.mts-stat-block__val--blue { color: var(--interactive); }
.mts-stat-block__val--green { color: var(--brand-primary); }
.mts-stat-block__val--saffron { color: var(--cta-primary); }
.mts-stat-block__label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
/* ══════════════════════════════════════════════════════════════
VIDEO SECTION
Responsive video embed container with play overlay.
════════════════════════════════════════════════════════════════ */
.mts-video-block {
position: relative;
background: #000;
overflow: hidden;
}
.mts-video-block::before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 */
}
.mts-video-block iframe,
.mts-video-block video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* Play button overlay */
.mts-video-block__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.35);
cursor: pointer;
transition: background 200ms;
}
.mts-video-block__overlay:hover { background: rgba(0,0,0,0.25); }
.mts-video-block__play {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--interactive);
padding-left: 4px;
transition: transform 200ms, background 200ms;
}
.mts-video-block__overlay:hover .mts-video-block__play {
transform: scale(1.1);
background: #fff;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.mts-pricing-grid { grid-template-columns: 1fr; }
.mts-testimonial-grid { grid-template-columns: 1fr; }
.mts-blog-grid { grid-template-columns: 1fr; }
.mts-team-grid { grid-template-columns: repeat(2, 1fr); }
.mts-feature-row { grid-template-columns: 1fr; }
.mts-feature-row:nth-child(even) .mts-feature-row__text { order: 0; }
.mts-feature-row:nth-child(even) .mts-feature-row__visual { order: 0; }
.mts-newsletter__form { flex-direction: column; }
.mts-stat-row { gap: var(--space-6); }
.mts-stat-row__divider { display: none; }
.mts-compare-table { font-size: 12px; }
}
@media (max-width: 480px) {
.mts-team-grid { grid-template-columns: 1fr; }
}
/* ── assets/design-system/components/data-display.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Data Display Components
Provides: description list, avatar group, tree view,
stat cards, data list, resource list,
contained list, empty state, kbd/code inline
Reference: IBM Carbon, Atlassian, Shopify Polaris
============================================================ */
/* ══════════════════════════════════════════════════════════════
DESCRIPTION LIST (key-value pairs)
Used for metadata, specification tables, invoice details.
════════════════════════════════════════════════════════════════ */
.mts-desc-list {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3) var(--space-7);
align-items: baseline;
}
.mts-desc-list--stacked {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.mts-desc-list dt {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
white-space: nowrap;
}
.mts-desc-list dd {
font-size: 14px;
color: var(--text-primary);
margin: 0;
}
/* Bordered variant */
.mts-desc-list--bordered {
display: block;
border: 1px solid var(--border-subtle);
}
.mts-desc-list--bordered .mts-desc-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0;
border-bottom: 1px solid var(--border-subtle);
}
.mts-desc-list--bordered .mts-desc-row:last-child { border-bottom: none; }
.mts-desc-list--bordered dt,
.mts-desc-list--bordered dd {
padding: var(--space-4) var(--space-5);
}
.mts-desc-list--bordered dt {
background: var(--layer-01);
border-right: 1px solid var(--border-subtle);
}
/* ══════════════════════════════════════════════════════════════
AVATAR GROUP
Stacked overlapping avatars + overflow counter.
════════════════════════════════════════════════════════════════ */
.mts-avatar-group {
display: flex;
align-items: center;
}
.mts-avatar-group .mts-avatar {
border: 2px solid #fff;
margin-left: -10px;
position: relative;
}
.mts-avatar-group .mts-avatar:first-child { margin-left: 0; }
.mts-avatar-group .mts-avatar:hover { z-index: 1; transform: scale(1.08); }
.mts-avatar-group__overflow {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--layer-02);
border: 2px solid #fff;
margin-left: -10px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
color: var(--text-secondary);
z-index: 0;
}
/* Sizes */
.mts-avatar-group--sm .mts-avatar { width: 24px; height: 24px; font-size: 9px; }
.mts-avatar-group--sm .mts-avatar-group__overflow { width: 24px; height: 24px; font-size: 9px; }
.mts-avatar-group--lg .mts-avatar { width: 40px; height: 40px; font-size: 14px; }
.mts-avatar-group--lg .mts-avatar-group__overflow { width: 40px; height: 40px; }
/* ══════════════════════════════════════════════════════════════
TREE VIEW
Expandable hierarchical list; used for file trees,
org charts, nested navigation.
════════════════════════════════════════════════════════════════ */
.mts-tree {
list-style: none;
padding: 0; margin: 0;
font-size: 13px;
}
.mts-tree li { position: relative; }
/* Nested list */
.mts-tree ul {
list-style: none;
padding: 0;
margin-left: var(--space-5);
border-left: 1px solid var(--border-subtle);
display: none;
}
.mts-tree ul.open { display: block; }
/* Horizontal connector from spine to node */
.mts-tree ul li::before {
content: '';
position: absolute;
left: calc(-1 * var(--space-5));
top: 17px;
width: var(--space-4);
height: 1px;
background: var(--border-subtle);
}
.mts-tree__item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px var(--space-4);
cursor: pointer;
color: var(--text-secondary);
border: none;
background: none;
width: 100%;
text-align: left;
transition: color 150ms, background 150ms;
position: relative;
z-index: 1;
}
.mts-tree__item:hover { background: var(--layer-01); color: var(--text-primary); }
.mts-tree__item.active { background: var(--blue-alpha-12); color: var(--interactive); font-weight: 600; }
.mts-tree__chevron {
width: 16px;
height: 16px;
transition: transform 200ms;
flex-shrink: 0;
opacity: 0.5;
}
.mts-tree__item[aria-expanded="true"] .mts-tree__chevron { transform: rotate(90deg); }
.mts-tree__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.65;
}
/* ══════════════════════════════════════════════════════════════
RESOURCE LIST (Polaris-style)
Full-width item list with primary data + actions.
════════════════════════════════════════════════════════════════ */
.mts-resource-list {
list-style: none;
padding: 0; margin: 0;
border: 1px solid var(--border-subtle);
}
.mts-resource-item {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
transition: background 150ms;
cursor: pointer;
}
.mts-resource-item:last-child { border-bottom: none; }
.mts-resource-item:hover { background: var(--layer-01); }
.mts-resource-item__thumb {
width: 48px;
height: 48px;
flex-shrink: 0;
background: var(--layer-02);
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.mts-resource-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mts-resource-item__main {
flex: 1;
min-width: 0;
}
.mts-resource-item__title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mts-resource-item__meta {
font-size: 12px;
color: var(--text-secondary);
}
.mts-resource-item__actions {
display: flex;
gap: var(--space-3);
align-items: center;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
CONTAINED LIST (Carbon-style labelled list)
Bordered list with optional section dividers and labels.
════════════════════════════════════════════════════════════════ */
.mts-contained-list {
border: 1px solid var(--border-subtle);
}
.mts-contained-list__header {
padding: var(--space-3) var(--space-5);
background: var(--layer-01);
border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.mts-contained-list__item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
font-size: 13px;
color: var(--text-secondary);
transition: background 150ms;
}
.mts-contained-list__item:last-child { border-bottom: none; }
.mts-contained-list__item:hover { background: var(--layer-01); }
.mts-contained-list__item strong { color: var(--text-primary); font-weight: 600; }
/* ══════════════════════════════════════════════════════════════
DATA BADGE (inline metric pill)
Small coloured badge showing a status, score, or count.
════════════════════════════════════════════════════════════════ */
.mts-data-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 2px;
}
.mts-data-badge--blue { background: var(--blue-alpha-12); color: var(--interactive); }
.mts-data-badge--green { background: rgba(83,170,0,0.12); color: var(--brand-primary); }
.mts-data-badge--saffron { background: rgba(255,153,51,0.15); color: #CC6600; }
.mts-data-badge--red { background: rgba(218,30,40,0.10); color: var(--red-50); }
.mts-data-badge--neutral { background: var(--layer-02); color: var(--text-secondary); }
/* ══════════════════════════════════════════════════════════════
INLINE KBD / CODE CHIP
════════════════════════════════════════════════════════════════ */
.mts-kbd {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
background: var(--layer-01);
border: 1px solid var(--border-subtle);
border-bottom-width: 2px;
color: var(--text-secondary);
border-radius: var(--radius-sm);
}
/* ══════════════════════════════════════════════════════════════
METRIC CARD (compact KPI)
Small card for dashboard stat grids.
════════════════════════════════════════════════════════════════ */
.mts-metric-card {
background: #fff;
border: 1px solid var(--border-subtle);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
position: relative;
}
.mts-metric-card__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
.mts-metric-card__val {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.mts-metric-card__val--blue { color: var(--interactive); }
.mts-metric-card__val--green { color: var(--brand-primary); }
.mts-metric-card__val--saffron { color: var(--cta-primary); }
.mts-metric-card__val--red { color: var(--red-50); }
.mts-metric-card__delta {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
gap: 3px;
}
.mts-metric-card__delta--up { color: var(--brand-primary); }
.mts-metric-card__delta--down { color: var(--red-50); }
/* Accent bar on left */
.mts-metric-card--blue { border-left: 3px solid var(--interactive); }
.mts-metric-card--green { border-left: 3px solid var(--brand-primary); }
.mts-metric-card--saffron { border-left: 3px solid var(--cta-primary); }
.mts-metric-card--red { border-left: 3px solid var(--red-50); }
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.mts-desc-list--bordered .mts-desc-row { grid-template-columns: 1fr; }
.mts-desc-list--bordered dt { border-right: none; border-bottom: 1px solid var(--border-subtle); }
}
/* ── assets/design-system/components/overlay.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Overlay Components
Provides: bottom sheet, hover card, spotlight/onboarding,
command palette, drawer, context menu
Reference: Radix UI Primitives, IBM Carbon, Material M3
============================================================ */
/* ══════════════════════════════════════════════════════════════
BOTTOM SHEET
Mobile-native panel that slides up from bottom.
JS should toggle .open class + set aria-hidden.
════════════════════════════════════════════════════════════════ */
.mts-bottom-sheet {
position: fixed;
inset: 0;
z-index: 400;
pointer-events: none;
}
.mts-bottom-sheet.open { pointer-events: auto; }
.mts-bottom-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 300ms;
}
.mts-bottom-sheet.open .mts-bottom-sheet__backdrop { opacity: 1; }
.mts-bottom-sheet__panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
padding: var(--space-7) var(--space-6);
max-height: 90vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.15);
}
.mts-bottom-sheet.open .mts-bottom-sheet__panel {
transform: translateY(0);
}
.mts-bottom-sheet__handle {
width: 40px;
height: 4px;
background: var(--border-subtle);
border-radius: 2px;
margin: 0 auto var(--space-6);
}
.mts-bottom-sheet__title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-5);
}
/* ══════════════════════════════════════════════════════════════
DRAWER
Side panel overlay for settings, filters, detail views.
════════════════════════════════════════════════════════════════ */
.mts-drawer {
position: fixed;
inset: 0;
z-index: 300;
pointer-events: none;
}
.mts-drawer.open { pointer-events: auto; }
.mts-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 250ms;
}
.mts-drawer.open .mts-drawer__backdrop { opacity: 1; }
.mts-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 400px;
max-width: 90vw;
background: #fff;
box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
overflow: hidden;
}
.mts-drawer.open .mts-drawer__panel { transform: translateX(0); }
/* Left-side drawer */
.mts-drawer--left .mts-drawer__panel {
left: 0;
right: auto;
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.12);
transform: translateX(-100%);
}
.mts-drawer--left.open .mts-drawer__panel { transform: translateX(0); }
.mts-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-6) var(--space-7);
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.mts-drawer__title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
}
.mts-drawer__close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
transition: color 150ms, background 150ms;
}
.mts-drawer__close:hover { color: var(--text-primary); background: var(--layer-01); }
.mts-drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--space-7);
}
.mts-drawer__footer {
padding: var(--space-5) var(--space-7);
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: flex-end;
gap: var(--space-3);
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
HOVER CARD (Radix-style)
Rich preview popup on hover, e.g. user profile, link preview.
════════════════════════════════════════════════════════════════ */
.mts-hover-card {
position: relative;
display: inline-block;
}
.mts-hover-card__content {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 150;
width: 300px;
background: #fff;
border: 1px solid var(--border-subtle);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
padding: var(--space-5);
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 150ms, transform 150ms;
}
.mts-hover-card:hover .mts-hover-card__content,
.mts-hover-card__content:hover {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Arrow */
.mts-hover-card__content::before {
content: '';
position: absolute;
top: -5px;
left: 16px;
width: 10px;
height: 10px;
background: #fff;
border-left: 1px solid var(--border-subtle);
border-top: 1px solid var(--border-subtle);
transform: rotate(45deg);
}
.mts-hover-card__header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.mts-hover-card__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--blue-alpha-12);
overflow: hidden;
flex-shrink: 0;
}
.mts-hover-card__name {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
}
.mts-hover-card__sub {
font-size: 11px;
color: var(--text-secondary);
}
.mts-hover-card__body {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════
CONTEXT MENU
Right-click or overflow menu with action items.
════════════════════════════════════════════════════════════════ */
.mts-context-menu {
position: fixed;
z-index: 500;
min-width: 180px;
background: #fff;
border: 1px solid var(--border-subtle);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
padding: var(--space-2) 0;
animation: mts-menu-in 120ms ease;
}
@keyframes mts-menu-in {
from { opacity: 0; transform: scale(0.96) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.mts-context-menu__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 9px var(--space-5);
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
transition: background 100ms, color 100ms;
}
.mts-context-menu__item:hover { background: var(--layer-01); color: var(--text-primary); }
.mts-context-menu__item--danger:hover { background: rgba(218,30,40,0.06); color: var(--red-50); }
.mts-context-menu__item--disabled { opacity: 0.4; pointer-events: none; }
.mts-context-menu__separator {
height: 1px;
background: var(--border-subtle);
margin: var(--space-2) 0;
}
.mts-context-menu__label {
padding: var(--space-2) var(--space-5);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
.mts-context-menu__shortcut {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
opacity: 0.6;
}
/* ══════════════════════════════════════════════════════════════
COMMAND PALETTE
Full-screen search + command launcher (Linear / VS Code style).
════════════════════════════════════════════════════════════════ */
.mts-command-palette {
position: fixed;
inset: 0;
z-index: 600;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
animation: fadeIn 120ms ease;
}
.mts-command-palette__dialog {
width: 100%;
max-width: 560px;
background: #fff;
border: 1px solid var(--border-subtle);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: mts-scale-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mts-scale-in {
from { opacity: 0; transform: scale(0.95) translateY(-8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.mts-command-palette__input-row {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.mts-command-palette__search-icon {
color: var(--text-secondary);
flex-shrink: 0;
font-size: 18px;
}
.mts-command-palette__input {
flex: 1;
border: none;
outline: none;
font-size: 15px;
font-family: var(--font-display);
color: var(--text-primary);
background: transparent;
}
.mts-command-palette__input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.mts-command-palette__results {
max-height: 380px;
overflow-y: auto;
padding: var(--space-2) 0;
}
.mts-command-palette__group-label {
padding: var(--space-3) var(--space-6) var(--space-2);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
.mts-command-palette__item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 10px var(--space-6);
cursor: pointer;
transition: background 100ms;
}
.mts-command-palette__item:hover,
.mts-command-palette__item[aria-selected="true"] {
background: var(--blue-alpha-12);
}
.mts-command-palette__item-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--layer-01);
border: 1px solid var(--border-subtle);
flex-shrink: 0;
color: var(--text-secondary);
}
.mts-command-palette__item-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.mts-command-palette__item-sub {
font-size: 11px;
color: var(--text-secondary);
}
.mts-command-palette__item-shortcut {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
display: flex;
gap: 3px;
}
.mts-command-palette__footer {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-3) var(--space-6);
border-top: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
}
/* ══════════════════════════════════════════════════════════════
SPOTLIGHT / ONBOARDING OVERLAY
Highlights a specific element with a dimmed backdrop.
════════════════════════════════════════════════════════════════ */
.mts-spotlight {
position: fixed;
inset: 0;
z-index: 700;
pointer-events: none;
}
.mts-spotlight.active { pointer-events: auto; }
.mts-spotlight__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
opacity: 0;
transition: opacity 300ms;
}
.mts-spotlight.active .mts-spotlight__backdrop { opacity: 1; }
/* Cut-out hole is created via clip-path in JS */
.mts-spotlight__hole {
position: absolute;
background: transparent;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
pointer-events: none;
transition: all 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mts-spotlight__callout {
position: absolute;
background: #fff;
border: 1px solid var(--border-subtle);
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
padding: var(--space-6);
max-width: 300px;
z-index: 1;
}
.mts-spotlight__callout-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.mts-spotlight__callout-body {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--space-5);
}
.mts-spotlight__callout-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.mts-spotlight__step-indicator {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
}
/* ══════════════════════════════════════════════════════════════
POPOVER MENU (upgraded from basic popover.css)
For dropdown menus attached to trigger buttons.
Uses CSS positioning; JS handles open/close state.
════════════════════════════════════════════════════════════════ */
.mts-popover-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 200;
min-width: 200px;
background: #fff;
border: 1px solid var(--border-subtle);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
padding: var(--space-2) 0;
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 150ms, transform 150ms;
}
.mts-popover-menu.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Align to right edge of trigger */
.mts-popover-menu--right { left: auto; right: 0; }
/* Upward direction */
.mts-popover-menu--up {
top: auto;
bottom: calc(100% + 4px);
transform: translateY(4px);
}
.mts-popover-menu--up.open { transform: translateY(0); }
.mts-popover-menu__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 9px var(--space-5);
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
text-decoration: none;
transition: background 100ms, color 100ms;
}
.mts-popover-menu__item:hover { background: var(--layer-01); color: var(--text-primary); }
.mts-popover-menu__item--active {
background: var(--blue-alpha-12);
color: var(--interactive);
font-weight: 600;
}
.mts-popover-menu__item--danger:hover { background: rgba(218,30,40,0.06); color: var(--red-50); }
.mts-popover-menu__separator {
height: 1px;
background: var(--border-subtle);
margin: var(--space-2) 0;
}
/* ── assets/design-system/components/combobox.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Advanced Form Inputs
Provides: combobox/autocomplete, number stepper,
tag input / token field, search field,
character count, form group with hint,
color swatch picker, date range display
Reference: IBM Carbon, Radix UI, Headless UI
============================================================ */
/* ══════════════════════════════════════════════════════════════
COMBOBOX / AUTOCOMPLETE
Text input with a dropdown results panel.
════════════════════════════════════════════════════════════════ */
.mts-combobox {
position: relative;
display: block;
}
.mts-combobox__input-wrap {
position: relative;
display: flex;
align-items: center;
}
.mts-combobox__input {
width: 100%;
height: var(--input-height-md);
padding: 0 var(--space-8) 0 var(--space-5);
border: 1px solid var(--border-subtle);
background: #fff;
font-size: 14px;
font-family: inherit;
color: var(--text-primary);
outline: none;
transition: border-color 150ms, box-shadow 150ms;
appearance: none;
}
.mts-combobox__input:focus {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.mts-combobox__chevron {
position: absolute;
right: var(--space-4);
pointer-events: none;
color: var(--text-secondary);
font-size: 12px;
transition: transform 200ms;
}
.mts-combobox.open .mts-combobox__chevron { transform: rotate(180deg); }
.mts-combobox__clear {
position: absolute;
right: var(--space-8);
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
font-size: 14px;
display: none;
padding: var(--space-2);
}
.mts-combobox.has-value .mts-combobox__clear { display: flex; align-items: center; }
/* Results dropdown */
.mts-combobox__results {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: 200;
background: #fff;
border: 1px solid var(--border-subtle);
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
max-height: 280px;
overflow-y: auto;
display: none;
}
.mts-combobox.open .mts-combobox__results { display: block; }
.mts-combobox__group-label {
padding: var(--space-3) var(--space-5) var(--space-2);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.mts-combobox__option {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 10px var(--space-5);
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
transition: background 100ms, color 100ms;
}
.mts-combobox__option:hover,
.mts-combobox__option[aria-selected="true"] {
background: var(--blue-alpha-12);
color: var(--text-primary);
}
.mts-combobox__option--selected { font-weight: 600; color: var(--interactive); }
.mts-combobox__option--disabled { opacity: 0.4; pointer-events: none; }
/* Highlight matched text */
.mts-combobox__match { background: rgba(37, 99, 235, 0.12); font-weight: 600; }
.mts-combobox__empty {
padding: var(--space-5);
font-size: 13px;
color: var(--text-secondary);
text-align: center;
}
/* ══════════════════════════════════════════════════════════════
NUMBER STEPPER
Input with +/- increment buttons.
════════════════════════════════════════════════════════════════ */
.mts-number-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--border-subtle);
background: #fff;
height: var(--input-height-md);
}
.mts-number-stepper:focus-within {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.mts-number-stepper__btn {
width: 44px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--layer-01);
border: none;
cursor: pointer;
color: var(--text-secondary);
font-size: 18px;
transition: background 150ms, color 150ms;
user-select: none;
flex-shrink: 0;
}
.mts-number-stepper__btn:hover:not(:disabled) {
background: var(--layer-02);
color: var(--text-primary);
}
.mts-number-stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.mts-number-stepper__btn--dec { border-right: 1px solid var(--border-subtle); }
.mts-number-stepper__btn--inc { border-left: 1px solid var(--border-subtle); }
.mts-number-stepper__input {
width: 64px;
height: 100%;
text-align: center;
border: none;
outline: none;
font-size: 15px;
font-family: var(--font-mono);
font-weight: 600;
color: var(--text-primary);
background: transparent;
-moz-appearance: textfield;
}
.mts-number-stepper__input::-webkit-outer-spin-button,
.mts-number-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* Compact size */
.mts-number-stepper--sm {
height: var(--input-height-sm);
}
.mts-number-stepper--sm .mts-number-stepper__btn { width: 32px; font-size: 14px; }
.mts-number-stepper--sm .mts-number-stepper__input { width: 48px; font-size: 13px; }
/* ══════════════════════════════════════════════════════════════
TAG INPUT / TOKEN FIELD
Free-form text input that creates removable tags.
════════════════════════════════════════════════════════════════ */
.mts-tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
min-height: var(--input-height-md);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--border-subtle);
background: #fff;
cursor: text;
transition: border-color 150ms, box-shadow 150ms;
}
.mts-tag-input:focus-within {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.mts-tag-input__tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px var(--space-3);
background: var(--blue-alpha-12);
border: 1px solid rgba(37, 99, 235, 0.2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--interactive);
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mts-tag-input__tag-remove {
background: none;
border: none;
cursor: pointer;
padding: 1px;
color: var(--interactive);
opacity: 0.7;
font-size: 12px;
line-height: 1;
flex-shrink: 0;
}
.mts-tag-input__tag-remove:hover { opacity: 1; }
.mts-tag-input__text {
flex: 1;
min-width: 80px;
border: none;
outline: none;
font-size: 14px;
font-family: inherit;
color: var(--text-primary);
background: transparent;
padding: 4px 0;
}
.mts-tag-input__text::placeholder { color: var(--text-secondary); opacity: 0.6; }
/* Colour variants */
.mts-tag-input__tag--green { background: rgba(83,170,0,0.1); border-color: rgba(83,170,0,0.25); color: var(--brand-primary); }
.mts-tag-input__tag--saffron { background: rgba(255,153,51,0.12); border-color: rgba(255,153,51,0.3); color: #CC6600; }
.mts-tag-input__tag--red { background: rgba(218,30,40,0.08); border-color: rgba(218,30,40,0.2); color: var(--red-50); }
/* ══════════════════════════════════════════════════════════════
SEARCH FIELD
Styled search input with icon and clear button.
════════════════════════════════════════════════════════════════ */
.mts-search-field {
position: relative;
display: flex;
align-items: center;
}
.mts-search-field__icon {
position: absolute;
left: var(--space-4);
color: var(--text-secondary);
font-size: 16px;
pointer-events: none;
}
.mts-search-field__input {
width: 100%;
height: var(--input-height-md);
padding-left: calc(var(--space-4) + 16px + var(--space-3));
padding-right: var(--space-9);
border: 1px solid var(--border-subtle);
background: #fff;
font-size: 14px;
font-family: inherit;
color: var(--text-primary);
outline: none;
transition: border-color 150ms, box-shadow 150ms;
}
.mts-search-field__input:focus {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.mts-search-field__input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.mts-search-field__clear {
position: absolute;
right: var(--space-4);
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
font-size: 14px;
display: none;
padding: var(--space-2);
transition: color 150ms;
}
.mts-search-field.has-value .mts-search-field__clear { display: flex; align-items: center; }
.mts-search-field__clear:hover { color: var(--text-primary); }
/* Pill / rounded variant */
.mts-search-field--pill .mts-search-field__input {
border-radius: var(--radius-full);
}
/* ══════════════════════════════════════════════════════════════
FORM GROUP WITH HELPER TEXT & CHARACTER COUNT
════════════════════════════════════════════════════════════════ */
.mts-form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.mts-form-group__label {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-2);
}
.mts-form-group__hint {
font-size: 11px;
color: var(--text-secondary);
}
.mts-form-group__error {
font-size: 11px;
color: var(--red-50);
display: none;
}
.mts-form-group.has-error .mts-form-group__error { display: block; }
.mts-form-group.has-error input,
.mts-form-group.has-error textarea,
.mts-form-group.has-error select {
border-color: var(--red-50) !important;
box-shadow: 0 0 0 3px rgba(218,30,40,0.10) !important;
}
.mts-form-group__footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.mts-form-group__char-count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
margin-left: auto;
}
.mts-form-group__char-count.near-limit { color: var(--cta-primary); }
.mts-form-group__char-count.over-limit { color: var(--red-50); font-weight: 700; }
/* ══════════════════════════════════════════════════════════════
RANGE SLIDER (styled)
════════════════════════════════════════════════════════════════ */
.mts-range {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.mts-range__track {
position: relative;
height: 4px;
background: var(--border-subtle);
cursor: pointer;
}
.mts-range__fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--interactive);
}
input[type="range"].mts-range-input {
width: 100%;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
margin: 8px 0;
}
input[type="range"].mts-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--interactive);
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
cursor: pointer;
transition: box-shadow 150ms;
}
input[type="range"].mts-range-input::-webkit-slider-runnable-track {
background: var(--border-subtle);
height: 4px;
}
input[type="range"].mts-range-input:focus {
outline: none;
}
input[type="range"].mts-range-input:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}
input[type="range"].mts-range-input::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--interactive);
border: 2px solid #fff;
cursor: pointer;
}
input[type="range"].mts-range-input::-moz-range-track {
background: var(--border-subtle);
height: 4px;
}
.mts-range__labels {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
}
.mts-range__value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--interactive);
text-align: center;
}
/* ── assets/design-system/components/otp-input.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — OTP / PIN Input
Provides: 4, 6, and 8-digit code entry fields.
Each digit is a separate inside
.mts-otp; JS in site.js auto-advances focus.
Usage:
... × 6
============================================================ */
/* ── Container ───────────────────────────────────────────── */
.mts-otp {
display: inline-flex;
gap: var(--space-3);
align-items: center;
}
/* Gap variants */
.mts-otp--tight { gap: var(--space-2); }
.mts-otp--loose { gap: var(--space-4); }
/* ── Cell ─────────────────────────────────────────────────── */
.mts-otp__cell {
width: 48px;
height: 56px;
text-align: center;
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
background: #fff;
border: 1px solid var(--border-subtle);
outline: none;
caret-color: var(--interactive);
transition: border-color 150ms, box-shadow 150ms;
/* Remove browser spinners */
-moz-appearance: textfield;
}
.mts-otp__cell::-webkit-outer-spin-button,
.mts-otp__cell::-webkit-inner-spin-button { -webkit-appearance: none; }
.mts-otp__cell:focus {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
z-index: 1;
}
.mts-otp__cell.filled {
border-color: var(--border-strong);
background: var(--layer-01);
}
/* ── States ──────────────────────────────────────────────── */
.mts-otp--error .mts-otp__cell { border-color: var(--red-50); }
.mts-otp--error .mts-otp__cell:focus { box-shadow: 0 0 0 3px rgba(218, 30, 40, 0.12); }
.mts-otp--success .mts-otp__cell { border-color: var(--brand-primary); }
.mts-otp--success .mts-otp__cell:focus { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
/* ── Separator (e.g. dash between groups) ─────────────────── */
.mts-otp__sep {
color: var(--text-secondary);
font-size: 20px;
font-weight: 300;
margin: 0 var(--space-1);
user-select: none;
}
/* ── Sizes ───────────────────────────────────────────────── */
.mts-otp--sm .mts-otp__cell {
width: 36px;
height: 44px;
font-size: 17px;
}
.mts-otp--lg .mts-otp__cell {
width: 60px;
height: 68px;
font-size: 28px;
}
/* ── Dark variant ────────────────────────────────────────── */
.mts-otp--dark .mts-otp__cell {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: #fff;
}
.mts-otp--dark .mts-otp__cell:focus {
border-color: var(--blue-40);
box-shadow: 0 0 0 3px rgba(77, 143, 232, 0.20);
}
.mts-otp--dark .mts-otp__cell.filled {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.25);
}
/* ── Status message below field ──────────────────────────── */
.mts-otp-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.mts-otp-wrap__hint {
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.mts-otp-wrap__error {
font-size: 12px;
color: var(--red-50);
text-align: center;
display: none;
}
.mts-otp--error ~ .mts-otp-wrap__error,
.mts-otp-wrap.has-error .mts-otp-wrap__error { display: block; }
/* ── assets/design-system/components/accordion.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Accordion / Details */
.mts-accordion { display: flex; flex-direction: column; }
.mts-accordion-item {
border-bottom: 1px solid var(--border-subtle);
}
.mts-accordion-item:first-child { border-top: 1px solid var(--border-subtle); }
.mts-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
width: 100%;
padding: var(--space-5) 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: var(--type-body-02);
font-weight: var(--weight-medium);
transition: color var(--duration-fast-02) var(--ease-standard);
}
.mts-accordion__trigger:hover { color: var(--interactive); }
.mts-accordion__trigger:focus-visible { outline: 3px solid var(--interactive); outline-offset: 2px; }
.mts-accordion__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--icon-secondary);
transition: transform var(--duration-moderate-01) var(--ease-standard);
}
.mts-accordion-item[open] .mts-accordion__icon,
.mts-accordion-item.open .mts-accordion__icon { transform: rotate(180deg); }
.mts-accordion__body {
padding-bottom: var(--space-5);
color: var(--text-secondary);
font-size: var(--type-body-01);
line-height: var(--lh-relaxed);
animation: fadeInUp var(--duration-moderate-01) var(--ease-entrance) both;
}
/* ── assets/design-system/components/modal.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Modal / Dialog */
.mts-modal-overlay {
position: fixed;
inset: 0;
background: var(--overlay);
z-index: 8000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
backdrop-filter: blur(4px);
animation: fadeIn var(--duration-moderate-01) var(--ease-entrance) both;
}
.mts-modal {
background: var(--layer-01);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2xl);
width: 100%;
max-width: 640px;
max-height: 90vh;
display: flex;
flex-direction: column;
animation: scaleIn var(--duration-moderate-02) var(--ease-expressive) both;
}
.mts-modal--sm { max-width: 400px; }
.mts-modal--lg { max-width: 900px; }
.mts-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.mts-modal__title {
font-family: var(--font-display);
font-size: var(--type-heading-03);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.mts-modal__subtitle { font-size: var(--type-body-01); color: var(--text-secondary); margin-top: var(--space-1); }
.mts-modal__close {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--text-secondary);
transition: var(--transition-color);
cursor: pointer;
border: 1px solid transparent;
}
.mts-modal__close:hover { background: var(--layer-02); color: var(--text-primary); border-color: var(--border-subtle); }
.mts-modal__body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.mts-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
border-top: 1px solid var(--border-subtle);
}
/* ── assets/design-system/components/tabs.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Tabs */
.mts-tabs { display: flex; flex-direction: column; }
.mts-tabs__list {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border-subtle);
overflow-x: auto;
scrollbar-width: none;
}
.mts-tabs__list::-webkit-scrollbar { display: none; }
.mts-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
font-family: var(--font-ui);
font-size: var(--type-body-01);
font-weight: var(--weight-medium);
color: var(--text-secondary);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: var(--transition-color);
white-space: nowrap;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.mts-tab:hover { color: var(--text-primary); background: var(--layer-01); }
.mts-tab.active {
color: var(--interactive);
border-bottom-color: var(--interactive);
font-weight: var(--weight-semibold);
}
.mts-tab:focus-visible { outline: 3px solid var(--interactive); outline-offset: -3px; }
.mts-tab__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
background: var(--layer-02);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: var(--weight-bold);
}
.mts-tab.active .mts-tab__count { background: var(--blue-alpha-20); color: var(--blue-30); }
.mts-tab-panel { padding: var(--space-6) 0; animation: fadeIn var(--duration-moderate-01) var(--ease-entrance) both; }
.mts-tab-panel[hidden] { display: none; }
/* Vertical tabs */
.mts-tabs--vertical { flex-direction: row; }
.mts-tabs--vertical .mts-tabs__list { flex-direction: column; border-bottom: none; border-right: 2px solid var(--border-subtle); min-width: 200px; }
.mts-tabs--vertical .mts-tab { border-bottom: none; border-right: 2px solid transparent; margin-bottom: 0; margin-right: -2px; }
.mts-tabs--vertical .mts-tab.active { border-right-color: var(--interactive); }
.mts-tabs--vertical .mts-tab-panel { padding: 0 var(--space-6); }
/* ── assets/design-system/components/tooltip.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Tooltip */
.mts-tooltip-wrapper { position: relative; display: inline-flex; }
.mts-tooltip {
position: absolute;
z-index: 7000;
padding: var(--space-2) var(--space-3);
background: var(--gray-90);
color: var(--text-primary);
font-size: var(--type-label-02);
line-height: var(--lh-snug);
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg);
max-width: 256px;
white-space: normal;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity var(--duration-fast-02) var(--ease-standard),
transform var(--duration-fast-02) var(--ease-standard);
}
.mts-tooltip--visible { opacity: 1; transform: translateY(0); }
/* Placement */
.mts-tooltip--top { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); }
.mts-tooltip--bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); }
.mts-tooltip--left { right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(4px); }
.mts-tooltip--right { left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-4px); }
.mts-tooltip--top.mts-tooltip--visible { transform: translateX(-50%) translateY(0); }
.mts-tooltip--bottom.mts-tooltip--visible { transform: translateX(-50%) translateY(0); }
.mts-tooltip--left.mts-tooltip--visible { transform: translateY(-50%) translateX(0); }
.mts-tooltip--right.mts-tooltip--visible { transform: translateY(-50%) translateX(0); }
/* ── assets/design-system/components/skeleton.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Skeleton / Loading Placeholder
============================================================ */
@keyframes skeleton-wave {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.mts-skeleton {
display: block;
border-radius: var(--radius-sm);
background: linear-gradient(
90deg,
var(--layer-01) 25%,
var(--layer-02) 50%,
var(--layer-01) 75%
);
background-size: 200% 100%;
animation: skeleton-wave 1.5s ease-in-out infinite;
}
/* Common skeleton shapes */
.mts-skeleton--text { height: 1em; width: 100%; }
.mts-skeleton--text-sm { height: 0.875em; }
.mts-skeleton--text-lg { height: 1.25em; }
.mts-skeleton--circle { border-radius: var(--radius-full); }
.mts-skeleton--button {
height: 48px;
border-radius: var(--radius-md);
}
.mts-skeleton--input {
height: 48px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
.mts-skeleton--card {
height: 200px;
border-radius: var(--radius-lg);
}
.mts-skeleton--avatar-sm { width: 32px; height: 32px; border-radius: var(--radius-full); }
.mts-skeleton--avatar-md { width: 40px; height: 40px; border-radius: var(--radius-full); }
.mts-skeleton--avatar-lg { width: 56px; height: 56px; border-radius: var(--radius-full); }
/* Skeleton row pattern */
.mts-skeleton-row {
display: flex;
gap: var(--space-4);
align-items: center;
}
/* Skeleton card layout */
.mts-skeleton-card {
padding: var(--space-6);
background: var(--layer-01);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Skeleton table */
.mts-skeleton-table-row {
display: grid;
gap: var(--space-5);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border-subtle);
}
/* Width helpers */
.mts-skeleton--w-25 { width: 25%; }
.mts-skeleton--w-50 { width: 50%; }
.mts-skeleton--w-75 { width: 75%; }
.mts-skeleton--w-100 { width: 100%; }
/* Disable animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
.mts-skeleton { animation: none; background: var(--layer-02); }
}
/* ── assets/design-system/components/input.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Input, Textarea, Label */
.mts-form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.mts-label {
font-family: var(--font-ui);
font-size: var(--type-label-02);
font-weight: var(--weight-medium);
color: var(--input-label);
letter-spacing: 0.01em;
}
.mts-label .required { color: var(--red-50); margin-left: 2px; }
.mts-input {
width: 100%;
height: var(--input-height-md);
padding: 0 var(--space-4);
background-color: var(--layer-01);
color: var(--text-primary);
border: 1px solid var(--input-border);
border-bottom-width: 2px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-family: var(--font-body);
font-size: var(--type-body-01);
transition: var(--transition-color);
outline: none;
}
.mts-input::placeholder { color: var(--input-placeholder); }
.mts-input:hover { border-color: var(--gray-40); }
.mts-input:focus {
border-color: var(--input-border-focus);
background-color: var(--layer-02);
}
.mts-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Error state */
.mts-form-group--error .mts-input { border-color: var(--input-border-error); }
.mts-form-group--error .mts-label { color: var(--text-error); }
/* Textarea */
.mts-textarea {
resize: vertical;
min-height: 96px;
height: auto;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-bottom-width: 2px;
}
/* Helper / error text */
.mts-helper { font-size: var(--type-label-01); color: var(--input-helper); }
.mts-error-msg { font-size: var(--type-label-01); color: var(--text-error); display: flex; align-items: center; gap: var(--space-2); }
/* Inline input with icon */
.mts-input-wrapper { position: relative; }
.mts-input-wrapper .mts-input { padding-left: var(--space-9); }
.mts-input-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--icon-secondary); pointer-events: none; }
.mts-input-wrapper .mts-input--suffix { padding-right: var(--space-9); }
.mts-input-suffix { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--icon-secondary); }
/* Sizes */
.mts-input--sm { height: var(--input-height-sm); font-size: var(--type-label-02); }
.mts-input--lg { height: var(--input-height-lg); font-size: var(--type-body-02); padding: 0 var(--space-5); }
/* ── assets/design-system/components/select.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Select / Dropdown */
.mts-select {
appearance: none;
width: 100%;
height: var(--input-height-md);
padding: 0 var(--space-8) 0 var(--space-4);
background-color: var(--layer-01);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238D8D8D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
color: var(--text-primary);
border: 1px solid var(--input-border);
border-bottom-width: 2px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-family: var(--font-body);
font-size: var(--type-body-01);
cursor: pointer;
transition: var(--transition-color);
outline: none;
}
.mts-select:hover { border-color: var(--gray-40); }
.mts-select:focus { border-color: var(--input-border-focus); background-color: var(--layer-02); }
.mts-select:disabled { opacity: 0.5; cursor: not-allowed; }
.mts-select option { background-color: var(--layer-02); color: var(--text-primary); }
/* ── assets/design-system/components/checkbox.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Checkbox & Radio */
.mts-checkbox, .mts-radio {
display: inline-flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
font-size: var(--type-body-01);
color: var(--text-primary);
min-height: var(--size-touch-target);
padding: var(--space-2) 0;
}
.mts-checkbox__input, .mts-radio__input {
appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
border: 2px solid var(--border-strong);
border-radius: var(--radius-xs);
background-color: transparent;
cursor: pointer;
transition: var(--transition-color);
position: relative;
display: grid;
place-items: center;
}
.mts-radio__input { border-radius: var(--radius-full); }
.mts-checkbox__input:hover { border-color: var(--interactive); }
.mts-radio__input:hover { border-color: var(--interactive); }
.mts-checkbox__input:checked {
background-color: var(--interactive);
border-color: var(--interactive);
}
.mts-checkbox__input:checked::after {
content: '';
width: 10px;
height: 6px;
border-left: 2px solid var(--white);
border-bottom: 2px solid var(--white);
transform: rotate(-45deg) translateY(-1px);
}
.mts-radio__input:checked {
border-color: var(--interactive);
}
.mts-radio__input:checked::after {
content: '';
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background-color: var(--interactive);
}
.mts-checkbox__input:focus-visible,
.mts-radio__input:focus-visible {
outline: 3px solid var(--interactive);
outline-offset: 2px;
}
/* Indeterminate state */
.mts-checkbox__input:indeterminate {
background-color: var(--interactive);
border-color: var(--interactive);
}
.mts-checkbox__input:indeterminate::after {
content: '';
width: 10px;
height: 2px;
background: var(--white);
}
.mts-checkbox--disabled, .mts-radio--disabled { opacity: 0.5; cursor: not-allowed; }
/* ── assets/design-system/components/radio.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Radio Button (Full Implementation)
============================================================ */
.mts-radio-group {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.mts-radio-group--horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-5);
}
.mts-radio-group__label {
font-size: var(--type-body-01);
font-weight: var(--weight-medium);
color: var(--text-secondary);
margin-bottom: var(--space-2);
display: block;
}
.mts-radio {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
min-height: var(--size-touch-target);
padding: var(--space-2) 0;
}
/* Hide native input */
.mts-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Custom radio circle */
.mts-radio__control {
width: 20px;
height: 20px;
border-radius: var(--radius-full);
border: 2px solid var(--border-strong);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
transition: var(--motion-hover);
position: relative;
}
/* Inner dot */
.mts-radio__control::after {
content: '';
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--interactive);
opacity: 0;
transform: scale(0);
transition: var(--motion-expand);
}
/* Checked state */
.mts-radio input:checked + .mts-radio__control {
border-color: var(--interactive);
background: var(--blue-alpha-12);
}
.mts-radio input:checked + .mts-radio__control::after {
opacity: 1;
transform: scale(1);
}
/* Hover */
.mts-radio:hover .mts-radio__control {
border-color: var(--interactive);
}
/* Focus */
.mts-radio input:focus-visible + .mts-radio__control {
box-shadow: var(--focus-ring);
}
/* Disabled */
.mts-radio--disabled,
.mts-radio input:disabled + .mts-radio__control {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Label text */
.mts-radio__label {
font-size: var(--type-body-02);
color: var(--text-primary);
line-height: 1.5;
user-select: none;
}
.mts-radio__helper {
font-size: var(--type-label-01);
color: var(--text-secondary);
display: block;
margin-top: var(--space-1);
}
/* Error state */
.mts-radio-group--error .mts-radio__control {
border-color: var(--border-error);
}
.mts-radio-group__error {
font-size: var(--type-label-02);
color: var(--text-error);
margin-top: var(--space-2);
}
/* Card-style radio */
.mts-radio--card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
background: var(--layer-01);
transition: var(--motion-hover);
min-height: auto;
}
.mts-radio--card:hover {
border-color: var(--interactive);
background: var(--blue-alpha-08);
}
.mts-radio--card input:checked ~ .mts-radio__label-wrap {
/* checked card styling applied via wrapper */
}
.mts-radio--card.is-checked {
border-color: var(--interactive);
background: var(--blue-alpha-12);
}
/* ── assets/design-system/components/toggle.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Toggle Switch */
.mts-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-4);
cursor: pointer;
min-height: var(--size-touch-target);
}
.mts-toggle__track {
position: relative;
width: 48px;
height: 24px;
background-color: var(--layer-03);
border-radius: var(--radius-full);
border: 1px solid var(--border-strong);
transition: background-color var(--duration-moderate-01) var(--ease-standard),
border-color var(--duration-moderate-01) var(--ease-standard);
flex-shrink: 0;
}
.mts-toggle__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background-color: var(--gray-40);
border-radius: var(--radius-full);
transition: transform var(--duration-moderate-01) var(--ease-expressive),
background-color var(--duration-moderate-01) var(--ease-standard);
}
.mts-toggle__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mts-toggle__input:checked ~ .mts-toggle__track {
background-color: var(--interactive);
border-color: var(--interactive);
}
.mts-toggle__input:checked ~ .mts-toggle__track .mts-toggle__thumb {
transform: translateX(24px);
background-color: var(--white);
}
.mts-toggle__input:focus-visible ~ .mts-toggle__track {
outline: 3px solid var(--interactive);
outline-offset: 2px;
}
/* Brand green variant */
.mts-toggle--brand .mts-toggle__input:checked ~ .mts-toggle__track {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
}
.mts-toggle__label { font-size: var(--type-body-01); color: var(--text-primary); }
/* ── assets/design-system/components/pagination.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Pagination Component
============================================================ */
.mts-pagination {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
}
/* Individual page button */
.mts-pagination__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--space-3);
border-radius: var(--radius-sm);
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
font-size: var(--type-body-01);
font-family: var(--font-body);
cursor: pointer;
transition: var(--motion-hover);
text-decoration: none;
}
.mts-pagination__btn:hover {
background: var(--layer-02);
border-color: var(--border-subtle);
}
.mts-pagination__btn:focus-visible {
outline: 3px solid var(--interactive);
outline-offset: 2px;
}
/* Active / current page */
.mts-pagination__btn--active {
background: var(--interactive);
color: var(--white, #FFFFFF);
border-color: var(--interactive);
font-weight: var(--weight-semibold);
}
.mts-pagination__btn--active:hover {
background: var(--interactive-hover);
border-color: var(--interactive-hover);
}
/* Disabled */
.mts-pagination__btn--disabled,
.mts-pagination__btn[disabled] {
color: var(--text-disabled);
cursor: not-allowed;
pointer-events: none;
}
/* Prev / Next arrows */
.mts-pagination__prev,
.mts-pagination__next {
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--layer-01);
color: var(--icon-primary);
cursor: pointer;
transition: var(--motion-hover);
}
.mts-pagination__prev:hover,
.mts-pagination__next:hover {
background: var(--layer-02);
border-color: var(--border-strong);
}
/* Ellipsis */
.mts-pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--text-secondary);
font-size: var(--type-body-01);
pointer-events: none;
user-select: none;
}
/* Page info (e.g. "Page 3 of 12") */
.mts-pagination__info {
font-size: var(--type-body-01);
color: var(--text-secondary);
margin-left: var(--space-3);
font-family: var(--font-mono);
white-space: nowrap;
}
/* Compact variant */
.mts-pagination--compact .mts-pagination__btn {
min-width: 32px;
height: 32px;
font-size: var(--type-label-01);
}
/* Items per page selector */
.mts-pagination__per-page {
display: flex;
align-items: center;
gap: var(--space-3);
margin-left: auto;
font-size: var(--type-body-01);
color: var(--text-secondary);
}
.mts-pagination__per-page select {
background: var(--layer-01);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
font-size: var(--type-body-01);
font-family: var(--font-body);
cursor: pointer;
}
/* ── assets/design-system/components/breadcrumb.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Breadcrumb & Navigation */
.mts-breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mts-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.mts-breadcrumb__link {
font-size: var(--type-label-02);
color: var(--text-secondary);
text-decoration: none;
transition: color var(--duration-fast-02) var(--ease-standard);
}
.mts-breadcrumb__link:hover { color: var(--interactive); }
.mts-breadcrumb__separator { color: var(--text-disabled); font-size: 12px; }
.mts-breadcrumb__current { font-size: var(--type-label-02); color: var(--text-primary); font-weight: var(--weight-medium); }
/* ── assets/design-system/components/avatar.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Avatar Component
============================================================ */
.mts-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-weight: var(--weight-semibold);
overflow: hidden;
flex-shrink: 0;
position: relative;
background: var(--layer-02);
color: var(--text-secondary);
border: 2px solid var(--border-subtle);
}
/* Sizes */
.mts-avatar--xs { width: 24px; height: 24px; font-size: 10px; border-width: 1px; }
.mts-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.mts-avatar--md { width: 40px; height: 40px; font-size: 14px; } /* default */
.mts-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.mts-avatar--xl { width: 80px; height: 80px; font-size: 24px; }
.mts-avatar--2xl { width: 112px; height: 112px; font-size: 32px; }
/* Image variant */
.mts-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Color variants (initials) */
.mts-avatar--blue { background: var(--blue-alpha-20); color: var(--blue-30); border-color: var(--blue-alpha-20); }
.mts-avatar--green { background: var(--green-alpha-15); color: var(--green-30); border-color: var(--green-alpha-20); }
.mts-avatar--saffron { background: var(--saffron-alpha-15); color: var(--saffron-40); border-color: var(--saffron-alpha-20); }
.mts-avatar--red { background: var(--red-alpha-15); color: var(--red-30); border-color: var(--red-alpha-15); }
/* Status indicator dot */
.mts-avatar__status {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: var(--radius-full);
border: 2px solid var(--layer-bg);
background: var(--status-neutral);
}
.mts-avatar--md .mts-avatar__status { width: 12px; height: 12px; }
.mts-avatar--lg .mts-avatar__status { width: 14px; height: 14px; }
.mts-avatar__status--active { background: var(--status-active); animation: statusPulse 2s ease infinite; }
.mts-avatar__status--warning { background: var(--status-warning); }
.mts-avatar__status--error { background: var(--status-error); }
.mts-avatar__status--pilot { background: var(--status-pilot); }
/* Avatar group (stacked) */
.mts-avatar-group {
display: flex;
flex-direction: row-reverse;
}
.mts-avatar-group .mts-avatar {
margin-left: -12px;
border: 2px solid var(--layer-bg);
transition: transform var(--motion-hover), z-index 0ms;
}
.mts-avatar-group .mts-avatar:last-child { margin-left: 0; }
.mts-avatar-group .mts-avatar:hover {
transform: translateY(-2px);
z-index: 10;
}
/* Overflow indicator (+3 more) */
.mts-avatar--overflow {
background: var(--layer-03);
color: var(--text-secondary);
font-size: var(--type-label-01);
font-weight: var(--weight-semibold);
cursor: default;
}
/* ── assets/design-system/components/form-layout.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Form Layout Component
Provides: card container, grid rows, stepper, info banner,
required marker, alt-channels, checkbox grid,
consent row, form actions bar.
============================================================ */
/* ── Wrapper ─────────────────────────────────────────────────── */
.mts-form-wrapper {
max-width: 720px;
margin: 0 auto;
}
/* ── Card ────────────────────────────────────────────────────── */
.mts-form-card {
background: #fff;
border: 1px solid var(--blue-20);
box-shadow: 0 8px 40px rgba(37, 99, 235, 0.10);
padding: var(--space-9);
}
.mts-form-card__header {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: var(--space-6);
margin-bottom: var(--space-8);
display: flex;
justify-content: space-between;
align-items: center;
}
.mts-form-card__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
}
.mts-form-card__subtitle {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
/* ── Progress stepper ────────────────────────────────────────── */
.mts-form-stepper {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.mts-form-step {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
transition: color 150ms;
}
.mts-form-step.active { color: var(--interactive); }
.mts-form-step.done { color: var(--brand-primary); }
.mts-form-step__num {
width: 24px; height: 24px;
border: 2px solid currentColor;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
}
.mts-form-step.active .mts-form-step__num {
background: var(--interactive);
color: #fff;
border-color: var(--interactive);
}
.mts-form-step.done .mts-form-step__num {
background: var(--brand-primary);
color: #fff;
border-color: var(--brand-primary);
}
.mts-form-sep {
flex: 1;
height: 1px;
background: var(--border-subtle);
}
/* ── Grid rows ───────────────────────────────────────────────── */
.mts-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.mts-form-row--full { grid-template-columns: 1fr; }
/* ── Required asterisk ───────────────────────────────────────── */
.mts-form-required { color: var(--red-50); }
/* ── Info banner ─────────────────────────────────────────────── */
.mts-form-info-banner {
background: var(--layer-01);
border-left: 3px solid var(--interactive);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
font-size: 13px;
color: var(--text-secondary);
}
.mts-form-info-banner strong { color: var(--text-primary); }
/* ── Checkbox grid ───────────────────────────────────────────── */
.mts-form-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.mts-form-checkbox-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
cursor: pointer;
}
.mts-form-checkbox-item input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--interactive);
}
/* ── Consent row ─────────────────────────────────────────────── */
.mts-form-consent {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.mts-form-consent input[type="checkbox"] {
margin-top: 2px;
width: 16px; height: 16px;
accent-color: var(--interactive);
flex-shrink: 0;
}
/* ── Actions bar ─────────────────────────────────────────────── */
.mts-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
margin-top: var(--space-7);
}
/* ── Alt channels ────────────────────────────────────────────── */
.mts-form-alt {
border-top: 1px dashed var(--border-subtle);
margin-top: var(--space-8);
padding-top: var(--space-6);
}
.mts-form-alt__title {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.mts-form-alt__cols {
display: flex;
gap: var(--space-9);
flex-wrap: wrap;
}
.mts-form-alt__col dt {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-primary);
margin-bottom: 4px;
}
.mts-form-alt__col dd a {
font-family: var(--font-mono);
font-size: 12px;
color: var(--interactive);
text-decoration: none;
}
.mts-form-alt__col dd a:hover { text-decoration: underline; }
/* ── Intent card (intake selector) ──────────────────────────── */
.mts-intent-card {
padding: var(--space-8);
background: #fff;
border: 1px solid var(--blue-20);
border-top: 3px solid var(--interactive);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
text-align: left;
cursor: pointer;
transition: box-shadow 200ms, transform 200ms, background 150ms, color 150ms;
}
.mts-intent-card:hover,
.mts-intent-card.active {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
transform: translateY(-3px);
background: var(--interactive);
color: #fff;
border-top-color: var(--cta-primary);
}
.mts-intent-card h3 {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
margin-bottom: var(--space-2);
}
.mts-intent-card p { font-size: 13px; line-height: 1.55; opacity: 0.75; margin-bottom: var(--space-5); }
.mts-intent-card--green { border-top-color: var(--brand-primary); }
.mts-intent-card--green:hover, .mts-intent-card--green.active { background: var(--brand-primary); border-top-color: var(--brand-primary); }
.mts-intent-card--dark { border-top-color: #161616; }
.mts-intent-card--dark:hover, .mts-intent-card--dark.active { background: #161616; }
.mts-intent-cta {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--interactive); transition: color 150ms;
}
.mts-intent-card:hover .mts-intent-cta,
.mts-intent-card.active .mts-intent-cta { color: rgba(255,255,255,0.9); }
/* ── Process label (inline step/instruction label) ───────────── */
.mts-process-label {
font-family: var(--font-mono);
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--interactive);
display: block; margin-bottom: var(--space-2);
}
/* ── Receipt box (confirmation panel) ───────────────────────── */
.mts-receipt-box {
background: var(--layer-01);
border: 1px solid var(--blue-20);
padding: var(--space-6);
text-align: left;
margin: var(--space-6) 0;
}
.mts-receipt-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.mts-receipt-label {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text-secondary); margin-bottom: 4px; display: block;
}
.mts-receipt-val {
font-family: var(--font-mono); font-size: 17px; font-weight: 700;
color: var(--text-primary);
}
/* ── Shortcut card (quick-nav tile) ──────────────────────────── */
.mts-shortcut-card {
padding: var(--space-7);
background: #fff;
border: 1px solid var(--blue-20);
transition: background 150ms, color 150ms, transform 200ms;
}
.mts-shortcut-card:hover {
background: var(--interactive); color: #fff; transform: translateY(-2px);
}
.mts-shortcut-card h4 {
font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: var(--space-4);
}
.mts-shortcut-card a {
display: block; font-family: var(--font-mono); font-size: 11px;
color: var(--interactive); text-decoration: none; margin-bottom: var(--space-2);
}
.mts-shortcut-card:hover a { color: rgba(255,255,255,0.85); }
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.mts-form-row { grid-template-columns: 1fr; }
.mts-form-checkbox-grid { grid-template-columns: 1fr; }
.mts-form-card { padding: var(--space-6); }
.mts-receipt-row { grid-template-columns: 1fr; }
}
/* ── assets/design-system/components/empty-state.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Empty State Component
============================================================ */
.mts-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-10) var(--space-7);
gap: var(--space-5);
color: var(--text-secondary);
}
/* Icon area */
.mts-empty__icon {
width: 64px;
height: 64px;
border-radius: var(--radius-xl);
background: var(--layer-01);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-secondary);
margin-bottom: var(--space-3);
}
/* Illustration variant — dashed border box */
.mts-empty__illustration {
width: 200px;
height: 140px;
border-radius: var(--radius-lg);
border: 2px dashed var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
background: var(--layer-01);
margin-bottom: var(--space-5);
}
.mts-empty__title {
font-family: var(--font-display);
font-size: var(--type-heading-03);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin: 0;
}
.mts-empty__description {
font-size: var(--type-body-02);
color: var(--text-secondary);
max-width: 400px;
line-height: 1.6;
margin: 0;
}
.mts-empty__actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-3);
}
/* Variants */
.mts-empty--compact {
padding: var(--space-7) var(--space-5);
}
.mts-empty--compact .mts-empty__icon {
width: 48px;
height: 48px;
}
.mts-empty--compact .mts-empty__title {
font-size: var(--type-heading-02);
}
/* Specific state empties */
.mts-empty--search .mts-empty__icon { background: var(--blue-alpha-08); border-color: var(--blue-alpha-15); color: var(--icon-interactive); }
.mts-empty--error .mts-empty__icon { background: var(--red-alpha-10); border-color: var(--red-alpha-15); color: var(--text-error); }
.mts-empty--success .mts-empty__icon { background: var(--green-alpha-12); border-color: var(--green-alpha-20); color: var(--icon-brand); }
/* Inline empty (inside table, list, etc.) */
.mts-empty--inline {
padding: var(--space-7);
flex-direction: row;
text-align: left;
gap: var(--space-5);
}
.mts-empty--inline .mts-empty__icon { margin-bottom: 0; flex-shrink: 0; }
/* ── assets/design-system/components/dropdown.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Dropdown Menu */
.mts-dropdown { position: relative; display: inline-block; }
.mts-dropdown__menu {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
min-width: 200px;
background: var(--layer-02);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
z-index: 6000;
overflow: hidden;
animation: scaleIn var(--duration-moderate-01) var(--ease-entrance) both;
transform-origin: top left;
}
.mts-dropdown__menu--right { left: auto; right: 0; transform-origin: top right; }
.mts-dropdown__menu--up { top: auto; bottom: calc(100% + var(--space-2)); }
.mts-dropdown__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
font-size: var(--type-body-01);
color: var(--text-primary);
cursor: pointer;
transition: background-color var(--duration-fast-02) var(--ease-standard);
background: none;
border: none;
width: 100%;
text-align: left;
text-decoration: none;
}
.mts-dropdown__item:hover { background: var(--layer-03); }
.mts-dropdown__item:focus-visible { background: var(--layer-03); outline: 2px solid var(--interactive); outline-offset: -2px; }
.mts-dropdown__item--danger { color: var(--red-40); }
.mts-dropdown__item--danger:hover { background: var(--red-alpha-10); }
.mts-dropdown__separator { height: 1px; background: var(--border-subtle); margin: var(--space-2) 0; }
.mts-dropdown__label { padding: var(--space-2) var(--space-4); font-size: var(--type-label-01); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-secondary); }
/* ── assets/design-system/components/popover.css ─────────────────────────────── */
/* ============================================================
MTSAi × IBM Carbon — Popover Component
============================================================ */
.mts-popover {
position: relative;
display: inline-block;
}
.mts-popover__content {
display: none;
position: absolute;
z-index: 500;
min-width: 240px;
max-width: 360px;
background: var(--layer-02);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-5);
animation: scaleIn var(--duration-moderate-01) var(--ease-entrance) both;
}
.mts-popover__content--open {
display: block;
}
/* Positioning */
.mts-popover__content--bottom { top: calc(100% + var(--space-3)); left: 0; }
.mts-popover__content--bottom-end { top: calc(100% + var(--space-3)); right: 0; }
.mts-popover__content--top { bottom: calc(100% + var(--space-3)); left: 0; }
.mts-popover__content--top-end { bottom: calc(100% + var(--space-3)); right: 0; }
.mts-popover__content--right { left: calc(100% + var(--space-3)); top: 0; }
.mts-popover__content--left { right: calc(100% + var(--space-3)); top: 0; }
/* Arrow */
.mts-popover__content--bottom::before {
content: '';
position: absolute;
top: -6px; left: 16px;
width: 10px; height: 10px;
background: var(--layer-02);
border-top: 1px solid var(--border-subtle);
border-left: 1px solid var(--border-subtle);
transform: rotate(45deg);
}
/* Header */
.mts-popover__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.mts-popover__title {
font-size: var(--type-body-02);
font-weight: var(--weight-semibold);
color: var(--text-primary);
font-family: var(--font-display);
}
.mts-popover__close {
width: 24px; height: 24px;
border: none;
background: transparent;
color: var(--icon-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
transition: var(--motion-hover);
}
.mts-popover__close:hover { background: var(--layer-03); color: var(--icon-primary); }
.mts-popover__body {
font-size: var(--type-body-01);
color: var(--text-secondary);
line-height: 1.6;
}
.mts-popover__footer {
display: flex;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--border-subtle);
justify-content: flex-end;
}
/* ── assets/design-system/components/progress.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Progress, Loading, Steps */
/* Progress Bar */
.mts-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.mts-progress__track {
height: 6px;
background: var(--layer-02);
border-radius: var(--radius-full);
overflow: hidden;
}
.mts-progress__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--interactive);
transition: width var(--duration-slow-01) var(--ease-standard);
}
.mts-progress__fill--green { background: var(--brand-primary); }
.mts-progress__fill--saffron { background: var(--cta-primary); }
.mts-progress__fill--red { background: var(--red-60); }
.mts-progress__header { display: flex; justify-content: space-between; align-items: center; }
.mts-progress__label { font-size: var(--type-label-01); color: var(--text-secondary); }
.mts-progress__value { font-size: var(--type-label-01); font-family: var(--font-mono); color: var(--text-primary); }
/* Thin scroll-style */
.mts-progress--thin .mts-progress__track { height: 3px; }
/* Loading Spinner */
.mts-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid var(--border-subtle);
border-top-color: var(--interactive);
border-radius: var(--radius-full);
animation: spin 0.7s linear infinite;
}
.mts-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.mts-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.mts-spinner--green { border-top-color: var(--brand-primary); }
.mts-spinner--saffron { border-top-color: var(--cta-primary); }
/* Step Indicator */
.mts-steps { display: flex; gap: 0; position: relative; }
.mts-steps::before {
content: '';
position: absolute;
top: 16px;
left: 0;
right: 0;
height: 2px;
background: var(--border-subtle);
z-index: 0;
}
.mts-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
position: relative;
z-index: 1;
text-align: center;
}
.mts-step__indicator {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--layer-02);
border: 2px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-label-02);
font-weight: var(--weight-bold);
font-family: var(--font-mono);
color: var(--text-secondary);
transition: var(--transition-color);
}
.mts-step--complete .mts-step__indicator { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); }
.mts-step--active .mts-step__indicator { background: var(--interactive); border-color: var(--interactive); color: var(--white); }
.mts-step__label { font-size: var(--type-label-01); color: var(--text-secondary); }
.mts-step--active .mts-step__label { color: var(--text-primary); font-weight: var(--weight-semibold); }
/* ── assets/design-system/components/notification.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Notifications, Alerts, Toasts */
.mts-notification {
display: flex;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border: 1px solid;
border-left-width: 4px;
font-size: var(--type-body-01);
line-height: var(--lh-relaxed);
position: relative;
}
.mts-notification--error { background: var(--notif-error-bg); border-color: var(--notif-error-border); color: var(--red-30); }
.mts-notification--warning { background: var(--notif-warning-bg); border-color: var(--notif-warning-border); color: var(--yellow-20); }
.mts-notification--success { background: var(--notif-success-bg); border-color: var(--notif-success-border); color: var(--green-20); }
.mts-notification--info { background: var(--notif-info-bg); border-color: var(--notif-info-border); color: var(--cyan-20); }
.mts-notification__icon { flex-shrink: 0; margin-top: 2px; }
.mts-notification__body { flex: 1; }
.mts-notification__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); color: var(--text-primary); }
.mts-notification__text { color: var(--text-secondary); }
.mts-notification__close {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-xs);
transition: var(--transition-color);
}
.mts-notification__close:hover { color: var(--text-primary); background: var(--layer-02); }
/* Inline callout (no icon) */
.mts-callout {
padding: var(--space-4);
border-radius: var(--radius-md);
border-left: 4px solid;
font-size: var(--type-body-01);
}
.mts-callout--blue { background: var(--blue-alpha-08); border-color: var(--interactive); color: var(--blue-20); }
.mts-callout--green { background: var(--brand-subtle); border-color: var(--brand-primary); color: var(--green-20); }
.mts-callout--saffron { background: var(--saffron-alpha-08); border-color: var(--cta-primary); color: var(--saffron-30); }
/* Toast */
.mts-toast {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: 9000;
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 400px;
}
.mts-toast__item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--layer-02);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
animation: slideInRight var(--duration-moderate-02) var(--ease-entrance) both;
}
/* ── assets/design-system/components/table.css ─────────────────────────────── */
/* MTSAi × IBM Carbon — Data Table */
.mts-table-wrapper {
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.mts-table {
width: 100%;
border-collapse: collapse;
font-size: var(--type-body-01);
}
.mts-table thead {
background-color: var(--layer-02);
border-bottom: 2px solid var(--border-subtle);
}
.mts-table th {
padding: var(--space-4) var(--space-5);
text-align: left;
font-weight: var(--weight-semibold);
font-size: var(--type-label-01);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--text-secondary);
white-space: nowrap;
}
.mts-table th.sortable { cursor: pointer; user-select: none; }
.mts-table th.sortable:hover { color: var(--text-primary); }
.mts-table td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
vertical-align: middle;
}
.mts-table tbody tr:last-child td { border-bottom: none; }
.mts-table tbody tr:hover { background-color: var(--layer-01); }
.mts-table tbody tr.selected { background-color: var(--blue-alpha-08); }
/* Table variants */
.mts-table--zebra tbody tr:nth-child(even) { background-color: var(--layer-01); }
.mts-table--compact th, .mts-table--compact td { padding: var(--space-3) var(--space-4); }
/* Cell types */
.mts-table .cell-mono { font-family: var(--font-mono); font-size: 0.85em; color: var(--green-30); }
.mts-table .cell-right { text-align: right; }
.mts-table .cell-center { text-align: center; }
/* ── assets/design-system/base/premium.css ─────────────────────────────── */
/* ============================================================
MTSAi — Premium Polish Layer
Fortune 500-grade micro-interactions, accessibility,
glass effects, and motion preferences.
Load AFTER all other design-system CSS.
============================================================ */
/* Focus: reset.css outline + section overrides (dark heroes). No global box-shadow here —
it overrode high-contrast rings on dark surfaces. */
/* ── Nav glass effect when scrolled ──────────────────────── */
.mts-nav.scrolled {
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
background: rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.06);
}
/* Dark-hero pages — nav starts fully transparent-dark */
[data-nav-dark] .mts-nav:not(.scrolled) {
background: transparent;
border-bottom-color: rgba(255, 255, 255, 0.10);
}
[data-nav-dark] .mts-nav:not(.scrolled) .mts-nav__link {
color: rgba(255, 255, 255, 0.75);
}
[data-nav-dark] .mts-nav:not(.scrolled) .mts-nav__link:hover {
color: #fff;
}
[data-nav-dark] .mts-nav:not(.scrolled) .status-dot.active {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.32);
}
/* ── Button micro-states ──────────────────────────────────── */
.mts-btn {
transition:
background var(--duration-fast-02) var(--ease-standard),
color var(--duration-fast-02) var(--ease-standard),
border-color var(--duration-fast-02) var(--ease-standard),
box-shadow var(--duration-fast-02) var(--ease-standard),
transform 80ms var(--ease-standard);
position: relative;
overflow: hidden;
}
.mts-btn:active {
transform: translateY(1px);
box-shadow: none !important;
}
/* Primary button — shimmer on hover */
.mts-btn--primary::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
transform: skewX(-20deg);
transition: left 400ms var(--ease-smooth);
pointer-events: none;
}
.mts-btn--primary:hover::after {
left: 160%;
}
/* ── Card depth enhancement ───────────────────────────────── */
.feature-card,
.step-card,
.partner-card,
.insight-panel,
.arch-layer,
.control-item,
.gov-control,
.eco-cell,
.engine-cell,
.dark-card,
.phase-item,
.roadmap-phase {
will-change: transform;
}
/* ── Skip link — premium style ────────────────────────────── */
.skip-link {
border-radius: 0 0 4px 0;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 11px;
font-family: var(--font-mono);
}
/* ── Scroll progress bar — smooth repaint ─────────────────── */
#scroll-progress {
will-change: transform;
}
/* ── Image hover zoom — global opt-in ─────────────────────── */
.photo-strip img,
.problem-photo__img,
.arch-photo__img,
.privacy-visual__img {
will-change: transform;
}
/* ── Link underline animation ─────────────────────────────── */
.footer-col a {
display: inline-block;
position: relative;
}
.footer-col a::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 0; height: 1px;
background: #F4F4F4;
transition: width 200ms var(--ease-standard);
}
.footer-col a:hover::after {
width: 100%;
}
/* ── Nav dropdown links — arrow slide ─────────────────────── */
.nav-dropdown li a::before {
content: '→';
font-size: 11px;
color: var(--interactive);
opacity: 0;
transform: translateX(-6px);
transition: opacity 100ms, transform 120ms var(--ease-standard);
display: inline-block;
margin-right: 6px;
}
.nav-dropdown li a:hover::before {
opacity: 1;
transform: translateX(0);
}
/* ── KPI cell hover — lift ─────────────────────────────────── */
.kpi-cell {
transition: background 150ms var(--ease-standard),
transform 200ms var(--ease-standard);
}
.kpi-cell:hover {
transform: translateY(-2px);
}
/* ── Arch layer — richer transition ───────────────────────── */
.arch-layer {
transition:
border-left-color 200ms var(--ease-standard),
background 200ms var(--ease-standard),
box-shadow 200ms var(--ease-standard),
transform 200ms var(--ease-standard);
}
.arch-layer:hover {
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}
/* ── Section eyebrow — tick animate on visibility ─────────── */
.section-eyebrow::before {
transition: width 400ms var(--ease-smooth);
width: 18px;
}
.reveal.visible ~ * .section-eyebrow::before,
.section-eyebrow.visible::before {
width: 28px;
}
/* ── Marquee pause on reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.marquee-content {
animation: marquee 28s linear infinite;
}
}
/* ── Reduced motion — master guard ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
.mts-btn--primary::after {
display: none;
}
.marquee-content {
animation: none !important;
}
}
/* ── Selection color — brand-aligned ─────────────────────── */
::selection {
background: rgba(37, 99, 235, 0.18);
color: var(--text-primary);
}
/* ── Scrollbar — subtle brand tint (Webkit) ───────────────── */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--layer-01);
}
::-webkit-scrollbar-thumb {
background: var(--gray-30, #C6C6C6);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--interactive);
}
/* ── assets/design-system/components/hero.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Hero Component
Replaces: .hero, .hero-gov, .hero-sp, .hero-tp,
.hero-careers, .article-hero, .diag-hero
============================================================ */
/* ── Base ───────────────────────────────────────────────────── */
.mts-hero {
background: linear-gradient(150deg, #000C2E 0%, #000720 55%, #00040F 100%);
position: relative;
overflow: hidden;
padding: clamp(80px, 12vw, 140px) 0;
}
/* ── Aurora mesh gradient — 3 animated blobs, offset timing ─── */
/* Blob 1: teal + blue + saffron accent, left-anchor, 14s */
.mts-hero::before {
content: '';
position: absolute;
inset: -25%;
width: 150%; height: 150%;
background:
radial-gradient(ellipse 55% 70% at 18% 52%, rgba(13,148,136, 0.42) 0%, transparent 58%),
radial-gradient(ellipse 42% 55% at 78% 14%, rgba(37, 99,235, 0.32) 0%, transparent 52%),
radial-gradient(ellipse 30% 42% at 88% 82%, rgba(255,153, 51, 0.13) 0%, transparent 48%);
animation: aurora-1 14s ease-in-out infinite alternate;
pointer-events: none;
will-change: transform, opacity;
}
@keyframes aurora-1 {
0% { transform: translate(0, 0) scale(1.00); opacity: 0.75; }
35% { transform: translate(5%, 3%) scale(1.08); opacity: 1.00; }
70% { transform: translate(-3%, 6%) scale(0.95); opacity: 0.85; }
100% { transform: translate(4%, -2%) scale(1.04); opacity: 0.80; }
}
/* ── Sub-elements ────────────────────────────────────────────── */
/* City-grid dot pattern + Blob 2 & 3 as pseudo-elements */
.mts-hero__pattern {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='0' cy='0' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='30' cy='0' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='60' cy='0' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='0' cy='30' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255%2C255%2C255%2C0.15)'/%3E%3Ccircle cx='60' cy='30' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='0' cy='60' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='30' cy='60' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3Ccircle cx='60' cy='60' r='1' fill='rgba(255%2C255%2C255%2C0.10)'/%3E%3C%2Fsvg%3E");
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* Blob 2: indigo, top-right, 19s (offset) */
.mts-hero__pattern::before {
content: '';
position: absolute; inset: -30%;
width: 160%; height: 160%;
background: radial-gradient(ellipse 55% 65% at 88% 18%, rgba(101,84,192, 0.28) 0%, transparent 55%);
animation: aurora-2 19s ease-in-out infinite alternate;
pointer-events: none;
will-change: transform;
}
@keyframes aurora-2 {
0% { transform: translate(0, 0) scale(1.00); }
45% { transform: translate(-7%, 5%) scale(1.12); }
100% { transform: translate(5%, -4%) scale(0.93); }
}
/* Blob 3: teal bottom, 24s (slowest, most subtle) */
.mts-hero__pattern::after {
content: '';
position: absolute; inset: -20%;
width: 140%; height: 140%;
background: radial-gradient(ellipse 48% 58% at 52% 95%, rgba(13,148,136, 0.20) 0%, transparent 52%);
animation: aurora-3 24s ease-in-out infinite alternate;
pointer-events: none;
will-change: transform;
}
@keyframes aurora-3 {
0% { transform: translate(0, 0) scale(1.00); }
40% { transform: translate(6%, -5%) scale(1.10); }
100% { transform: translate(-4%, 3%) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
.mts-hero::before,
.mts-hero__pattern::before,
.mts-hero__pattern::after { animation: none; }
}
/* Saffron top accent bar */
.mts-hero__accent {
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-saffron) 0%, #FFCD80 60%, transparent 100%);
z-index: 10;
}
/* Content wrapper — sits above pattern/glow */
.mts-hero__inner {
position: relative;
z-index: 5;
}
/* Align with .mts-container; split heroes override via .mts-hero--split rules */
.mts-hero:not(.mts-hero--split) > .mts-hero__inner {
box-sizing: border-box;
width: 100%;
max-width: var(--container-xl);
margin-inline: auto;
padding-inline: var(--space-6);
}
/* ── Typography ──────────────────────────────────────────────── */
.mts-hero__eyebrow {
margin-bottom: var(--space-7);
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
align-items: center;
}
/* Tag override — glass style on dark bg */
.mts-hero .mts-tag--blue,
.mts-hero .mts-tag--white {
background: rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(8px);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
}
.mts-hero__headline {
font-family: var(--font-display);
font-size: clamp(32px, 5.5vw, 80px);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.04em;
color: #FFFFFF;
margin: var(--space-6) 0;
max-width: 820px;
}
.mts-hero__headline--xl {
font-size: clamp(40px, 6vw, 96px);
max-width: 640px;
}
/* Saffron accent word/phrase within headline */
.mts-hero__headline .headline-accent,
.headline-accent { color: var(--cta-primary); }
.headline-green { color: var(--brand-primary); }
/* Mid-weight hook line — sits between headline and body copy */
.mts-hero__subhook {
font-family: var(--font-display);
font-size: clamp(18px, 2.2vw, 32px);
font-weight: 400;
color: rgba(255, 255, 255, 0.72);
max-width: 560px;
line-height: 1.3;
letter-spacing: -0.01em;
margin-bottom: var(--space-5);
}
.mts-hero__subline {
font-family: var(--font-body);
font-size: clamp(15px, 1.3vw, 17px);
color: rgba(255, 255, 255, 0.72);
max-width: 580px;
line-height: 1.72;
margin-bottom: var(--space-8);
}
.mts-hero__subline--bordered {
border-left: 3px solid var(--brand-primary);
padding-left: var(--space-5);
}
.mts-hero__ctas {
display: flex;
flex-direction: column;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-10);
}
/* Ghost button always white on dark hero bg */
.mts-hero .mts-btn--ghost {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.35);
}
.mts-hero .mts-btn--ghost:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.65);
color: #FFFFFF;
}
/* Fine-print / disclaimer below CTAs */
.mts-hero__note {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: var(--space-5);
}
/* ── Stat strip — stacked on mobile, row on desktop ──────────── */
.mts-hero__stats {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
padding-top: var(--space-7);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.mts-hero__stat { flex: 1; }
.mts-hero__stat-num {
display: block;
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.02em;
}
.mts-hero__stat-label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255, 255, 255, 0.72);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
.mts-hero__stat-divider {
width: 1px;
height: 36px;
background: rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
/* ── Callout box (gov-style inline pull-quote) ───────────────── */
.mts-hero__callout {
padding: var(--space-5) var(--space-6);
border-left: 3px solid var(--cta-primary);
background: rgba(234, 88, 12, 0.07);
margin-bottom: var(--space-8);
}
/* ── Scroll cue ──────────────────────────────────────────────── */
.mts-hero__scroll-cue {
position: absolute;
bottom: var(--space-6);
left: 50%;
transform: translateX(-50%);
opacity: 0.5;
z-index: 5;
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255, 255, 255, 0.70);
letter-spacing: 0.1em;
animation: mts-hero-float 3s ease-in-out infinite;
}
@keyframes mts-hero-float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* ── Visual panel (split layout right column) ────────────────── */
.mts-hero__visual {
padding: 80px 0 80px var(--space-8);
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 5;
}
.mts-hero__panel {
width: 100%;
max-width: 520px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
backdrop-filter: blur(4px);
overflow: hidden;
}
.mts-hero__panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
}
.mts-hero__panel-title {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.70);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mts-hero__panel-live {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--cta-primary);
letter-spacing: 0.08em;
}
.mts-hero__panel-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.40);
}
.mts-hero__panel-body { padding: 16px 18px; }
.mts-hero__panel-metrics {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mts-hero__panel-metric {
padding: 12px 14px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.mts-hero__panel-metric:last-child { border-right: none; }
.mts-hero__panel-metric-val {
display: block;
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.02em;
}
.mts-hero__panel-metric-val.saffron { color: var(--cta-primary); }
.mts-hero__panel-metric-val.green { color: #6FDC8C; }
.mts-hero__panel-metric-label {
display: block;
font-family: var(--font-mono);
font-size: 9px;
color: rgba(255, 255, 255, 0.62);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 2px;
}
/* ── Layout modifiers ────────────────────────────────────────── */
/* ── Height modifiers ─────────────────────────────────────── */
/* Full viewport — homepage hero only */
.mts-hero--full {
min-height: 100vh;
}
/* Mid — interior marketing pages (Government, SP, tech) */
.mts-hero--mid {
min-height: 60vh;
}
/* Compact — utility pages (about, careers, contact) */
.mts-hero--compact {
min-height: 0;
padding: clamp(60px, 9vw, 100px) 0;
}
/* Split: single-column on mobile, 2-column grid on desktop */
.mts-hero--split {
display: grid;
grid-template-columns: 1fr;
align-items: center;
min-height: auto;
padding: clamp(80px, 12vw, 120px) 0 clamp(48px, 6vw, 72px);
}
.mts-hero--split .mts-hero__inner {
max-width: 100%;
margin: 0;
padding: 0 var(--space-6);
}
/* Standard: single column, left-aligned (gov, sp, tp) */
.mts-hero--standard {
display: flex;
align-items: center;
min-height: 520px;
}
/* Article: structured content + aside (iudm, roadmap, etc.) */
.mts-hero--article {
/* default padding applies; inner grid controlled by .mts-hero__article-layout */
}
.mts-hero__article-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
position: relative;
z-index: 5;
}
/* Diagram: minimal dark (diagram_cloud.html) */
.mts-hero--diagram {
background: linear-gradient(180deg, #050810 0%, #0A0E1A 100%);
padding: clamp(60px, 9vw, 100px) 0 var(--space-10);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mts-hero--diagram::before { display: none; }
/* ── Color modifiers ─────────────────────────────────────────── */
/* Green theme (careers.html) */
.mts-hero--green {
background: linear-gradient(150deg, #001A00 0%, #001500 55%, #000800 100%);
}
.mts-hero--green::before {
background:
radial-gradient(ellipse 55% 80% at 12% 50%, rgba(34, 197, 94, 0.36) 0%, transparent 65%);
}
.mts-hero--green .mts-hero__accent {
background: linear-gradient(90deg, #10b981 0%, var(--accent-saffron) 60%, transparent 100%);
}
/* ── Stat divider + CTA buttons — hidden on mobile, shown on desktop ── */
.mts-hero__stat-divider { display: none; }
.mts-hero__ctas .mts-btn { width: 100%; }
.mts-hero__visual { display: none; }
/* ── Responsive — mobile-first progressive enhancement ──────── */
/* Tablet (≥ 769px): restore row stats, show strip prefix */
@media (min-width: 769px) {
.mts-hero__stats {
flex-direction: row;
align-items: center;
gap: var(--space-7);
}
.mts-hero__stat-divider { display: block; }
.mts-hero__ctas { flex-direction: row; }
.mts-hero__ctas .mts-btn { width: auto; }
}
/* Desktop (≥ 901px): restore split 2-col layout */
@media (min-width: 901px) {
.mts-hero--split {
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 64px);
padding: 0;
align-items: start;
}
.mts-hero--split .mts-hero__inner {
padding: 80px var(--space-6) 80px 0;
max-width: 640px;
margin-left: auto;
}
.mts-hero__visual { display: flex; }
}
/* Wide (≥ 1025px): restore article 2-col layout */
@media (min-width: 1025px) {
.mts-hero__article-layout {
grid-template-columns: 1fr 320px;
gap: var(--space-12);
}
}
/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.mts-hero__scroll-cue { animation: none; }
}
/* ── Reduced motion — stop SVG elements ───────────── */
@media (prefers-reduced-motion: reduce) {
.city-grid-svg animate,
.mts-hero animate {
display: none;
}
.mts-hero__panel-live-dot {
animation: none;
}
.mts-hero__scroll-cue {
animation: none;
}
}
/* ── assets/design-system/components/status.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Status Indicator
Provides: .mts-status-dot (pulse dot), .mts-nav-status (nav bar)
============================================================ */
@keyframes mts-status-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(83,170,0,0.18); }
50% { box-shadow: 0 0 0 5px rgba(83,170,0,0.06); }
}
/* Inline status dot */
.mts-status-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--gray-50);
flex-shrink: 0;
}
.mts-status-dot--active {
background: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(83,170,0,0.18);
animation: mts-status-pulse 2.5s ease-in-out infinite;
}
.mts-status-dot--warning {
background: var(--yellow-50, #F1C21B);
box-shadow: 0 0 0 3px rgba(241,194,27,0.18);
}
.mts-status-dot--error {
background: var(--red-50);
box-shadow: 0 0 0 3px rgba(218,30,40,0.18);
}
/* Nav status bar (pilot status label) */
.mts-nav-status {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
.mts-status-dot--active { animation: none; }
}
/* ── assets/design-system/components/kpi.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — KPI Strip
Full-width blue band of key metrics, used between hero + content.
============================================================ */
.mts-kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--interactive);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* Colour variants */
.mts-kpi-strip--navy { background: #000C2E; }
.mts-kpi-strip--green { background: var(--brand-primary); }
.mts-kpi-cell {
padding: var(--space-7);
border-right: 1px solid rgba(255,255,255,0.12);
transition:
background var(--duration-moderate-01) var(--ease-standard),
transform var(--duration-moderate-02) var(--ease-smooth);
}
.mts-kpi-cell:last-child { border-right: none; }
.mts-kpi-cell:hover {
background: rgba(255,255,255,0.05);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.mts-kpi-cell { transition: background var(--duration-moderate-01) var(--ease-standard); }
.mts-kpi-cell:hover { transform: none; }
}
.mts-kpi-val {
display: block;
font-family: var(--font-display);
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 700;
color: #fff;
letter-spacing: -0.03em;
line-height: 1;
}
.mts-kpi-val.saffron { color: var(--cta-primary); }
.mts-kpi-label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: var(--space-2);
}
@media (max-width: 768px) {
.mts-kpi-strip { grid-template-columns: repeat(2, 1fr); }
.mts-kpi-cell:nth-child(2) { border-right: none; }
}
/* ── assets/design-system/components/article.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Article Layout
For long-form pages: iudm, roadmap, congestion, india-advantage,
why-traditional-fails.
============================================================ */
/* ── How It Works — Journey Progress Strip ───────────────────
A thin sequential nav bar placed between the site nav and the
article hero. Shows the reader their position in the 5-page
"How It Works" briefing pathway.
──────────────────────────────────────────────────────────────── */
.hiw-strip {
background: #00040F;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
position: relative;
z-index: 90;
overflow: hidden;
}
.hiw-strip__inner {
display: flex;
align-items: stretch;
min-height: var(--size-touch-target);
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Label before the steps */
.hiw-strip__prefix {
display: flex;
align-items: center;
padding-right: var(--space-5);
border-right: 1px solid rgba(255, 255, 255, 0.07);
margin-right: var(--space-2);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.28);
white-space: nowrap;
flex-shrink: 0;
}
/* Individual step link */
.hiw-step {
display: flex;
align-items: center;
gap: 7px;
padding: 0 16px;
height: 100%;
text-decoration: none;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.35);
transition: color 150ms ease, background 150ms ease;
white-space: nowrap;
position: relative;
border-right: 1px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
.hiw-step:hover {
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.03);
}
.hiw-step__num {
font-size: 8px;
font-weight: 700;
opacity: 0.55;
letter-spacing: 0.1em;
}
/* Active step — current page */
.hiw-step--active {
color: var(--accent-saffron);
background: rgba(255, 173, 51, 0.06);
}
.hiw-step--active .hiw-step__num {
opacity: 1;
}
/* Saffron underline on active step */
.hiw-step--active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent-saffron);
}
/* Completed steps — reader has passed them */
.hiw-step--done {
color: rgba(255, 255, 255, 0.50);
}
.hiw-step--done .hiw-step__num::after {
content: ' ✓';
font-size: 7px;
opacity: 0.6;
}
/* Progress fill — thin line behind all steps */
.hiw-strip__progress {
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: rgba(255, 173, 51, 0.25);
transition: width 600ms ease;
}
/* hiw strip — labels/prefix hidden on mobile by default */
.hiw-step__label { display: none; }
.hiw-step { padding: 0 12px; }
.hiw-strip__prefix { display: none; }
/* Tablet (≥ 769px): restore labels and prefix */
@media (min-width: 769px) {
.hiw-step__label { display: inline; }
.hiw-step { padding: 0 16px; }
.hiw-strip__prefix { display: flex; }
}
/* Lead paragraph — large intro text in dark hero */
.mts-article-lead {
font-size: clamp(16px, 1.4vw, 20px);
color: rgba(255,255,255,0.78);
line-height: 1.72;
max-width: 600px;
}
/* Meta panel — glass panel alongside headline (article hero aside) */
.mts-article-meta {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
padding: var(--space-6);
}
/* Article body layout: single-col on mobile, TOC+prose on desktop */
.mts-article-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
.mts-article-toc {
display: none;
position: sticky;
top: 80px;
}
.mts-article-toc-heading {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.mts-article-toc a {
display: block;
font-size: 13px;
color: var(--text-secondary);
text-decoration: none;
padding: var(--space-2) 0;
border-left: 2px solid var(--border-subtle);
padding-left: var(--space-4);
transition: color var(--duration-fast-02), border-color var(--duration-fast-02);
}
.mts-article-toc a:hover,
.mts-article-toc a.active {
color: var(--interactive);
border-left-color: var(--interactive);
}
/* Prose content */
.mts-article-prose {
max-width: var(--prose-max-width, 68ch);
}
.mts-article-prose h2 {
font-family: var(--font-display);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: var(--space-10) 0 var(--space-5);
padding-top: var(--space-9);
border-top: 1px solid var(--border-subtle);
}
.mts-article-prose h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.mts-article-prose h3 {
font-family: var(--font-display);
font-size: clamp(17px, 1.6vw, 22px);
font-weight: 600;
color: var(--text-primary);
margin: var(--space-8) 0 var(--space-3);
}
.mts-article-prose p {
font-size: clamp(15px, 1.2vw, 16px);
color: var(--text-secondary);
line-height: 1.78;
margin-bottom: var(--space-5);
}
.mts-article-prose strong { color: var(--text-primary); }
/* Desktop (≥ 1025px): restore TOC + prose 2-col layout */
@media (min-width: 1025px) {
.mts-article-layout { grid-template-columns: 260px 1fr; gap: var(--space-12); }
.mts-article-toc { display: block; }
}
/* ── assets/design-system/components/callout.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Callout Box
Left-bordered pull-quote / info box. Used inline in content.
============================================================ */
.mts-callout {
padding: var(--space-6) var(--space-7);
font-size: 15px;
line-height: 1.72;
color: var(--text-secondary);
}
/* Blue — trust / governance */
.mts-callout--blue {
background: rgba(37, 99, 235, 0.05);
border: 1px solid var(--blue-20);
border-left: 3px solid var(--interactive);
color: var(--text-primary);
}
/* Green — sustainability / compliance */
.mts-callout--green {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.20);
border-left: 3px solid var(--brand-primary);
color: var(--text-primary);
}
/* Saffron — CTA / highlight */
.mts-callout--saffron {
background: rgba(234, 88, 12, 0.06);
border: 1px solid rgba(234, 88, 12, 0.20);
border-left: 3px solid var(--cta-primary);
color: var(--text-primary);
}
/* Red — warning / caution */
.mts-callout--red {
background: rgba(218, 30, 40, 0.04);
border: 1px solid rgba(218, 30, 40, 0.15);
border-left: 3px solid var(--red-50);
color: var(--text-primary);
}
/* Dark (for use inside .mts-section--dark) */
.mts-callout--dark {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-left: 3px solid var(--cta-primary);
color: rgba(255,255,255,0.72);
}
.mts-callout strong { color: inherit; font-weight: 600; }
.mts-callout__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
display: block;
margin-bottom: var(--space-2);
opacity: 0.65;
}
/* ── assets/design-system/components/media.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Media / Photo Strip
Full-width image with caption overlay.
============================================================ */
.mts-photo-strip {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
border: 1px solid var(--blue-20);
box-shadow: 0 4px 32px rgba(37, 99, 235, 0.10);
margin-bottom: var(--space-10);
}
.mts-photo-strip--tall { height: 380px; }
.mts-photo-strip--short { height: 200px; }
.mts-photo-strip img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 35%;
filter: contrast(1.06) saturate(0.95);
transition: transform 6s ease;
}
.mts-photo-strip:hover img { transform: scale(1.03); }
/* Caption gradient overlay */
.mts-photo-strip__caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 28px var(--space-6) var(--space-4);
background: linear-gradient(0deg, rgba(0,4,15,0.70) 0%, transparent 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.mts-photo-strip__label {
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255,255,255,0.60);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Coloured badge pill */
.mts-photo-strip__tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 10px;
}
.mts-photo-strip__tag--saffron {
color: rgba(255,153,51,0.9);
background: rgba(255,153,51,0.14);
border: 1px solid rgba(255,153,51,0.30);
}
.mts-photo-strip__tag--green {
color: rgba(83,170,0,0.9);
background: rgba(83,170,0,0.14);
border: 1px solid rgba(83,170,0,0.30);
}
.mts-photo-strip__tag--blue {
color: rgba(37, 99, 235, 0.9);
background: rgba(37, 99, 235, 0.10);
border: 1px solid rgba(37, 99, 235, 0.25);
}
/* Reduced motion — disable the hover zoom */
@media (prefers-reduced-motion: reduce) {
.mts-photo-strip img { transition: none; }
.mts-photo-strip:hover img { transform: none; }
}
/* ── assets/design-system/components/footer.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Footer Component
Provides: .mts-footer, brand column, 4-col link grid,
divider, disclaimer, bottom bar.
============================================================ */
.mts-footer {
background: #000C2E;
padding: clamp(60px, 8vw, 96px) 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* ── Top: brand + nav grid — stacked on mobile, side-by-side on desktop ── */
.mts-footer__top {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
margin-bottom: var(--space-9);
}
/* ── Brand column ────────────────────────────────────────────── */
.mts-footer__logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: #F4F4F4;
text-decoration: none;
margin-bottom: var(--space-5);
letter-spacing: -0.02em;
}
.mts-footer__logo:hover { color: #fff; }
.mts-footer__logo-mark {
width: 28px; height: 28px;
background: var(--accent-saffron);
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800; color: #000; flex-shrink: 0;
}
.mts-footer__tagline {
font-size: 13px;
color: #8D8D8D;
line-height: 1.65;
margin-bottom: var(--space-5);
}
/* Trust badge row — compliance indicators in brand column */
.mts-footer__trust {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mts-footer__trust-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 2px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
}
.mts-footer__trust-badge--active {
border-color: rgba(34, 197, 94, 0.32);
color: rgba(111, 220, 140, 0.80);
background: rgba(34, 197, 94, 0.08);
}
.mts-footer__trust-badge--active::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ── Nav link grid — 2-col on mobile, 4-col on desktop ──────── */
.mts-footer__links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
.mts-footer__col-heading {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: #525252;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: var(--space-5);
}
.mts-footer__col a {
display: flex;
align-items: center;
min-height: 2.25rem;
font-size: 13px;
color: #6F6F6F;
text-decoration: none;
margin-bottom: 6px;
padding: 2px 0;
transition: color var(--duration-fast-02);
}
.mts-footer__col a:hover { color: #F4F4F4; }
/* ── Divider ─────────────────────────────────────────────────── */
.mts-footer__divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin-bottom: var(--space-7);
}
/* ── Disclaimer ──────────────────────────────────────────────── */
.mts-footer__disclaimer {
font-size: 12px;
color: #525252;
line-height: 1.65;
max-width: 900px;
margin-bottom: var(--space-7);
padding: var(--space-5) var(--space-6);
border: 1px solid rgba(255, 255, 255, 0.06);
border-left: 2px solid rgba(255, 255, 255, 0.12);
}
/* ── Bottom bar — stacked on mobile, row on desktop ─────────── */
.mts-footer__bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--space-6) 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 12px;
color: #525252;
gap: var(--space-5);
flex-wrap: wrap;
}
.mts-footer__bottom nav {
display: flex;
gap: var(--space-5);
}
.mts-footer__bottom nav a {
color: #525252;
font-size: 12px;
text-decoration: none;
transition: color var(--duration-fast-02);
}
.mts-footer__bottom nav a:hover { color: #F4F4F4; }
.mts-footer__mono-tag {
font-size: 10px;
color: #393939;
font-family: var(--font-mono);
}
/* ── Responsive — mobile-first progressive enhancement ──────── */
@media (min-width: 769px) {
.mts-footer__top { grid-template-columns: 300px 1fr; }
.mts-footer__links { grid-template-columns: repeat(4, 1fr); }
.mts-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* ── assets/design-system/components/section.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Section Component
Provides: base section, colour variants, eyebrow, heading,
body copy, CTA sections, grid layouts, two-col.
Replaces inline: .section, .section-alt, .section-dark,
.section-cta, .section-eyebrow, .section-h2, .section-body,
.two-col, .feature-grid, .step-grid, .section-header
============================================================ */
/* ── Base ───────────────────────────────────────────────────── */
.mts-section {
padding: clamp(72px, 11vw, 120px) 0;
border-top: 1px solid var(--blue-20);
position: relative;
overflow: hidden;
scroll-margin-top: var(--nav-sticky-offset, 5.75rem);
}
.mts-section::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
/* Light blue tint */
.mts-section--alt {
background: #F0F5FF;
}
/* Pure white — deliberate visual break in page rhythm */
.mts-section--white {
background: #FFFFFF;
border-top: 1px solid var(--blue-20);
border-bottom: 1px solid var(--blue-20);
}
/* Dark navy */
.mts-section--dark {
background: #000C2E;
}
/* Dark green */
.mts-section--dark-green {
background: #001A00;
}
/* No top border (first section after hero, etc.) */
.mts-section--borderless {
border-top: none;
}
/* Tight — connector/transitional sections with lower visual weight */
.mts-section--tight {
padding: clamp(44px, 5.5vw, 68px) 0;
}
/* ── Section header block ────────────────────────────────────── */
.mts-section__header {
margin-bottom: clamp(40px, 6vw, 72px);
}
/* ── Eyebrow ─────────────────────────────────────────────────── */
.mts-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
color: var(--interactive);
text-transform: uppercase;
letter-spacing: 0.10em;
margin-bottom: var(--space-4);
}
.mts-section__eyebrow::before {
content: '';
display: block;
width: 20px;
height: 1.5px;
background: currentColor;
flex-shrink: 0;
}
/* Colour variants */
.mts-section__eyebrow--saffron { color: var(--cta-primary); }
.mts-section__eyebrow--green { color: var(--brand-primary); }
.mts-section__eyebrow--white { color: rgba(255,255,255,0.70); }
/* ── Heading ─────────────────────────────────────────────────── */
.mts-section__h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 52px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.mts-section__h2--white { color: #FFFFFF; }
/* ── Body copy ───────────────────────────────────────────────── */
.mts-section__body {
font-size: clamp(15px, 1.3vw, 17px);
color: var(--text-secondary);
line-height: 1.72;
max-width: 65ch;
margin-bottom: var(--space-8);
}
/* Constrain all inline prose paragraphs to readable line length */
.mts-section p,
.mts-section li,
.mts-section--alt p,
.mts-section--alt li,
.mts-section--dark p,
.mts-section--dark li {
max-width: 72ch;
}
.mts-section__body--white { color: rgba(255,255,255,0.72); }
/* ── CTA section (dark full-bleed with accent line) ──────────── */
.mts-section-cta {
padding: clamp(100px, 14vw, 160px) 0;
background: #000C2E;
position: relative;
overflow: hidden;
}
/* Pre-CTA announce strip — saffron-tinted rhythmic break before closing CTA */
.common-pre-cta-announce {
background: rgba(255,153,51,0.08);
border-top: 1px solid rgba(255,153,51,0.24);
border-bottom: 1px solid rgba(255,153,51,0.24);
padding: var(--space-6) 0;
font-size: 13px;
color: var(--text-secondary);
}
.common-pre-cta-announce__inner {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--space-6);
text-align: center;
line-height: 1.55;
}
.common-pre-cta-announce a { color: var(--interactive); text-decoration: none; font-weight: 500; }
.common-pre-cta-announce a:hover { text-decoration: underline; }
.mts-section-cta::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-saffron) 0%, transparent 60%);
}
/* Decorative large arrow watermark */
.mts-section-cta::after {
content: '→';
position: absolute;
right: -40px; top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: 280px;
font-weight: 700;
color: rgba(255,255,255,0.02);
pointer-events: none;
line-height: 1;
letter-spacing: -0.05em;
}
/* Green CTA variant (careers page) */
.mts-section-cta--green {
background: #001500;
}
.mts-section-cta--green::before {
background: linear-gradient(90deg, var(--brand-primary) 0%, transparent 60%);
}
/* Split CTA layout — single col on mobile, side-by-side on desktop */
.mts-cta-split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: center;
}
.mts-cta-checklist {
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
border-radius: 2px;
}
.mts-cta-item {
display: flex;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid rgba(255,255,255,0.08);
align-items: flex-start;
}
.mts-cta-item:last-child { border-bottom: none; }
.mts-cta-item__icon {
color: var(--cta-primary);
font-size: 14px;
flex-shrink: 0;
margin-top: 2px;
width: 18px;
text-align: center;
}
.mts-cta-item strong {
display: block;
font-size: 13px;
font-weight: 600;
color: #fff;
margin-bottom: 2px;
line-height: 1.3;
}
.mts-cta-item span {
font-size: 12px;
color: rgba(255,255,255,0.55);
line-height: 1.5;
}
.mts-cta-checklist-header {
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid rgba(255,255,255,0.12);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.40);
}
/* Green icon variant for careers CTA */
.mts-section-cta--green .mts-cta-item__icon {
color: var(--brand-primary);
}
/* .mts-cta-checklist width cap on tablet — already single-col below 1025px */
@media (min-width: 769px) and (max-width: 1024px) {
.mts-cta-checklist { max-width: 480px; }
}
/* ── Grid layouts ────────────────────────────────────────────── */
/* ── Grid layouts — mobile-first ─────────────────────────────── */
/* 2-column content layout — stacked on mobile */
.mts-two-col {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
/* Feature card grid — single col on mobile */
.mts-feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
/* Step card grid — single col on mobile */
.mts-step-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
/* Dark card grid — single col on mobile */
.mts-dark-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
/* Ecosystem / integration bordered grid — single col on mobile */
.mts-eco-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border: 1px solid var(--blue-20);
background: #fff;
box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
}
/* ── Responsive — mobile-first progressive enhancement ──────── */
/* Tablet (≥ 769px): 2-col for feature/dark/eco grids and step grid */
@media (min-width: 769px) {
.mts-feature-grid { grid-template-columns: 1fr 1fr; }
.mts-dark-grid { grid-template-columns: 1fr 1fr; }
.mts-eco-grid { grid-template-columns: 1fr 1fr; }
.mts-step-grid { grid-template-columns: 1fr 1fr; }
.mts-two-col { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
/* Desktop (≥ 1025px): full layouts */
@media (min-width: 1025px) {
.mts-cta-split { grid-template-columns: 1fr 420px; }
.mts-step-grid { grid-template-columns: repeat(3, 1fr); }
.mts-two-col { gap: var(--space-12); }
}
/* ── assets/design-system/components/content-card.css ─────────────────────────────── */
/* ============================================================
MTSAi Design System — Content Card Variants
Provides: feature-card, step-card, insight-panel, dark-card,
challenge-card, approach-card, list-item patterns
Replaces: .feature-card, .step-card, .dark-card,
.partner-card, .mission-card, .challenge-card,
.approach-card, .insight-panel, .control-item,
.phase-item
============================================================ */
/* ══════════════════════════════════════════════════════════════
FEATURE CARD
White card with coloured top border + lift hover
(was: .feature-card, .partner-card, .mission-card)
════════════════════════════════════════════════════════════════ */
.mts-card--feature {
padding: var(--space-8);
background: #fff;
border: 1px solid var(--blue-20);
border-top: 3px solid var(--interactive);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.mts-card--feature:hover {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
transform: translateY(-2px);
}
/* Primary feature card — prominent, coloured top border + stronger shadow */
.mts-card--feature--primary {
border-top: 4px solid var(--interactive);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
background: var(--blue-10);
}
.mts-card--feature--primary:hover {
box-shadow: 0 12px 32px rgba(37, 99, 235, 0.18);
transform: translateY(-2px);
}
.mts-card--feature--primary .mts-card__label { color: var(--interactive); }
.mts-card--feature--primary .mts-card__num { color: var(--interactive); }
/* Green top-border variant */
.mts-card--feature--green {
border-top-color: var(--brand-primary);
}
.mts-card--feature--green .mts-card__label {
color: var(--brand-primary);
}
/* Saffron top-border variant */
.mts-card--feature--saffron {
border-top-color: var(--cta-primary);
}
.mts-card--feature--saffron .mts-card__label {
color: var(--cta-primary);
}
/* ── Card anatomy ────────────────────────────────────────────── */
.mts-card__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--interactive);
display: block;
margin-bottom: var(--space-4);
}
.mts-card__num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
display: block;
margin-bottom: var(--space-4);
}
.mts-card--feature .mts-card__num { color: var(--interactive); }
.mts-card__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.mts-card__body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════
INSIGHT PANEL
Subtle card used for inline stat/insight callouts
════════════════════════════════════════════════════════════════ */
.mts-card--insight {
padding: var(--space-7);
background: var(--layer-01);
border: 1px solid var(--blue-20);
border-top: 3px solid var(--interactive);
transition: box-shadow 200ms, background 150ms;
}
.mts-card--insight:hover {
background: #fff;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}
.mts-card--insight--green { border-top-color: var(--brand-primary); }
/* ══════════════════════════════════════════════════════════════
DARK CARD
Semi-transparent card for use on dark section backgrounds
════════════════════════════════════════════════════════════════ */
.mts-card--dark {
padding: var(--space-8);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
transition: background 200ms;
}
.mts-card--dark:hover {
background: rgba(255, 255, 255, 0.07);
}
.mts-card--dark .mts-card__num { color: var(--cta-primary); }
.mts-card--dark .mts-card__title { color: #fff; }
.mts-card--dark .mts-card__body { color: rgba(255, 255, 255, 0.65); }
/* ══════════════════════════════════════════════════════════════
CHALLENGE CARD
Red-accented card for problem statements
════════════════════════════════════════════════════════════════ */
.mts-card--challenge {
padding: var(--space-8);
background: #FFF8F8;
border: 1px solid rgba(218, 30, 40, 0.15);
border-left: 4px solid var(--red-50);
margin-bottom: var(--space-5);
transition: box-shadow 200ms;
}
.mts-card--challenge:hover {
box-shadow: 0 6px 20px rgba(218, 30, 40, 0.08);
}
/* ══════════════════════════════════════════════════════════════
APPROACH CARD
Blue-left-border card for solution/approach content
════════════════════════════════════════════════════════════════ */
.mts-card--approach {
padding: var(--space-8);
background: var(--layer-01);
border: 1px solid var(--blue-20);
border-left: 4px solid var(--interactive);
margin-top: var(--space-7);
}
/* ══════════════════════════════════════════════════════════════
LIST ITEM CARD (control-item / phase-item)
Border-bottom row pattern for listed items
════════════════════════════════════════════════════════════════ */
.mts-list-item {
display: flex;
gap: var(--space-6);
padding: var(--space-7) 0;
border-bottom: 1px solid var(--border-subtle);
transition: background 150ms;
}
.mts-list-item:hover { background: var(--layer-01); }
.mts-list-item:last-child { border-bottom: none; }
.mts-list-item__num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--interactive);
letter-spacing: 0.12em;
display: block;
flex-shrink: 0;
padding-top: 2px;
}
.mts-list-item__content h3 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.mts-list-item__content p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════════
ICON LIST
Bordered list of items with a leading icon marker
════════════════════════════════════════════════════════════════ */
.mts-icon-list {
list-style: none;
padding: 0; margin: 0;
}
.mts-icon-list li {
display: flex;
gap: var(--space-5);
align-items: flex-start;
padding: var(--space-6) 0;
border-bottom: 1px solid var(--border-subtle);
}
.mts-icon-list li:last-child { border-bottom: none; }
.mts-icon-list li strong { color: var(--text-primary); }
.mts-icon-list li p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
/* Icon marker — coloured circle with icon/emoji */
.mts-icon-marker {
width: 36px; height: 36px;
border-radius: 50%;
border: 1.5px solid var(--interactive);
color: var(--interactive);
display: flex; align-items: center; justify-content: center;
font-size: 14px; flex-shrink: 0;
}
.mts-icon-marker--green { border-color: var(--brand-primary); color: var(--brand-primary); }
.mts-icon-marker--red { border-color: var(--red-50); color: var(--red-50); }
.mts-icon-marker--saffron { border-color: var(--cta-primary); color: var(--cta-primary); }
/* ── assets/ai-review.css ─────────────────────────────── */
/* ============================================================
AI Review Mode — visible markers for AI-authored content
Remove this stylesheet (and its tags) once review
is complete and decisions are made.
============================================================ */
/* Any element with data-ai-authored gets an outline + badge */
[data-ai-authored] {
position: relative;
outline: 2px dashed rgba(255, 100, 0, 0.55) !important;
outline-offset: -2px;
}
[data-ai-authored]::after {
content: attr(data-ai-authored);
position: absolute;
top: 8px;
right: 8px;
z-index: 9999;
background: #FF6400;
color: #fff;
font-family: monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 2px;
pointer-events: none;
white-space: nowrap;
line-height: 1.4;
}
/* Page-level banner for fully AI-created pages */
.ai-page-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
background: #FF6400;
color: #fff;
font-family: monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
padding: 6px 16px;
pointer-events: none;
}
/* ── assets/site.css ─────────────────────────────── */
/* ============================================================
MTSAi Site CSS — IBM Carbon Edition
Page-level component styles that complement the design system.
All colors via CSS custom properties from tokens/colors.css
============================================================ */
/* ----------------------------------------------------------
Root overrides — MTSAi brand tokens
---------------------------------------------------------- */
:root {
--ink: #000000;
--paper: #FFFFFF;
--brand-green: #22c55e;
--brand-blue: #2563eb;
--alert-red: #D82B2B;
}
body {
background: var(--layer-bg);
color: var(--text-primary);
font-family: var(--font-body);
}
/* ----------------------------------------------------------
Accessibility
---------------------------------------------------------- */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--interactive);
color: var(--text-on-color, #fff);
padding: 8px 16px;
z-index: var(--z-skip-link, 10000);
transition: top 0.2s;
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.skip-link:focus { top: 0; }
/* ----------------------------------------------------------
Scroll Progress
---------------------------------------------------------- */
.red-scroll-progress {
position: fixed;
top: 0; left: 0;
width: 100%; height: 3px;
background: var(--brand-green);
transform-origin: left;
transform: scaleX(0);
z-index: var(--z-scroll-progress, 9999);
transition: transform 80ms linear;
}
/* ----------------------------------------------------------
Navigation
---------------------------------------------------------- */
.nav-item {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
text-decoration: none;
transition: color 0.15s;
}
.nav-item:hover { color: var(--brand-green); }
.nav-active { color: var(--brand-green) !important; }
.trust-dropdown-panel {
position: absolute;
left: 50%;
top: 100%;
margin-top: 1rem;
width: 420px;
transform: translateX(-50%);
border: 2px solid var(--ink);
background: var(--paper);
box-shadow: 4px 4px 0 var(--ink);
overflow: hidden;
pointer-events: none;
z-index: 200;
}
.trust-dropdown-panel.pointer-events-auto { pointer-events: auto; }
.trust-dropdown-panel a {
display: block;
padding: 0.75rem 1rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.trust-dropdown-panel a:hover {
background: rgba(0,0,0,0.04);
color: var(--brand-green);
}
.mobile-menu-panel {
transform: translateX(100%);
transition: transform 0.3s ease-out;
}
/* ----------------------------------------------------------
Hero accent strip
---------------------------------------------------------- */
.hero-accent-strip {
height: 4px;
background: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-blue) 100%);
width: 100%;
}
/* ----------------------------------------------------------
Buttons (sh-btn system)
---------------------------------------------------------- */
.sh-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.625rem 1.25rem;
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
text-decoration: none;
border: 2px solid var(--ink);
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
white-space: nowrap;
}
.sh-btn:active { transform: translate(2px, 2px); }
.btn-primary-action,
.btn-10 {
background: var(--brand-green);
color: #fff;
border-color: var(--brand-green);
box-shadow: 3px 3px 0 var(--ink);
}
.btn-primary-action:hover,
.btn-10:hover {
background: #3d8500;
box-shadow: 5px 5px 0 var(--ink);
}
.btn-hard-shadow,
.btn-2 {
background: var(--paper);
color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.btn-hard-shadow:hover,
.btn-2:hover {
background: var(--ink);
color: var(--paper);
}
.sh-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.65rem; }
/* ----------------------------------------------------------
Cards
---------------------------------------------------------- */
.magic-card {
position: relative;
overflow: hidden;
}
.brutalist-border {
border: 2px solid var(--ink);
}
.shadow-brutal {
box-shadow: 4px 4px 0 var(--ink);
}
.shadow-brutal-sm {
box-shadow: 2px 2px 0 var(--ink);
}
.shadow-brutal:hover,
.shadow-brutal-hover:hover {
box-shadow: 6px 6px 0 var(--ink);
transform: translate(-1px, -1px);
transition: box-shadow 0.15s, transform 0.15s;
}
/* ----------------------------------------------------------
Pulse badge
---------------------------------------------------------- */
.pulse-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.75rem;
border: 1.5px solid var(--ink);
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
background: var(--paper);
}
.pulse-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--brand-green);
animation: pulse-anim 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.pulse-dot-blue { background: var(--brand-blue); }
@keyframes pulse-anim {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.4); }
}
/* ----------------------------------------------------------
Stats
---------------------------------------------------------- */
.stat-number {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.03em;
}
.stat-label {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
opacity: 0.5;
margin-top: 0.25rem;
}
.stat-block {
padding: 1rem 1.25rem;
border: 1px solid rgba(0,0,0,0.12);
}
/* KPI strip */
.kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
background: var(--ink);
color: var(--paper);
}
.kpi-cell {
padding: 1.25rem 1.5rem;
border-right: 2px solid rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.kpi-cell:last-child { border-right: none; }
.kpi-val {
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 900;
line-height: 1;
color: var(--brand-green);
}
.kpi-label {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.5);
}
/* ----------------------------------------------------------
Section label
---------------------------------------------------------- */
.swiss-section-label {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink);
opacity: 0.45;
}
/* ----------------------------------------------------------
Feature cards
---------------------------------------------------------- */
.feature-card {
padding: 1.5rem;
transition: box-shadow 0.15s, transform 0.15s;
}
.feature-card-icon {
width: 2.5rem; height: 2.5rem;
background: var(--brand-green);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
color: #fff;
}
.feature-card.blue .feature-card-icon { background: var(--brand-blue); }
.feature-card-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.feature-card-text {
font-size: 0.875rem;
line-height: 1.65;
color: rgba(0,0,0,0.7);
}
/* ----------------------------------------------------------
Step grid (enforcement integrations etc.)
---------------------------------------------------------- */
.step-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.step-item {
border: 2px solid var(--ink);
padding: 1.5rem;
position: relative;
box-shadow: 3px 3px 0 var(--ink);
}
.step-num {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 900;
line-height: 1;
color: var(--ink);
opacity: 0.08;
margin-bottom: 0.5rem;
}
.step-tag {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--brand-blue);
margin-bottom: 0.5rem;
}
.step-tag span {
display: inline-block;
width: 6px; height: 6px;
background: var(--brand-blue);
border-radius: 50%;
}
.step-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.step-desc {
font-size: 0.875rem;
line-height: 1.65;
color: rgba(0,0,0,0.7);
}
/* ----------------------------------------------------------
Icon list
---------------------------------------------------------- */
.icon-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.icon-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.875rem;
line-height: 1.6;
}
.icon-list-marker {
flex-shrink: 0;
width: 1.5rem; height: 1.5rem;
border: 2px solid var(--brand-green);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
color: var(--brand-green);
margin-top: 1px;
}
.icon-list-marker.red {
border-color: var(--alert-red);
color: var(--alert-red);
}
.icon-list-marker.blue {
border-color: var(--brand-blue);
color: var(--brand-blue);
}
/* ----------------------------------------------------------
Badge wireframe
---------------------------------------------------------- */
.badge-wireframe {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border: 1.5px solid var(--ink);
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
}
/* ----------------------------------------------------------
Shimmer text
---------------------------------------------------------- */
.shimmer-text-green {
background: linear-gradient(90deg, var(--brand-green) 0%, #a3e635 50%, var(--brand-green) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* ----------------------------------------------------------
Progress bars
---------------------------------------------------------- */
.progress-track {
height: 4px;
background: rgba(0,0,0,0.08);
overflow: hidden;
}
.progress-fill {
height: 100%;
width: var(--progress, 0%);
background: var(--brand-green);
transition: width 1s ease;
}
.progress-fill-red { background: var(--alert-red); }
.progress-fill-blue { background: var(--brand-blue); }
/* ----------------------------------------------------------
Diagrams
---------------------------------------------------------- */
.mtsai-diagram-frame {
border: 2px solid var(--ink);
background: #f7f8f5;
padding: 1rem;
margin-top: 1.5rem;
box-shadow: 4px 4px 0 var(--ink);
}
.mtsai-diagram-canvas {
width: 100%;
overflow-x: auto;
}
/* ----------------------------------------------------------
Timeline
---------------------------------------------------------- */
.timeline-container {
position: relative;
padding-left: 2.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.timeline-line-fill {
position: absolute;
left: 0.9rem;
top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--brand-green) 0%, var(--brand-blue) 100%);
}
.timeline-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.timeline-dot {
position: absolute;
left: -1.65rem;
top: 0.75rem;
width: 10px; height: 10px;
background: var(--brand-green);
border: 2px solid var(--ink);
flex-shrink: 0;
}
.timeline-dot-blue { background: var(--brand-blue); }
/* ----------------------------------------------------------
Marquee
---------------------------------------------------------- */
.marquee-container {
display: flex;
overflow: hidden;
white-space: nowrap;
}
.marquee-track {
display: flex;
gap: 2rem;
animation: marquee-scroll var(--duration, 24s) linear infinite;
will-change: transform;
}
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-item {
display: inline-flex;
align-items: center;
padding: 0.4rem 1rem;
border: 1.5px solid var(--ink);
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
white-space: nowrap;
background: var(--paper);
}
.marquee-item-green {
background: var(--brand-green);
color: #fff;
border-color: var(--brand-green);
}
/* ----------------------------------------------------------
State chip
---------------------------------------------------------- */
.state-chip {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
}
/* ----------------------------------------------------------
Scroll reveal animations
---------------------------------------------------------- */
.fade-section,
.blur-fade-in,
.blur-fade-left,
.blur-fade-right {
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-section { transform: translateY(16px); }
.blur-fade-left { transform: translateX(-20px); }
.blur-fade-right { transform: translateX(20px); }
.blur-fade-in { transform: translateY(10px); }
.fade-section.revealed,
.fade-section.visible,
.blur-fade-in.revealed,
.blur-fade-in.visible,
.blur-fade-left.revealed,
.blur-fade-left.visible,
.blur-fade-right.revealed,
.blur-fade-right.visible {
opacity: 1;
transform: none;
}
/* Stagger delays via JS (--blur-delay custom prop) */
.blur-fade-in,
.blur-fade-left,
.blur-fade-right {
transition-delay: var(--blur-delay, 0ms);
}
/* ----------------------------------------------------------
Hero animations
---------------------------------------------------------- */
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-animate-1 { animation: hero-fade-up 0.5s ease forwards; animation-delay: 0.1s; opacity: 0; }
.hero-animate-2 { animation: hero-fade-up 0.6s ease forwards; animation-delay: 0.2s; opacity: 0; }
.hero-animate-3 { animation: hero-fade-up 0.6s ease forwards; animation-delay: 0.35s; opacity: 0; }
.hero-animate-4 { animation: hero-fade-up 0.6s ease forwards; animation-delay: 0.5s; opacity: 0; }
/* ----------------------------------------------------------
Retro grid (subtle background pattern)
---------------------------------------------------------- */
.retro-grid-animated {
background-image:
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
background-size: 40px 40px;
}
/* ----------------------------------------------------------
Halftone & overlay cleanup (neutralized)
These classes exist in old pages but we render them clean.
---------------------------------------------------------- */
.bg-halftone,
.bg-halftone-sm,
.noise-bg,
.swiss-overlay,
.bg-grid-lines,
.halftone-animated-green {
display: none !important;
}
/* ----------------------------------------------------------
Footer marquee
---------------------------------------------------------- */
.animate-marquee {
animation: marquee-scroll 28s linear infinite;
}
.footer-marquee-item { color: rgba(255,255,255,0.5); }
/* ----------------------------------------------------------
Error toast
---------------------------------------------------------- */
.state-alert {
background: var(--alert-red);
color: #fff;
border: 2px solid var(--ink);
font-family: var(--font-mono);
}
/* ----------------------------------------------------------
Misc utility classes used in pages
---------------------------------------------------------- */
.animate-stagger { opacity: 1; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.bg-paper { background-color: var(--paper); }
.bg-ink { background-color: var(--ink); }
.text-paper { color: var(--paper); }
.text-ink { color: var(--ink); }
.text-brand-green { color: var(--brand-green); }
.text-brand-blue { color: var(--brand-blue); }
.text-alert-red { color: var(--alert-red); }
.border-ink { border-color: var(--ink); }
.border-brand-green { border-color: var(--brand-green); }
/* Material Symbols used inline */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
line-height: 1;
}
.icon-bounce {
animation: icon-bounce-anim 2s ease-in-out infinite;
}
@keyframes icon-bounce-anim {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* ============================================================
PEER-SITE POLISH PACK — 7 enhancement tracks
Visual/interactive improvements inspired by Stripe, Linear,
Populus, Replica. CSS-only, no text changes.
============================================================ */
/* Track 6 — Anchor offset below sticky nav (smooth scroll already set above) */
html { scroll-padding-top: 96px; }
/* Track 1 — Softer section transitions (gradient fade at dark section edges) */
.trust-why-dark, .mts-section-cta-dark, .disclosure-panel,
.gov-stats-dark, .mts-section-stats-dark, .mts-section-cta,
.err-page {
position: relative;
}
.trust-why-dark::after,
.mts-section-cta-dark::after,
.gov-stats-dark::after,
.mts-section-stats-dark::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 40px;
background: linear-gradient(to bottom, rgba(255,255,255,0.015), transparent);
pointer-events: none;
z-index: 1;
}
.trust-why-dark > *,
.mts-section-cta-dark > *,
.gov-stats-dark > *,
.mts-section-stats-dark > * { position: relative; z-index: 2; }
/* Track 2 — Unified card hover system (additive — doesn't override per-card colors) */
.trust-domain-card, .sec-control-card, .csg-item, .audience-card,
.fast-lane-item, .ctrl-card, .mts-card, .mts-card--feature,
.mts-card--approach, .mts-card--kpi, .partner-card,
.step-card, .flow-step, .exit-principle, .privacy-col,
.mts-metric-card, .engine-cell, .evidence-item {
transition:
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.trust-domain-card, a.sec-control-card, a.audience-card,
a.fast-lane-item, a.ctrl-card, a.mts-card, a.partner-card {
cursor: pointer;
}
/* Unified lift (applies only if card doesn't already define its own hover transform) */
.audience-card:hover, .mts-card:hover, .partner-card:hover,
.step-card:hover, .flow-step:hover, .engine-cell:hover,
.evidence-item:hover, .privacy-col:hover, .mts-metric-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
/* Track 3 — Scroll-linked nav polish */
.mts-nav.scrolled {
box-shadow:
0 1px 0 var(--border-subtle),
0 4px 16px rgba(0, 0, 0, 0.04);
transition: box-shadow 200ms ease, backdrop-filter 200ms ease;
}
/* Track 5 — Focus ring + link underline polish */
:focus-visible {
outline: 2px solid var(--accent-saffron);
outline-offset: 2px;
}
.mts-article-prose a,
.mts-section-body a,
.trust-body a,
p a:not(.mts-btn):not(.mts-nav__link):not(.mts-footer__link) {
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-thickness 150ms ease;
}
.mts-article-prose a:hover,
.mts-section-body a:hover,
.trust-body a:hover,
p a:not(.mts-btn):not(.mts-nav__link):not(.mts-footer__link):hover {
text-decoration-thickness: 2px;
}
/* Track 7 — Section divider accent utility */
.section-divider {
display: block;
width: 32px;
height: 2px;
background: var(--accent-saffron);
border: none;
margin: var(--space-8) auto;
border-radius: 1px;
}
.section-divider--centered {
width: 100%;
height: 1px;
background: var(--border-subtle);
position: relative;
margin: var(--space-12) 0;
}
.section-divider--centered::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 6px; height: 6px;
background: var(--accent-saffron);
border-radius: 50%;
}
/* Track 4 — Count-up animation (CSS does nothing; JS handles it — see site.js) */
[data-count-up] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.trust-domain-card, .sec-control-card, .csg-item, .audience-card,
.fast-lane-item, .ctrl-card, .mts-card {
transition: none;
}
}
/* ============================================================
MTSAi DS v2: Completion Pack
6 new components — slider, multiselect, timeline, kbd,
action-menu, tag-group — closing gaps vs IBM Carbon, Polaris,
Atlassian, Material, Primer.
============================================================ */
/* ── slider.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Slider / Range Input
Single-thumb and dual-thumb (range) variants
============================================================ */
.mts-slider {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
}
.mts-slider__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
}
.mts-slider__label {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.mts-slider__value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--interactive);
font-variant-numeric: tabular-nums;
}
/* Native input[type=range] styling — cross-browser */
.mts-slider__input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--layer-02);
border-radius: 2px;
outline: none;
cursor: pointer;
transition: background 150ms ease;
}
.mts-slider__input:hover { background: var(--border-subtle); }
/* Thumb — WebKit */
.mts-slider__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--interactive);
border: 2px solid #fff;
border-radius: 50%;
cursor: grab;
box-shadow: 0 2px 6px rgba(13, 148, 136, 0.30);
transition: transform 150ms ease, box-shadow 150ms ease;
}
.mts-slider__input::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.15), 0 2px 6px rgba(13, 148, 136, 0.30);
}
.mts-slider__input::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.10);
}
/* Thumb — Firefox */
.mts-slider__input::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--interactive);
border: 2px solid #fff;
border-radius: 50%;
cursor: grab;
box-shadow: 0 2px 6px rgba(13, 148, 136, 0.30);
}
.mts-slider__input:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--accent-saffron);
outline-offset: 2px;
}
.mts-slider__input:focus-visible::-moz-range-thumb {
outline: 2px solid var(--accent-saffron);
outline-offset: 2px;
}
/* Ticks / labels under the track */
.mts-slider__ticks {
display: flex;
justify-content: space-between;
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
letter-spacing: 0.05em;
}
.mts-slider__tick {
position: relative;
}
.mts-slider__tick::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 4px;
background: var(--border-subtle);
}
/* Helper text */
.mts-slider__helper {
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.55;
}
/* Color variants */
.mts-slider--saffron .mts-slider__input::-webkit-slider-thumb {
background: var(--accent-saffron);
box-shadow: 0 2px 6px rgba(255, 153, 51, 0.30);
}
.mts-slider--saffron .mts-slider__input::-moz-range-thumb {
background: var(--accent-saffron);
}
.mts-slider--saffron .mts-slider__value { color: var(--accent-saffron); }
.mts-slider--green .mts-slider__input::-webkit-slider-thumb {
background: var(--brand-primary);
box-shadow: 0 2px 6px rgba(83, 170, 0, 0.30);
}
.mts-slider--green .mts-slider__input::-moz-range-thumb {
background: var(--brand-primary);
}
/* Disabled */
.mts-slider--disabled,
.mts-slider__input:disabled {
opacity: 0.4;
pointer-events: none;
}
/* Range (dual-thumb) — uses two overlaid inputs with JS coordination */
.mts-slider--range {
position: relative;
padding-top: var(--space-3);
}
.mts-slider--range .mts-slider__input {
position: absolute;
left: 0; right: 0;
pointer-events: none;
background: transparent;
}
.mts-slider--range .mts-slider__input::-webkit-slider-thumb { pointer-events: auto; }
.mts-slider--range .mts-slider__input::-moz-range-thumb { pointer-events: auto; }
.mts-slider--range .mts-slider__track {
position: relative;
height: 4px;
background: var(--layer-02);
border-radius: 2px;
}
.mts-slider--range .mts-slider__track-fill {
position: absolute;
top: 0; bottom: 0;
background: var(--interactive);
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
.mts-slider__input,
.mts-slider__input::-webkit-slider-thumb,
.mts-slider__input::-moz-range-thumb { transition: none; }
}
/* ── multiselect.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Multiselect (Combobox with Chip Display)
Extends combobox.css pattern for multi-selection use cases
============================================================ */
.mts-multiselect {
position: relative;
width: 100%;
min-height: 44px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
background: var(--layer-bg);
cursor: text;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mts-multiselect:hover { border-color: var(--border-strong); }
.mts-multiselect:focus-within {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10);
}
.mts-multiselect[aria-invalid="true"] {
border-color: var(--support-error, #DA1E28);
}
.mts-multiselect[aria-invalid="true"]:focus-within {
box-shadow: 0 0 0 3px rgba(218, 30, 40, 0.10);
}
/* Chips container + inline text input */
.mts-multiselect__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.mts-multiselect__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
background: rgba(13, 148, 136, 0.08);
color: var(--interactive);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
border-radius: var(--radius-sm);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
animation: ms-chip-in 180ms ease;
}
@keyframes ms-chip-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.mts-multiselect__chip-close {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: inherit;
opacity: 0.6;
font-size: 14px;
line-height: 1;
transition: opacity 150ms ease;
}
.mts-multiselect__chip-close:hover { opacity: 1; }
.mts-multiselect__input {
flex: 1;
min-width: 80px;
border: none;
outline: none;
padding: 4px 0;
font-family: var(--font-ui);
font-size: 14px;
background: transparent;
color: var(--text-primary);
}
.mts-multiselect__input::placeholder {
color: var(--text-disabled);
}
/* Dropdown panel */
.mts-multiselect__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.10));
max-height: 280px;
overflow-y: auto;
z-index: 1000;
display: none;
padding: var(--space-2) 0;
}
.mts-multiselect[aria-expanded="true"] .mts-multiselect__dropdown {
display: block;
animation: ms-drop-in 180ms ease;
}
@keyframes ms-drop-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mts-multiselect__option {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
cursor: pointer;
font-family: var(--font-ui);
font-size: 14px;
color: var(--text-primary);
transition: background 120ms ease;
}
.mts-multiselect__option:hover,
.mts-multiselect__option:focus {
background: var(--layer-01);
outline: none;
}
.mts-multiselect__option[aria-selected="true"] {
background: rgba(13, 148, 136, 0.06);
color: var(--interactive);
font-weight: 500;
}
.mts-multiselect__option[aria-selected="true"]::before {
content: '✓';
color: var(--interactive);
font-weight: 600;
font-size: 13px;
width: 14px;
display: inline-block;
}
.mts-multiselect__option:not([aria-selected="true"])::before {
content: '';
width: 14px;
display: inline-block;
}
.mts-multiselect__option--disabled,
.mts-multiselect__option[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Group heading inside dropdown */
.mts-multiselect__group-label {
padding: var(--space-2) var(--space-4);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
}
.mts-multiselect__empty {
padding: var(--space-4);
text-align: center;
font-family: var(--font-ui);
font-size: 13px;
color: var(--text-secondary);
}
/* Disabled multiselect */
.mts-multiselect--disabled {
background: var(--layer-01);
pointer-events: none;
opacity: 0.6;
}
/* ── timeline.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Timeline
Vertical and horizontal variants for events, history, roadmaps
============================================================ */
.mts-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-left: var(--space-8);
}
/* Vertical connector line */
.mts-timeline::before {
content: '';
position: absolute;
left: 11px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border-subtle);
border-radius: 1px;
}
.mts-timeline__item {
position: relative;
padding-left: var(--space-4);
}
.mts-timeline__marker {
position: absolute;
left: -25px;
top: 6px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--layer-bg);
border: 3px solid var(--interactive);
box-shadow: 0 0 0 4px var(--layer-bg);
z-index: 1;
}
/* Status markers */
.mts-timeline__item--current .mts-timeline__marker {
background: var(--interactive);
border-color: var(--interactive);
animation: tl-pulse 2s ease-in-out infinite;
}
.mts-timeline__item--complete .mts-timeline__marker {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
.mts-timeline__item--complete .mts-timeline__marker::after {
content: '✓';
color: #fff;
font-size: 9px;
font-weight: 700;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mts-timeline__item--upcoming .mts-timeline__marker {
background: var(--layer-bg);
border-color: var(--border-subtle);
}
.mts-timeline__item--warning .mts-timeline__marker {
background: var(--accent-saffron);
border-color: var(--accent-saffron);
}
@keyframes tl-pulse {
0%, 100% { box-shadow: 0 0 0 4px var(--layer-bg); }
50% { box-shadow: 0 0 0 4px var(--layer-bg), 0 0 0 8px rgba(13, 148, 136, 0.20); }
}
.mts-timeline__date {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
margin-bottom: var(--space-2);
display: block;
}
.mts-timeline__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-2);
line-height: 1.3;
}
.mts-timeline__body {
font-family: var(--font-ui);
font-size: 13px;
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
}
/* Metadata badges inside timeline item */
.mts-timeline__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.mts-timeline__meta-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 2px 8px;
background: var(--layer-01);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
border-radius: var(--radius-xs, 2px);
}
/* --------- Horizontal variant --------- */
.mts-timeline--horizontal {
flex-direction: row;
padding-left: 0;
padding-top: var(--space-10);
overflow-x: auto;
gap: 0;
}
.mts-timeline--horizontal::before {
left: 0;
right: 0;
top: 21px;
bottom: auto;
width: auto;
height: 2px;
}
.mts-timeline--horizontal .mts-timeline__item {
flex: 1;
min-width: 180px;
padding-left: 0;
padding-top: var(--space-6);
text-align: center;
}
.mts-timeline--horizontal .mts-timeline__marker {
left: 50%;
top: -35px;
transform: translateX(-50%);
}
.mts-timeline--horizontal .mts-timeline__date { margin-top: var(--space-2); }
/* --------- Compact variant --------- */
.mts-timeline--compact { gap: var(--space-5); }
.mts-timeline--compact .mts-timeline__title { font-size: 14px; }
.mts-timeline--compact .mts-timeline__body { font-size: 12px; }
/* --------- Dark section variant --------- */
.mts-timeline--on-dark { padding-left: var(--space-8); }
.mts-timeline--on-dark::before { background: rgba(255,255,255,0.15); }
.mts-timeline--on-dark .mts-timeline__marker {
background: #050505;
box-shadow: 0 0 0 4px #050505;
}
.mts-timeline--on-dark .mts-timeline__date { color: rgba(255,255,255,0.55); }
.mts-timeline--on-dark .mts-timeline__title { color: #fff; }
.mts-timeline--on-dark .mts-timeline__body { color: rgba(255,255,255,0.70); }
.mts-timeline--on-dark .mts-timeline__meta-tag {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.75);
}
@media (prefers-reduced-motion: reduce) {
.mts-timeline__item--current .mts-timeline__marker { animation: none; }
}
/* ── kbd.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Keyboard Key (kbd)
Display keyboard shortcuts like CmdK
============================================================ */
kbd,
.mts-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--layer-01);
border: 1px solid var(--border-subtle);
border-bottom-width: 2px;
border-radius: var(--radius-xs, 3px);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
line-height: 1;
color: var(--text-primary);
white-space: nowrap;
vertical-align: middle;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
/* Groups of keys separated by "+" */
.mts-kbd-group {
display: inline-flex;
align-items: center;
gap: 3px;
}
.mts-kbd-group .mts-kbd + .mts-kbd::before,
.mts-kbd-group kbd + kbd::before {
content: '+';
display: inline-block;
margin: 0 4px 0 -7px;
color: var(--text-secondary);
font-weight: 400;
font-family: var(--font-ui);
}
/* Sizes */
.mts-kbd--sm {
min-width: 18px;
height: 18px;
font-size: 10px;
padding: 0 4px;
}
.mts-kbd--lg {
min-width: 28px;
height: 28px;
font-size: 13px;
padding: 0 10px;
}
/* On dark surface */
.mts-kbd--on-dark,
.mts-kbd-group--on-dark .mts-kbd {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.30);
}
/* ── action-menu.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Action Menu / Action List
Richer dropdown pattern with sections, dividers, icons,
destructive variants. Complements dropdown.css.
============================================================ */
.mts-action-menu {
position: relative;
display: inline-block;
}
.mts-action-menu__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 8px 14px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease;
}
.mts-action-menu__trigger:hover {
background: var(--layer-01);
border-color: var(--border-strong);
}
.mts-action-menu__trigger[aria-expanded="true"] {
background: var(--layer-01);
}
.mts-action-menu__trigger-icon {
width: 12px;
height: 12px;
transition: transform 150ms ease;
}
.mts-action-menu__trigger[aria-expanded="true"] .mts-action-menu__trigger-icon {
transform: rotate(180deg);
}
/* Panel */
.mts-action-menu__panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 220px;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.12));
padding: var(--space-2);
z-index: 1000;
display: none;
animation: am-panel-in 180ms ease;
}
.mts-action-menu__panel--right { left: auto; right: 0; }
.mts-action-menu__panel--up { top: auto; bottom: calc(100% + 4px); }
.mts-action-menu[aria-expanded="true"] .mts-action-menu__panel,
.mts-action-menu__panel[data-open="true"] {
display: block;
}
@keyframes am-panel-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Sections */
.mts-action-menu__section + .mts-action-menu__section {
border-top: 1px solid var(--border-subtle);
margin-top: var(--space-2);
padding-top: var(--space-2);
}
.mts-action-menu__section-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
padding: var(--space-2) var(--space-3);
display: block;
}
/* Items */
.mts-action-menu__item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-xs, 3px);
background: none;
border: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
text-align: left;
cursor: pointer;
transition: background 120ms ease;
text-decoration: none;
}
.mts-action-menu__item:hover,
.mts-action-menu__item:focus {
background: var(--layer-01);
outline: none;
}
.mts-action-menu__item[aria-disabled="true"],
.mts-action-menu__item:disabled {
color: var(--text-disabled);
cursor: not-allowed;
pointer-events: none;
}
/* Item icon */
.mts-action-menu__item-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--text-secondary);
}
.mts-action-menu__item:hover .mts-action-menu__item-icon { color: var(--text-primary); }
/* Trailing content (badge, kbd shortcut) */
.mts-action-menu__item-trail {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
/* Destructive variant */
.mts-action-menu__item--danger {
color: var(--support-error, #DA1E28);
}
.mts-action-menu__item--danger .mts-action-menu__item-icon { color: currentColor; }
.mts-action-menu__item--danger:hover {
background: rgba(218, 30, 40, 0.06);
}
/* Divider (explicit
or .mts-action-menu__divider) */
.mts-action-menu__divider,
.mts-action-menu hr {
border: none;
border-top: 1px solid var(--border-subtle);
margin: var(--space-2) 0;
height: 0;
}
/* Dark theme variant */
.mts-action-menu--on-dark .mts-action-menu__panel {
background: #0f172a;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50);
}
.mts-action-menu--on-dark .mts-action-menu__item { color: rgba(255, 255, 255, 0.92); }
.mts-action-menu--on-dark .mts-action-menu__item:hover { background: rgba(255, 255, 255, 0.08); }
.mts-action-menu--on-dark .mts-action-menu__section-label { color: rgba(255, 255, 255, 0.55); }
.mts-action-menu--on-dark .mts-action-menu__divider { border-top-color: rgba(255, 255, 255, 0.12); }
/* ── tag-group.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Tag Group
Collections of tags with optional removal + overflow handling
Complements tag.css
============================================================ */
.mts-tag-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.mts-tag-group--tight {
gap: 4px;
}
.mts-tag-group--vertical {
flex-direction: column;
align-items: flex-start;
}
/* Group label (leading) */
.mts-tag-group__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
margin-right: var(--space-2);
}
/* Removable tag — extends .mts-tag */
.mts-tag--removable {
padding-right: 4px;
cursor: default;
}
.mts-tag__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 4px;
padding: 0;
background: none;
border: none;
color: inherit;
opacity: 0.55;
cursor: pointer;
border-radius: 50%;
font-size: 13px;
line-height: 1;
transition: opacity 150ms ease, background 150ms ease;
}
.mts-tag__remove:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.08);
}
.mts-tag__remove:focus-visible {
outline: 2px solid currentColor;
outline-offset: 1px;
}
/* Overflow handling — show "+N more" */
.mts-tag-group__overflow {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
background: var(--layer-01);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
border-radius: var(--radius-full, 9999px);
cursor: default;
}
/* Interactive (filter pill) variant — click to toggle */
.mts-tag--filter {
cursor: pointer;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.mts-tag--filter:hover {
background: var(--layer-02);
}
.mts-tag--filter[aria-pressed="true"],
.mts-tag--filter.is-active {
background: var(--interactive);
color: #fff;
border-color: var(--interactive);
}
/* Group separator — when multiple groups stack */
.mts-tag-group + .mts-tag-group {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--border-subtle);
}
/* ============================================================
MTSAi DS v2: Completion Pack — Tier 2
4 additional components: blankslate, progress-tracker,
time-picker, carousel
============================================================ */
/* ── blankslate.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Blankslate (rich empty state)
Upgraded empty-state with illustration slot, headline, body,
primary + secondary CTAs. Use for: no search results, empty
lists, first-time-use placeholders, data-not-yet-loaded.
============================================================ */
.mts-blankslate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(var(--space-10), 6vw, var(--space-14)) var(--space-6);
background: var(--layer-bg);
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-md);
max-width: 560px;
margin: 0 auto;
gap: var(--space-5);
}
/* Illustration / icon slot (96×96 recommended) */
.mts-blankslate__visual {
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
background: var(--layer-01);
border-radius: 50%;
flex-shrink: 0;
}
.mts-blankslate__visual svg {
width: 48px;
height: 48px;
opacity: 0.7;
}
/* Smaller icon variant (e.g. no search results) */
.mts-blankslate__visual--sm {
width: 64px;
height: 64px;
}
.mts-blankslate__visual--sm svg { width: 32px; height: 32px; }
.mts-blankslate__heading {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.015em;
margin: 0;
}
.mts-blankslate__body {
font-family: var(--font-ui);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
margin: 0;
max-width: 420px;
}
.mts-blankslate__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
margin-top: var(--space-3);
}
/* Variants */
.mts-blankslate--compact {
padding: var(--space-8) var(--space-5);
gap: var(--space-3);
}
.mts-blankslate--compact .mts-blankslate__visual { width: 56px; height: 56px; }
.mts-blankslate--compact .mts-blankslate__visual svg { width: 28px; height: 28px; }
.mts-blankslate--compact .mts-blankslate__heading { font-size: 16px; }
.mts-blankslate--compact .mts-blankslate__body { font-size: 13px; }
.mts-blankslate--left {
align-items: flex-start;
text-align: left;
}
.mts-blankslate--left .mts-blankslate__actions { justify-content: flex-start; }
/* No border variant (for in-page embedding) */
.mts-blankslate--plain {
border: none;
background: transparent;
}
/* Error variant (e.g. load failed) */
.mts-blankslate--error .mts-blankslate__visual {
background: rgba(218, 30, 40, 0.08);
color: var(--support-error, #DA1E28);
}
/* Success variant */
.mts-blankslate--success .mts-blankslate__visual {
background: rgba(83, 170, 0, 0.08);
color: var(--brand-primary);
}
/* On dark background */
.mts-blankslate--on-dark {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.18);
}
.mts-blankslate--on-dark .mts-blankslate__heading { color: #fff; }
.mts-blankslate--on-dark .mts-blankslate__body { color: rgba(255, 255, 255, 0.65); }
.mts-blankslate--on-dark .mts-blankslate__visual {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.60);
}
/* ── progress-tracker.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Progress Tracker
Wider than stepper: horizontal + vertical, per-step states
(complete, current, pending, error), optional % bar, optional
description/estimate per step.
============================================================ */
.mts-progress-tracker {
position: relative;
display: flex;
gap: 0;
}
/* --- Horizontal (default) --- */
.mts-progress-tracker--horizontal .mts-pt__step {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 36px;
padding-inline: var(--space-3);
}
.mts-progress-tracker--horizontal .mts-pt__step::after {
content: '';
position: absolute;
top: 14px;
left: 50%;
right: -50%;
height: 2px;
background: var(--border-subtle);
z-index: 0;
}
.mts-progress-tracker--horizontal .mts-pt__step:last-child::after { display: none; }
/* --- Vertical --- */
.mts-progress-tracker--vertical {
flex-direction: column;
gap: var(--space-6);
padding-left: var(--space-8);
}
.mts-progress-tracker--vertical .mts-pt__step {
position: relative;
padding-left: var(--space-2);
}
.mts-progress-tracker--vertical .mts-pt__marker {
position: absolute;
left: -27px;
top: 0;
}
.mts-progress-tracker--vertical .mts-pt__step:not(:last-child)::after {
content: '';
position: absolute;
left: -20px;
top: 28px;
bottom: -24px;
width: 2px;
background: var(--border-subtle);
}
/* Marker (circle with number or checkmark) */
.mts-pt__marker {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--layer-bg);
border: 2px solid var(--border-subtle);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
z-index: 1;
position: relative;
transition: all 200ms ease;
}
.mts-progress-tracker--horizontal .mts-pt__marker {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
/* Step states */
.mts-pt__step--complete .mts-pt__marker {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: #fff;
}
.mts-pt__step--complete .mts-pt__marker::after {
content: '✓';
font-size: 14px;
}
.mts-pt__step--complete .mts-pt__marker { font-size: 0; }
.mts-pt__step--current .mts-pt__marker {
background: var(--interactive);
border-color: var(--interactive);
color: #fff;
box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18);
animation: pt-pulse 2s ease-in-out infinite;
}
.mts-pt__step--error .mts-pt__marker {
background: var(--support-error, #DA1E28);
border-color: var(--support-error, #DA1E28);
color: #fff;
}
.mts-pt__step--error .mts-pt__marker::after { content: '!'; }
.mts-pt__step--error .mts-pt__marker { font-size: 0; }
/* Connector fill (progress state) */
.mts-pt__step--complete + .mts-pt__step::after,
.mts-pt__step--complete::after {
background: var(--brand-primary);
}
.mts-progress-tracker--vertical .mts-pt__step--complete:not(:last-child)::after {
background: var(--brand-primary);
}
@keyframes pt-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18); }
50% { box-shadow: 0 0 0 8px rgba(13, 148, 136, 0.10); }
}
/* Step content */
.mts-pt__label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-top: var(--space-3);
line-height: 1.35;
}
.mts-progress-tracker--vertical .mts-pt__label { margin-top: 4px; }
.mts-pt__description {
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.55;
margin-top: 4px;
}
.mts-pt__estimate {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 6px;
}
.mts-pt__step--current .mts-pt__label { color: var(--interactive); }
.mts-pt__step--error .mts-pt__label { color: var(--support-error, #DA1E28); }
/* Linear progress bar (optional, above step list) */
.mts-progress-tracker__bar {
position: relative;
height: 4px;
background: var(--layer-02);
border-radius: 2px;
overflow: hidden;
margin-bottom: var(--space-6);
}
.mts-progress-tracker__bar-fill {
height: 100%;
background: var(--interactive);
border-radius: 2px;
transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mts-progress-tracker__percentage {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--space-3);
display: block;
font-variant-numeric: tabular-nums;
}
/* On dark */
.mts-progress-tracker--on-dark .mts-pt__marker {
background: #0f172a;
border-color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.70);
}
.mts-progress-tracker--on-dark .mts-pt__step:not(.mts-pt__step--complete):not(.mts-pt__step--current):not(.mts-pt__step--error)::after {
background: rgba(255, 255, 255, 0.15);
}
.mts-progress-tracker--on-dark .mts-pt__label { color: #fff; }
.mts-progress-tracker--on-dark .mts-pt__description { color: rgba(255, 255, 255, 0.60); }
@media (prefers-reduced-motion: reduce) {
.mts-pt__step--current .mts-pt__marker { animation: none; }
.mts-progress-tracker__bar-fill { transition: none; }
}
/* ── time-picker.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Time Picker
Hours + minutes selection with 12h/24h mode and AM/PM toggle.
Uses the same input + dropdown pattern as date picker.
============================================================ */
.mts-time-picker {
position: relative;
display: inline-block;
width: 100%;
max-width: 180px;
}
.mts-time-picker__input-wrapper {
position: relative;
}
.mts-time-picker__input {
width: 100%;
padding: 10px 40px 10px 12px;
font-family: var(--font-mono);
font-size: 14px;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
outline: none;
cursor: pointer;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mts-time-picker__input:focus,
.mts-time-picker__input:focus-within {
border-color: var(--interactive);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10);
}
.mts-time-picker__icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
pointer-events: none;
width: 16px;
height: 16px;
}
/* Dropdown panel with hour/minute columns */
.mts-time-picker__panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
display: none;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.12));
padding: var(--space-3);
z-index: 1000;
min-width: 220px;
animation: tp-panel-in 180ms ease;
}
.mts-time-picker[aria-expanded="true"] .mts-time-picker__panel {
display: flex;
gap: var(--space-2);
}
@keyframes tp-panel-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mts-time-picker__column {
flex: 1;
max-height: 220px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
border: 1px solid transparent;
border-radius: var(--radius-xs, 3px);
}
.mts-time-picker__column-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--space-2);
padding: 0 4px;
}
.mts-time-picker__option {
padding: 6px 12px;
text-align: center;
font-family: var(--font-mono);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
background: transparent;
border: none;
border-radius: var(--radius-xs, 3px);
cursor: pointer;
transition: background 120ms ease;
}
.mts-time-picker__option:hover {
background: var(--layer-01);
}
.mts-time-picker__option[aria-selected="true"],
.mts-time-picker__option.is-active {
background: var(--interactive);
color: #fff;
font-weight: 600;
}
/* AM/PM toggle (12h mode only) */
.mts-time-picker__ampm {
flex-direction: column;
max-height: none;
width: 60px;
padding: 4px;
justify-content: flex-start;
padding-top: calc(var(--space-2) + 18px);
}
.mts-time-picker__ampm .mts-time-picker__option {
padding: 10px;
font-weight: 600;
}
/* Compact variant */
.mts-time-picker--compact {
max-width: 140px;
}
.mts-time-picker--compact .mts-time-picker__input {
font-size: 13px;
padding: 8px 32px 8px 10px;
}
/* Disabled */
.mts-time-picker--disabled .mts-time-picker__input {
background: var(--layer-01);
color: var(--text-disabled);
cursor: not-allowed;
pointer-events: none;
}
/* Error state */
.mts-time-picker[aria-invalid="true"] .mts-time-picker__input {
border-color: var(--support-error, #DA1E28);
}
.mts-time-picker[aria-invalid="true"] .mts-time-picker__input:focus {
box-shadow: 0 0 0 3px rgba(218, 30, 40, 0.10);
}
/* ── carousel.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Carousel / Slider
Generic content carousel with scroll-snap, keyboard nav,
pagination dots, prev/next buttons, optional auto-advance.
Not just for hero — use for partner logos, case cards, testimonials.
============================================================ */
.mts-carousel {
position: relative;
width: 100%;
}
/* Slide viewport — horizontal scroll with snap */
.mts-carousel__viewport {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
gap: var(--space-4);
padding-bottom: var(--space-2); /* Space for visible scrollbar dots */
scroll-behavior: smooth;
}
.mts-carousel__viewport::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
.mts-carousel__slide {
flex: 0 0 auto;
scroll-snap-align: start;
scroll-snap-stop: always;
width: clamp(280px, 30vw, 360px);
}
/* Slide width variants */
.mts-carousel--wide .mts-carousel__slide { width: clamp(320px, 50vw, 560px); }
.mts-carousel--narrow .mts-carousel__slide { width: clamp(200px, 22vw, 260px); }
.mts-carousel--full .mts-carousel__slide { width: 100%; }
/* Nav buttons */
.mts-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.10));
z-index: 2;
transition: background 150ms ease, transform 150ms ease, opacity 150ms ease;
}
.mts-carousel__nav:hover {
background: var(--layer-01);
transform: translateY(-50%) scale(1.05);
}
.mts-carousel__nav:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.mts-carousel__nav--prev { left: -20px; }
.mts-carousel__nav--next { right: -20px; }
@media (max-width: 640px) {
.mts-carousel__nav { display: none; }
}
/* Pagination dots */
.mts-carousel__dots {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
}
.mts-carousel__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-subtle);
border: none;
padding: 0;
cursor: pointer;
transition: background 200ms ease, width 200ms ease;
}
.mts-carousel__dot:hover { background: var(--text-disabled); }
.mts-carousel__dot[aria-current="true"],
.mts-carousel__dot.is-active {
background: var(--interactive);
width: 24px;
border-radius: 4px;
}
/* Progress bar variant (instead of dots) */
.mts-carousel__progress {
position: relative;
height: 2px;
background: var(--border-subtle);
border-radius: 1px;
margin-top: var(--space-5);
overflow: hidden;
}
.mts-carousel__progress-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: var(--interactive);
border-radius: 1px;
transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Caption below slide */
.mts-carousel__caption {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
text-align: center;
margin-top: var(--space-3);
letter-spacing: 0.05em;
}
/* On dark surface */
.mts-carousel--on-dark .mts-carousel__nav {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}
.mts-carousel--on-dark .mts-carousel__nav:hover {
background: rgba(255, 255, 255, 0.16);
}
.mts-carousel--on-dark .mts-carousel__dot { background: rgba(255, 255, 255, 0.25); }
.mts-carousel--on-dark .mts-carousel__dot[aria-current="true"] { background: var(--accent-saffron); }
.mts-carousel--on-dark .mts-carousel__progress { background: rgba(255, 255, 255, 0.15); }
/* No-snap variant — continuous scroll (good for logo strips) */
.mts-carousel--continuous .mts-carousel__viewport {
scroll-snap-type: none;
}
@media (prefers-reduced-motion: reduce) {
.mts-carousel__viewport,
.mts-carousel__dot,
.mts-carousel__progress-fill { transition: none; scroll-behavior: auto; }
}
/* ============================================================
MTSAi DS v2: Completion Pack — Tier 3 (specialized patterns)
8 components: rating, color-picker, transfer-list, speed-dial,
tree-table, inline-edit, spotlight, bottom-nav
============================================================ */
/* ── rating.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Rating
Star-based rating display + interactive input. Read-only or
clickable. Half-star support. Color + size variants.
============================================================ */
.mts-rating {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0;
line-height: 1;
}
.mts-rating__star {
width: 20px;
height: 20px;
background: none;
border: none;
padding: 2px;
cursor: pointer;
color: var(--border-subtle);
transition: color 150ms ease, transform 150ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mts-rating__star svg { width: 100%; height: 100%; fill: currentColor; }
.mts-rating__star:hover {
color: var(--accent-saffron);
transform: scale(1.15);
}
.mts-rating__star:focus-visible {
outline: 2px solid var(--accent-saffron);
outline-offset: 2px;
border-radius: 2px;
}
.mts-rating__star--filled,
.mts-rating__star.is-active {
color: var(--accent-saffron);
}
/* Half star (mask from right) */
.mts-rating__star--half {
color: var(--accent-saffron);
position: relative;
}
.mts-rating__star--half::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 50%;
background: var(--layer-bg);
pointer-events: none;
}
/* Read-only variant */
.mts-rating--readonly .mts-rating__star {
cursor: default;
pointer-events: none;
}
.mts-rating--readonly .mts-rating__star:hover { transform: none; }
/* Sizes */
.mts-rating--sm .mts-rating__star { width: 14px; height: 14px; }
.mts-rating--lg .mts-rating__star { width: 28px; height: 28px; }
/* Color variants */
.mts-rating--teal .mts-rating__star--filled,
.mts-rating--teal .mts-rating__star.is-active {
color: var(--interactive);
}
.mts-rating--teal .mts-rating__star:hover { color: var(--interactive); }
.mts-rating--green .mts-rating__star--filled,
.mts-rating--green .mts-rating__star.is-active {
color: var(--brand-primary);
}
.mts-rating--green .mts-rating__star:hover { color: var(--brand-primary); }
/* Trailing numeric label */
.mts-rating__value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin-left: var(--space-2);
font-variant-numeric: tabular-nums;
}
/* Hover preview (uses ~ sibling) */
.mts-rating:not(.mts-rating--readonly) .mts-rating__star:hover ~ .mts-rating__star {
color: var(--border-subtle);
}
@media (prefers-reduced-motion: reduce) {
.mts-rating__star { transition: color 0ms; }
.mts-rating__star:hover { transform: none; }
}
/* ── color-picker.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Color Picker
Swatch grid picker for selecting from a preset palette. Minimal
and accessible — not a full HSL/RGB wheel. For document theming,
accent selection, category coloring.
============================================================ */
.mts-color-picker {
display: inline-flex;
flex-direction: column;
gap: var(--space-3);
}
.mts-color-picker__label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mts-color-picker__swatches {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
gap: 6px;
max-width: 260px;
}
.mts-color-picker__swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
background: var(--swatch-color, #ccc);
cursor: pointer;
padding: 0;
transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
position: relative;
}
.mts-color-picker__swatch:hover {
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mts-color-picker__swatch[aria-checked="true"],
.mts-color-picker__swatch.is-active {
border-color: var(--text-primary);
box-shadow: 0 0 0 2px var(--layer-bg), 0 0 0 4px var(--text-primary);
}
.mts-color-picker__swatch[aria-checked="true"]::after {
content: '✓';
color: #fff;
font-size: 14px;
font-weight: 700;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.mts-color-picker__swatch:focus-visible {
outline: 2px solid var(--accent-saffron);
outline-offset: 2px;
}
/* Sizes */
.mts-color-picker--sm .mts-color-picker__swatch { width: 20px; height: 20px; }
.mts-color-picker--lg .mts-color-picker__swatch { width: 36px; height: 36px; }
/* Square variant */
.mts-color-picker--square .mts-color-picker__swatch {
border-radius: var(--radius-xs, 3px);
}
/* Current color display */
.mts-color-picker__current {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.mts-color-picker__current-swatch {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--current-color, #ccc);
border: 1px solid var(--border-subtle);
}
@media (prefers-reduced-motion: reduce) {
.mts-color-picker__swatch { transition: none; }
.mts-color-picker__swatch:hover { transform: none; }
}
/* ── transfer-list.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Transfer List
Move items between two lists (available ↔ selected). Common
pattern for permissions, user-group assignments, selective
filtering.
============================================================ */
.mts-transfer {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-4);
align-items: stretch;
max-width: 720px;
}
@media (max-width: 640px) {
.mts-transfer { grid-template-columns: 1fr; }
}
.mts-transfer__list {
display: flex;
flex-direction: column;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
overflow: hidden;
min-height: 280px;
}
.mts-transfer__header {
padding: var(--space-3) var(--space-4);
background: var(--layer-01);
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
}
.mts-transfer__title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.mts-transfer__count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.mts-transfer__search {
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.mts-transfer__search input {
width: 100%;
padding: 6px 10px;
font-family: var(--font-ui);
font-size: 13px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs, 3px);
outline: none;
transition: border-color 150ms ease;
}
.mts-transfer__search input:focus { border-color: var(--interactive); }
.mts-transfer__items {
list-style: none;
margin: 0;
padding: var(--space-2) 0;
overflow-y: auto;
flex: 1;
}
.mts-transfer__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
font-family: var(--font-ui);
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
transition: background 120ms ease;
user-select: none;
}
.mts-transfer__item:hover {
background: var(--layer-01);
}
.mts-transfer__item[aria-selected="true"],
.mts-transfer__item.is-selected {
background: rgba(13, 148, 136, 0.08);
color: var(--interactive);
font-weight: 500;
}
.mts-transfer__item[aria-selected="true"]::before {
content: '✓';
color: var(--interactive);
font-weight: 700;
font-size: 12px;
width: 14px;
}
.mts-transfer__item:not([aria-selected="true"])::before {
content: '';
width: 14px;
}
/* Center controls (transfer buttons) */
.mts-transfer__controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-2);
}
.mts-transfer__btn {
width: 36px;
height: 36px;
padding: 0;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs, 3px);
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.mts-transfer__btn:hover:not(:disabled) {
background: var(--layer-01);
color: var(--interactive);
border-color: var(--interactive);
}
.mts-transfer__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 640px) {
.mts-transfer__controls {
flex-direction: row;
justify-content: center;
padding: var(--space-3) 0;
}
}
/* Empty state */
.mts-transfer__empty {
padding: var(--space-8) var(--space-4);
text-align: center;
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
}
/* ── speed-dial.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Speed Dial (FAB with fan-out actions)
Floating Action Button that expands to reveal secondary actions.
Material Design-inspired but toned for gov-tech aesthetic.
============================================================ */
.mts-speed-dial {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: 900;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
}
/* Primary FAB trigger */
.mts-speed-dial__fab {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--interactive);
color: #fff;
border: none;
box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28), 0 2px 6px rgba(0, 0, 0, 0.10);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
position: relative;
z-index: 2;
}
.mts-speed-dial__fab:hover {
transform: scale(1.08);
box-shadow: 0 10px 24px rgba(13, 148, 136, 0.35), 0 4px 8px rgba(0, 0, 0, 0.12);
}
.mts-speed-dial[aria-expanded="true"] .mts-speed-dial__fab {
transform: rotate(45deg);
}
.mts-speed-dial__fab svg { width: 20px; height: 20px; }
/* Color variants */
.mts-speed-dial--saffron .mts-speed-dial__fab {
background: var(--accent-saffron);
box-shadow: 0 6px 16px rgba(255, 153, 51, 0.30);
}
.mts-speed-dial--green .mts-speed-dial__fab {
background: var(--brand-primary);
box-shadow: 0 6px 16px rgba(83, 170, 0, 0.30);
}
/* Actions container */
.mts-speed-dial__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
opacity: 0;
pointer-events: none;
transform: translateY(8px) scale(0.95);
transform-origin: bottom right;
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mts-speed-dial[aria-expanded="true"] .mts-speed-dial__actions {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* Individual action */
.mts-speed-dial__action {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
}
.mts-speed-dial__action-label {
background: var(--text-primary);
color: #fff;
padding: 6px 12px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
border-radius: var(--radius-sm);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
white-space: nowrap;
opacity: 0;
transform: translateX(8px);
transition: opacity 200ms ease, transform 200ms ease;
}
.mts-speed-dial__action:hover .mts-speed-dial__action-label {
opacity: 1;
transform: translateX(0);
}
.mts-speed-dial__action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
transition: background 150ms ease, transform 150ms ease;
}
.mts-speed-dial__action-btn:hover {
background: var(--interactive);
color: #fff;
transform: scale(1.08);
}
.mts-speed-dial__action-btn svg { width: 16px; height: 16px; }
/* Position variants */
.mts-speed-dial--bottom-left {
right: auto;
left: var(--space-6);
align-items: flex-start;
}
.mts-speed-dial--bottom-left .mts-speed-dial__actions {
align-items: flex-start;
transform-origin: bottom left;
}
.mts-speed-dial--bottom-left .mts-speed-dial__action { flex-direction: row-reverse; }
.mts-speed-dial--bottom-left .mts-speed-dial__action:hover .mts-speed-dial__action-label {
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.mts-speed-dial__fab,
.mts-speed-dial__actions,
.mts-speed-dial__action-label,
.mts-speed-dial__action-btn { transition: none; }
}
/* ── tree-table.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Tree Table
Hierarchical table data with expand/collapse rows. Useful for
file systems, policy document trees, org charts, accounting breakdowns.
Extends existing table.css.
============================================================ */
.mts-tree-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: var(--font-ui);
font-size: 13px;
color: var(--text-primary);
}
.mts-tree-table thead th {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
text-align: left;
padding: var(--space-3) var(--space-4);
background: var(--layer-01);
border-bottom: 1px solid var(--border-subtle);
}
.mts-tree-table tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
vertical-align: top;
}
.mts-tree-table tbody tr {
transition: background 120ms ease;
}
.mts-tree-table tbody tr:hover {
background: var(--layer-01);
}
/* Tree-specific: first cell with indent + expand chevron */
.mts-tree-table__cell {
display: flex;
align-items: center;
gap: 4px;
padding-left: calc(var(--space-4) + (var(--tt-depth, 0) * 20px));
}
.mts-tree-table__toggle {
width: 18px;
height: 18px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
border-radius: var(--radius-xs, 3px);
transition: background 120ms ease, transform 200ms ease;
flex-shrink: 0;
}
.mts-tree-table__toggle:hover {
background: var(--layer-02);
color: var(--text-primary);
}
.mts-tree-table__toggle[aria-expanded="true"] {
transform: rotate(90deg);
}
/* Placeholder (for leaf rows — keep alignment) */
.mts-tree-table__toggle-placeholder {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Depth visual hint */
.mts-tree-table__label {
font-weight: 500;
color: var(--text-primary);
}
.mts-tree-table tr[data-depth="0"] .mts-tree-table__label {
font-weight: 600;
font-family: var(--font-display);
font-size: 14px;
}
.mts-tree-table tr[data-depth="1"] .mts-tree-table__label { color: var(--text-primary); }
.mts-tree-table tr[data-depth="2"] .mts-tree-table__label { color: var(--text-secondary); }
/* Hidden by default; JS toggles */
.mts-tree-table tr[data-hidden="true"] {
display: none;
}
/* Numeric / status cells */
.mts-tree-table__num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--text-primary);
white-space: nowrap;
}
.mts-tree-table__status {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.mts-tree-table__status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.mts-tree-table__status--active { color: var(--brand-primary); }
.mts-tree-table__status--pending { color: var(--accent-saffron); }
.mts-tree-table__status--inactive { color: var(--text-disabled); }
/* Compact variant */
.mts-tree-table--compact tbody td {
padding: var(--space-2) var(--space-3);
font-size: 12px;
}
/* On dark */
.mts-tree-table--on-dark thead th {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.60);
border-bottom-color: rgba(255, 255, 255, 0.15);
}
.mts-tree-table--on-dark tbody td {
border-bottom-color: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.85);
}
.mts-tree-table--on-dark tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.mts-tree-table--on-dark .mts-tree-table__label { color: #fff; }
/* ── inline-edit.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Inline Edit
Click to edit in place. View → Edit → Save/Cancel.
Used in admin tables, settings, user profiles.
============================================================ */
.mts-inline-edit {
position: relative;
display: inline-block;
font-family: var(--font-ui);
font-size: 14px;
}
/* View mode */
.mts-inline-edit__view {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 8px;
border-radius: var(--radius-xs, 3px);
cursor: pointer;
color: var(--text-primary);
transition: background 120ms ease, outline 120ms ease;
min-height: 28px;
min-width: 40px;
}
.mts-inline-edit__view:hover {
background: var(--layer-01);
outline: 1px dashed var(--border-strong);
outline-offset: -1px;
}
.mts-inline-edit__view:focus-visible {
outline: 2px solid var(--interactive);
outline-offset: 2px;
}
.mts-inline-edit__value {
flex: 1;
min-width: 0;
}
.mts-inline-edit__value--empty {
color: var(--text-disabled);
font-style: italic;
}
.mts-inline-edit__icon {
width: 12px;
height: 12px;
color: var(--text-secondary);
opacity: 0;
transition: opacity 120ms ease;
flex-shrink: 0;
}
.mts-inline-edit__view:hover .mts-inline-edit__icon,
.mts-inline-edit__view:focus-visible .mts-inline-edit__icon {
opacity: 1;
}
/* Edit mode */
.mts-inline-edit[data-editing="true"] .mts-inline-edit__view { display: none; }
.mts-inline-edit:not([data-editing="true"]) .mts-inline-edit__form { display: none; }
.mts-inline-edit__form {
display: inline-flex;
align-items: center;
gap: var(--space-2);
animation: ie-in 150ms ease;
}
@keyframes ie-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.mts-inline-edit__input {
padding: 4px 8px;
font-family: inherit;
font-size: inherit;
color: var(--text-primary);
background: var(--layer-bg);
border: 1px solid var(--interactive);
border-radius: var(--radius-xs, 3px);
outline: none;
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.10);
min-width: 120px;
}
.mts-inline-edit__btn {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--border-subtle);
background: var(--layer-bg);
color: var(--text-primary);
border-radius: var(--radius-xs, 3px);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mts-inline-edit__btn:hover {
background: var(--layer-01);
}
.mts-inline-edit__btn--save:hover {
background: var(--brand-primary);
color: #fff;
border-color: var(--brand-primary);
}
.mts-inline-edit__btn--cancel:hover {
background: var(--support-error, #DA1E28);
color: #fff;
border-color: var(--support-error, #DA1E28);
}
/* Size variants */
.mts-inline-edit--sm { font-size: 12px; }
.mts-inline-edit--sm .mts-inline-edit__input { padding: 2px 6px; min-width: 80px; }
.mts-inline-edit--sm .mts-inline-edit__btn { width: 20px; height: 20px; font-size: 12px; }
.mts-inline-edit--lg {
font-size: 16px;
}
.mts-inline-edit--lg .mts-inline-edit__input { padding: 6px 10px; min-width: 160px; }
.mts-inline-edit--lg .mts-inline-edit__btn { width: 28px; height: 28px; }
/* Multiline */
.mts-inline-edit--textarea .mts-inline-edit__input {
min-width: 240px;
min-height: 60px;
resize: vertical;
font-family: inherit;
}
/* Saving state */
.mts-inline-edit[data-saving="true"] {
opacity: 0.5;
pointer-events: none;
}
/* ── spotlight.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Spotlight (Onboarding Tour)
Full-screen overlay that highlights a target element and
shows a tooltip-style popover with guided steps.
============================================================ */
.mts-spotlight {
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
display: none;
}
.mts-spotlight.is-active {
display: block;
pointer-events: auto;
}
/* Dark backdrop (everything except cutout) */
.mts-spotlight__backdrop {
position: fixed;
inset: 0;
background: rgba(5, 5, 5, 0.68);
animation: sl-fade-in 300ms ease;
}
/* Cutout — a transparent area over the target element */
.mts-spotlight__cutout {
position: absolute;
border-radius: var(--radius-sm);
box-shadow: 0 0 0 9999px rgba(5, 5, 5, 0.68), 0 0 0 4px rgba(255, 153, 51, 0.50);
transition: all 400ms cubic-bezier(0.22, 1, 0.36, 1);
animation: sl-cutout-pulse 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes sl-cutout-pulse {
0%, 100% { box-shadow: 0 0 0 9999px rgba(5, 5, 5, 0.68), 0 0 0 4px rgba(255, 153, 51, 0.50); }
50% { box-shadow: 0 0 0 9999px rgba(5, 5, 5, 0.68), 0 0 0 8px rgba(255, 153, 51, 0.28); }
}
@keyframes sl-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Popover content */
.mts-spotlight__popover {
position: absolute;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-5);
max-width: 360px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
animation: sl-popover-in 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sl-popover-in {
from { opacity: 0; transform: translateY(4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mts-spotlight__step {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent-saffron);
margin-bottom: var(--space-2);
display: block;
font-variant-numeric: tabular-nums;
}
.mts-spotlight__title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-3);
line-height: 1.3;
}
.mts-spotlight__body {
font-family: var(--font-ui);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 var(--space-5);
}
.mts-spotlight__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.mts-spotlight__progress-dots {
display: flex;
gap: 6px;
}
.mts-spotlight__progress-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--border-subtle);
}
.mts-spotlight__progress-dot.is-active {
background: var(--accent-saffron);
width: 18px;
border-radius: 3px;
}
.mts-spotlight__buttons {
display: flex;
gap: var(--space-2);
}
.mts-spotlight__btn {
padding: 6px 14px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
border-radius: var(--radius-xs, 3px);
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
border: 1px solid transparent;
}
.mts-spotlight__btn--skip {
background: transparent;
color: var(--text-secondary);
border-color: transparent;
}
.mts-spotlight__btn--skip:hover {
color: var(--text-primary);
}
.mts-spotlight__btn--next,
.mts-spotlight__btn--primary {
background: var(--interactive);
color: #fff;
border-color: var(--interactive);
}
.mts-spotlight__btn--next:hover,
.mts-spotlight__btn--primary:hover {
background: var(--interactive-hover, #0f766e);
}
/* Arrow pointer (optional, toggled via data-arrow) */
.mts-spotlight__popover[data-arrow="top"]::before,
.mts-spotlight__popover[data-arrow="bottom"]::before,
.mts-spotlight__popover[data-arrow="left"]::before,
.mts-spotlight__popover[data-arrow="right"]::before {
content: '';
position: absolute;
width: 12px; height: 12px;
background: var(--layer-bg);
border: 1px solid var(--border-subtle);
transform: rotate(45deg);
}
.mts-spotlight__popover[data-arrow="top"]::before {
top: -7px; left: 24px;
border-right: none; border-bottom: none;
}
.mts-spotlight__popover[data-arrow="bottom"]::before {
bottom: -7px; left: 24px;
border-left: none; border-top: none;
}
@media (prefers-reduced-motion: reduce) {
.mts-spotlight__cutout,
.mts-spotlight__popover,
.mts-spotlight__backdrop { animation: none; transition: none; }
}
/* ── bottom-nav.css ────────────────────────────────────────────── */
/* ============================================================
MTSAi × Bottom Navigation
Mobile-friendly bottom nav bar with icons + labels. Supports
safe-area-inset for notched devices. Desktop hidden by default.
============================================================ */
.mts-bottom-nav {
display: none;
}
@media (max-width: 768px) {
.mts-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 800;
display: flex;
background: var(--layer-bg);
border-top: 1px solid var(--border-subtle);
padding: var(--space-2) var(--space-1)
calc(var(--space-2) + env(safe-area-inset-bottom, 0px))
var(--space-1);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}
}
.mts-bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 4px;
text-decoration: none;
color: var(--text-secondary);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
transition: color 150ms ease;
border-radius: var(--radius-xs, 3px);
position: relative;
}
.mts-bottom-nav__item:hover {
color: var(--interactive);
}
.mts-bottom-nav__item[aria-current="page"],
.mts-bottom-nav__item.is-active {
color: var(--interactive);
}
.mts-bottom-nav__item[aria-current="page"]::before,
.mts-bottom-nav__item.is-active::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 2px;
background: var(--interactive);
border-radius: 0 0 2px 2px;
}
.mts-bottom-nav__icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.mts-bottom-nav__icon svg { width: 20px; height: 20px; }
.mts-bottom-nav__label {
font-size: 10px;
letter-spacing: 0.02em;
line-height: 1;
}
/* Badge on icon */
.mts-bottom-nav__badge {
position: absolute;
top: 2px;
right: calc(50% - 18px);
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--support-error, #DA1E28);
color: #fff;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Dark variant */
.mts-bottom-nav--dark {
background: #050505;
border-top-color: rgba(255, 255, 255, 0.10);
}
.mts-bottom-nav--dark .mts-bottom-nav__item { color: rgba(255, 255, 255, 0.60); }
.mts-bottom-nav--dark .mts-bottom-nav__item:hover,
.mts-bottom-nav--dark .mts-bottom-nav__item[aria-current="page"] {
color: var(--accent-saffron);
}
.mts-bottom-nav--dark .mts-bottom-nav__item[aria-current="page"]::before {
background: var(--accent-saffron);
}
/* Utility — add extra bottom padding to body on mobile so bottom nav doesn't overlap content */
@media (max-width: 768px) {
body.has-bottom-nav {
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
}
/* ============================================================
MTSAi DS v2: Enhanced Form System
============================================================ */
/* ============================================================
MTSAi × Enhanced Form System
Universal form-UX primitives (opt-in via data attributes):
- Character counter (.mts-char-count)
- Error summary banner (.mts-form-error-summary)
- Valid-state feedback (.mts-helper--valid)
- Autosave status indicator (.mts-form-autosave-status)
- Enhanced consent block (.mts-consent-block)
- Keyboard shortcut hint (.mts-form-shortcut-hint)
============================================================ */
/* ── Character Counter ──────────────────────────────────── */
.mts-char-count {
display: block;
text-align: right;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
font-variant-numeric: tabular-nums;
transition: color 150ms ease;
}
.mts-char-count--warn { color: var(--accent-saffron); font-weight: 600; }
.mts-char-count--error { color: var(--support-error, #DA1E28); font-weight: 600; }
/* ── Error Summary Banner (shown on submit failure) ─────── */
.mts-form-error-summary {
margin-bottom: var(--space-5);
padding: var(--space-4) var(--space-5);
background: rgba(218, 30, 40, 0.04);
border: 1px solid rgba(218, 30, 40, 0.28);
border-left: 3px solid var(--support-error, #DA1E28);
border-radius: var(--radius-xs, 3px);
animation: fes-shake 220ms ease;
display: none;
}
.mts-form-error-summary[data-visible="true"] { display: block; }
@keyframes fes-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-3px); }
40%, 80% { transform: translateX(3px); }
}
.mts-form-error-summary__heading {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
color: var(--support-error, #DA1E28);
margin: 0 0 var(--space-3);
display: flex;
align-items: center;
gap: 8px;
}
.mts-form-error-summary__heading::before {
content: '⚠';
font-size: 14px;
}
.mts-form-error-summary__list {
list-style: none;
margin: 0;
padding: 0;
}
.mts-form-error-summary__item { margin-bottom: 4px; }
.mts-form-error-summary__item a {
font-family: var(--font-ui);
font-size: 13px;
color: var(--support-error, #DA1E28);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.mts-form-error-summary__item a:hover { text-decoration-thickness: 2px; }
/* ── Valid-state Helper (positive feedback as user types) ── */
.mts-helper--valid {
color: var(--brand-primary);
display: flex;
align-items: center;
gap: 6px;
}
.mts-helper--valid::before {
content: '✓';
font-weight: 700;
font-size: 12px;
}
/* Valid input border (subtle green tint) */
.mts-input--valid,
.mts-input[data-valid="true"] {
border-color: rgba(83, 170, 0, 0.40);
}
/* ── Autosave Status (small badge near submit) ──────────── */
.mts-form-autosave-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
opacity: 0;
transition: opacity 300ms ease;
}
.mts-form-autosave-status[data-state="saving"] { opacity: 1; color: var(--text-secondary); }
.mts-form-autosave-status[data-state="saved"] { opacity: 1; color: var(--brand-primary); }
.mts-form-autosave-status[data-state="restored"] { opacity: 1; color: var(--interactive); }
.mts-form-autosave-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.5;
}
.mts-form-autosave-status[data-state="saving"]::before { animation: pulse-dot 1s ease-in-out infinite; }
@keyframes pulse-dot {
50% { opacity: 0.2; transform: scale(0.7); }
}
/* Draft-restore prompt (shown once on page load if draft exists) */
.mts-form-draft-prompt {
padding: var(--space-3) var(--space-4);
background: rgba(13, 148, 136, 0.06);
border: 1px solid rgba(13, 148, 136, 0.24);
border-radius: var(--radius-xs, 3px);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-5);
animation: fdp-in 260ms ease;
}
@keyframes fdp-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mts-form-draft-prompt__text {
font-family: var(--font-ui);
font-size: 13px;
color: var(--text-primary);
}
.mts-form-draft-prompt__text strong { color: var(--interactive); }
.mts-form-draft-prompt__actions {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
}
.mts-form-draft-prompt__btn {
padding: 5px 12px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
border-radius: var(--radius-xs, 3px);
border: 1px solid var(--border-subtle);
background: var(--layer-bg);
color: var(--text-primary);
cursor: pointer;
transition: all 150ms ease;
}
.mts-form-draft-prompt__btn--primary {
background: var(--interactive);
color: #fff;
border-color: var(--interactive);
}
.mts-form-draft-prompt__btn--primary:hover {
background: var(--interactive-hover, #0f766e);
}
.mts-form-draft-prompt__btn--dismiss:hover {
background: var(--layer-01);
}
/* ── Enhanced Consent Block ─────────────────────────────── */
.mts-consent-block {
padding: var(--space-4) var(--space-5);
background: rgba(13, 148, 136, 0.03);
border: 1px solid rgba(13, 148, 136, 0.18);
border-radius: var(--radius-xs, 3px);
margin: var(--space-4) 0;
}
.mts-consent-block--error {
background: rgba(218, 30, 40, 0.04);
border-color: rgba(218, 30, 40, 0.28);
}
/* ── Keyboard Shortcut Hint ─────────────────────────────── */
.mts-form-shortcut-hint {
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
/* ── Field-level contextual help (helper text extended) ──── */
.mts-helper--example {
color: var(--text-secondary);
font-style: italic;
}
.mts-helper--example::before {
content: 'e.g. ';
font-style: normal;
font-family: var(--font-mono);
color: var(--text-disabled);
}
/* ── Success State Timeline (post-submit next-steps) ────── */
.mts-form-next-steps {
margin-top: var(--space-6);
padding: var(--space-5);
background: var(--layer-01);
border-radius: var(--radius-sm);
}
.mts-form-next-steps__heading {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.mts-form-next-steps__list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: steps;
}
.mts-form-next-steps__item {
counter-increment: steps;
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--space-3);
padding: var(--space-3) 0;
align-items: flex-start;
border-bottom: 1px solid var(--border-subtle);
}
.mts-form-next-steps__item:last-child { border-bottom: none; }
.mts-form-next-steps__item::before {
content: counter(steps);
width: 24px;
height: 24px;
background: var(--interactive);
color: #fff;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mts-form-next-steps__title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
display: block;
}
.mts-form-next-steps__body {
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.55;
display: block;
margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
.mts-form-error-summary,
.mts-form-draft-prompt,
.mts-form-autosave-status { animation: none; transition: none; }
}