/* ============================================================ minix Design System Components — Pure Anduril Phase F.1 — all classes prefixed with .mx- (no global side effects). Page-level reset is scoped to . ============================================================ */ /* === Page reset (opt-in via ) === */ body.mx-page { background: var(--mx-bg-base); color: var(--mx-text-primary); font-family: var(--mx-font-sans); font-size: var(--mx-text-base); line-height: var(--mx-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === Mono numeric (signature) === */ .mx-num { font-family: var(--mx-font-mono); font-feature-settings: 'tnum' on, 'lnum' on; letter-spacing: var(--mx-tracking-tight); } /* === Section number (01, 02, 03) === */ .mx-section-num { display: inline-block; font: 500 var(--mx-text-xs)/1 var(--mx-font-mono); color: var(--mx-text-muted); letter-spacing: var(--mx-tracking-widest); text-transform: uppercase; margin-bottom: var(--mx-space-3); } /* === Status bar (상단 라이브) === */ .mx-status-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--mx-space-3) 0; border-bottom: 1px solid var(--mx-border); font: 500 var(--mx-text-xs)/1 var(--mx-font-mono); color: var(--mx-text-muted); letter-spacing: var(--mx-tracking-wide); } .mx-status-bar__left { color: var(--mx-accent); } .mx-status-bar__dot { display: inline-block; width: 6px; height: 6px; background: var(--mx-accent); margin-right: var(--mx-space-2); border-radius: 50%; } /* === Button === */ .mx-btn { display: inline-flex; align-items: center; gap: var(--mx-space-2); padding: var(--mx-space-3) var(--mx-space-5); font: 500 var(--mx-text-base)/1 var(--mx-font-sans); background: transparent; color: var(--mx-text-primary); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); cursor: pointer; transition: all var(--mx-duration) var(--mx-ease); text-decoration: none; } .mx-btn:hover { border-color: var(--mx-border-strong); } .mx-btn--primary { background: var(--mx-accent); color: var(--mx-bg-base); border-color: var(--mx-accent); font-weight: 600; } .mx-btn--primary:hover { background: var(--mx-accent-dim); border-color: var(--mx-accent-dim); } .mx-btn--ghost { border-color: transparent; } .mx-btn--ghost:hover { background: var(--mx-bg-elev-1); border-color: var(--mx-border); } .mx-btn--danger { color: var(--mx-danger); border-color: var(--mx-danger); } /* === Card === */ .mx-card { background: var(--mx-bg-elev-1); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: var(--mx-space-5); } .mx-card--elev-2 { background: var(--mx-bg-elev-2); } .mx-card--accent { border-color: var(--mx-border-accent); } /* === Input === */ .mx-input { width: 100%; padding: var(--mx-space-3) var(--mx-space-4); font: 400 var(--mx-text-base)/1.4 var(--mx-font-sans); background: var(--mx-bg-elev-1); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); color: var(--mx-text-primary); transition: border-color var(--mx-duration) var(--mx-ease); } .mx-input:focus { outline: none; border-color: var(--mx-accent); } .mx-input::placeholder { color: var(--mx-text-muted); } .mx-input--mono { font-family: var(--mx-font-mono); } /* === Label === */ .mx-label { display: block; font: 500 var(--mx-text-xs)/1 var(--mx-font-mono); color: var(--mx-text-muted); letter-spacing: var(--mx-tracking-wider); text-transform: uppercase; margin-bottom: var(--mx-space-2); } /* === Pill (status badge) === */ .mx-pill { display: inline-flex; align-items: center; gap: var(--mx-space-1); padding: 2px var(--mx-space-2); font: 500 var(--mx-text-xs)/1 var(--mx-font-mono); text-transform: uppercase; letter-spacing: var(--mx-tracking-wide); border: 1px solid; border-radius: var(--mx-radius-sm); background: transparent; } .mx-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mx-pill--active { color: var(--mx-accent); border-color: var(--mx-accent); } .mx-pill--warning { color: var(--mx-warning); border-color: var(--mx-warning); } .mx-pill--danger { color: var(--mx-danger); border-color: var(--mx-danger); } .mx-pill--muted { color: var(--mx-text-muted); border-color: var(--mx-border); } /* === Divider === */ .mx-divider { height: 1px; background: var(--mx-border); margin: var(--mx-space-5) 0; } /* === Container === */ .mx-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--mx-space-5); } .mx-container--narrow { max-width: 720px; } .mx-container--wide { max-width: 1440px; } /* === Display heading === */ .mx-display { font-family: var(--mx-font-sans); font-size: var(--mx-text-3xl); font-weight: 500; letter-spacing: var(--mx-tracking-tight); line-height: var(--mx-leading-tight); } .mx-display--mono { font-family: var(--mx-font-mono); font-weight: 400; }