/* ============================================================================ * Methodology IT — shared design system * Canonical visual style across every MIT internal tool. * Reference tool: mit-mailbox-triage (the look every other tool should match). * * Apply via: * (Flask) * (Next.js — file in public/) * * Theme: LIGHT by default. Dark theme is opt-in via `` — * add the theme-toggle snippet from fonts.html to pick it up from the URL * (?theme=dark) and localStorage. * * Version: 2.0.0 (mailbox-triage canonical) * Last sync source: /Users/keith/mit-brand/mit.css * ============================================================================ */ :root { /* Brand — invariant across themes ----------------------------------- */ --coral: #DC3C34; --coral-soft: rgba(220, 60, 52, 0.08); --coral-strong: rgba(220, 60, 52, 0.18); --success: #2F9E5E; --success-soft: #EEF8F2; --warn: #E0A93C; --warn-soft: rgba(224, 169, 60, 0.12); --info: #2563EB; --info-soft: rgba(37, 99, 235, 0.10); --danger: #B91C1C; --danger-soft: rgba(185, 28, 28, 0.10); --unknown: #6B7280; --unknown-soft: rgba(107, 114, 128, 0.10); /* Fonts -------------------------------------------------------------- */ --font-display: Sora, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* LIGHT theme (default) --------------------------------------------- */ --canvas: #F6F8FB; --surface: #FFFFFF; --surface-alt: #F6F8FB; --hairline: #EEF2F7; --divider: #E2E8F0; --text: #0F172A; --text-muted: #475569; --text-subtle: #7E8A96; --chip: #F6F8FB; --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04); --code-bg: #F1F5F9; --code-text: #0F172A; } /* DARK theme — opt-in via ------------------------ */ html.dark { --canvas: #13181E; --surface: #1B2229; --surface-alt: #161B22; --hairline: #252D36; --divider: #2B333D; --text: #F3F5F7; --text-muted: #A8B2BC; --text-subtle: #7E8A96; --chip: #252D36; --shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.20); --code-bg: #0A0D11; --code-text: #C9D1D9; --success-soft: rgba(47, 158, 94, 0.14); } /* ============================================================================ * Reset / base * ============================================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html, body { background: var(--canvas); color: var(--text); font-family: var(--font-body); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; } /* Headings — always Sora */ h1, h2, h3, h4, .display, .kpi-number { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; } h1 { font: 700 28px/1.2 var(--font-display); margin: 6px 0 8px; } h2 { font: 600 18px/1.25 var(--font-display); margin: 22px 0 10px; } h3 { font: 600 14px/1.3 var(--font-display); margin: 12px 0 8px; } .eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .mono { font-family: var(--font-mono); } hr.rule { border: none; border-top: 1px solid var(--hairline); margin: 22px 0; } /* ============================================================================ * Page shells * * Two layouts share the same brand: * * 1. NARROW — single-purpose tools (mailbox triage, quick-check forms): *
*
...
*
...
*
* * 2. WIDE — dashboards with sidebar/topbar (multi-page tools): *
...
*
...
* ============================================================================ */ main.mit-narrow { max-width: 640px; margin: 60px auto; padding: 0 20px; } main.mit-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; } /* Top bar for multi-page tools */ header.mit-top { background: var(--surface); border-bottom: 1px solid var(--hairline); padding: 14px 24px; display: flex; align-items: center; gap: 18px; } header.mit-top .brand { display: flex; align-items: center; gap: 10px; font: 700 14px/1 var(--font-display); letter-spacing: -0.01em; color: var(--text); } header.mit-top .brand .mark { width: 22px; height: 22px; border-radius: 5px; background: var(--coral); display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 13px/1 var(--font-display); flex-shrink: 0; box-shadow: 0 1px 2px rgba(220, 60, 52, 0.25); } header.mit-top nav { display: flex; gap: 18px; margin-left: 8px; } header.mit-top nav a { color: var(--text-muted); font-size: 13px; padding: 4px 0; border-bottom: 2px solid transparent; } header.mit-top nav a:hover { color: var(--text); text-decoration: none; } header.mit-top nav a.active { color: var(--text); border-bottom-color: var(--coral); } header.mit-top .meta { margin-left: auto; color: var(--text-subtle); font-size: 12px; } /* ============================================================================ * Cards * ============================================================================ */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px; } .card h3 { margin-top: 0; } /* ============================================================================ * Stats — KPI strip * ============================================================================ */ .stats { display: flex; gap: 12px; margin: 16px 0 22px; flex-wrap: wrap; } .stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 18px; min-width: 120px; } .stat .n { font: 700 22px/1.1 var(--font-display); display: block; margin-bottom: 2px; letter-spacing: -0.02em; } .stat .lbl { color: var(--text-muted); font-size: 12px; } /* ============================================================================ * Buttons * ============================================================================ */ .btn, .btn-primary, .btn-secondary, .btn-ghost { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 10px 18px; font: 600 13px/1 var(--font-body); cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease; text-decoration: none; } .btn-primary { background: var(--coral); color: #ffffff; border: 1px solid var(--coral); box-shadow: 0 2px 6px rgba(220, 60, 52, 0.18); } .btn-primary:hover { filter: brightness(1.05); text-decoration: none; } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--divider); } .btn-secondary:hover { background: var(--surface-alt); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid transparent; } .btn-ghost:hover { background: var(--surface-alt); text-decoration: none; } /* ============================================================================ * Inputs * ============================================================================ */ .input, input[type=text], input[type=email], input[type=search], input[type=url], input:not([type]), textarea, select { width: 100%; border: 1px solid var(--divider); border-radius: 8px; padding: 10px 12px; font: 500 14px/1.4 var(--font-body); background: var(--surface); color: var(--text); } .input:focus, input[type=text]:focus, input[type=email]:focus, input[type=search]:focus, input[type=url]:focus, input:not([type]):focus, textarea:focus, select:focus { outline: 2px solid var(--coral); outline-offset: -1px; } label { display: block; font: 600 12px/1 var(--font-body); color: var(--text-muted); margin-bottom: 6px; } /* ============================================================================ * Tables * * Two table styles, picked by class: * table.kv — key/value rows (label : value) * table.data — full data table with hover * Bare — defaults to .data style * ============================================================================ */ table { width: 100%; border-collapse: collapse; font-size: 12px; } table.kv { font-size: 12.5px; } table.kv td { padding: 6px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; } table.kv td:first-child { color: var(--text-muted); width: 38%; padding-right: 16px; } table.data, table:not(.kv) { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; margin-top: 10px; } table.data th, table.data td, table:not(.kv) th, table:not(.kv) td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; } table.data th, table:not(.kv) th { background: var(--surface-alt); color: var(--text-muted); font: 600 10.5px/1.2 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; } table.data tr:hover td, table:not(.kv) tbody tr:hover td { background: var(--surface-alt); } table tbody tr:last-child td { border-bottom: none; } /* ============================================================================ * Pills — status badges (the canonical pattern from mailbox triage) * * passed * warning * failed * info * unknown * action needed * ============================================================================ */ .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 9999px; font: 700 10px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .pill.good { background: var(--success-soft); color: var(--success); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--danger-soft); color: var(--danger); } .pill.info { background: var(--info-soft); color: var(--info); } .pill.unknown { background: var(--unknown-soft); color: var(--unknown); } .pill.coral { background: var(--coral-soft); color: var(--coral); } /* Severity aliases — same chip styling but using "severity" vocabulary. Use these when the domain is risk levels rather than pass/fail. */ .pill.critical { background: var(--danger); color: #fff; } .pill.high { background: var(--warn); color: #1E242C; } .pill.medium { background: var(--warn-soft); color: var(--warn); } .pill.low { background: var(--unknown-soft);color: var(--text-muted); } .pill.clean { background: var(--success); color: #fff; } /* ============================================================================ * Banners * ============================================================================ */ .banner { background: var(--warn-soft); border: 1px solid rgba(224, 169, 60, 0.3); border-left: 3px solid var(--warn); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; color: var(--text); } .banner.ok { background: var(--success-soft); border-color: rgba(47, 158, 94, 0.3); border-left-color: var(--success); } .banner.error { background: var(--danger-soft); border-color: rgba(185, 28, 28, 0.3); border-left-color: var(--danger); } .banner.info { background: var(--info-soft); border-color: rgba(37, 99, 235, 0.3); border-left-color: var(--info); } /* ============================================================================ * Code * ============================================================================ */ code, kbd, .mono { font-family: var(--font-mono); font-size: 12px; } code, kbd { background: var(--code-bg); padding: 2px 6px; border-radius: 4px; color: var(--code-text); border: 1px solid var(--hairline); } pre.copy { background: var(--code-bg); border: 1px solid var(--hairline); color: var(--code-text); padding: 14px 16px; border-radius: 10px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; } /* ============================================================================ * Modal (record-help, generic confirm) * * Markup: * * ============================================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 9999; overflow-y: auto; backdrop-filter: blur(2px); } .modal-backdrop[hidden] { display: none; } .modal { background: var(--surface); border-radius: 14px; box-shadow: 0 24px 56px rgba(15, 23, 42, 0.30); width: 100%; max-width: 640px; padding: 26px 28px 22px; position: relative; border: 1px solid var(--hairline); } .modal h2 { font: 700 18px/1.25 var(--font-display); margin: 0 0 4px; } .modal .modal-eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; } .modal-close:hover { background: var(--surface-alt); color: var(--text); } .modal .field-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px; } .modal .field-row:last-of-type { border-bottom: none; } .modal .field-row .label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; padding-top: 2px; } .modal .field-row .value { font-family: var(--font-mono); font-size: 12px; word-break: break-word; } .modal ol { padding-left: 22px; margin: 10px 0; } .modal ol li { margin-bottom: 6px; font-size: 12.5px; line-height: 1.6; } .modal .copyable { background: var(--code-bg); border: 1px solid var(--hairline); border-radius: 6px; padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; gap: 10px; word-break: break-word; } .modal .copyable .copy-btn { flex-shrink: 0; background: var(--surface); border: 1px solid var(--divider); border-radius: 6px; padding: 4px 10px; font: 600 11px/1.4 var(--font-body); cursor: pointer; color: var(--text-muted); } .modal .copyable .copy-btn:hover { background: var(--surface-alt); color: var(--text); } .modal .copyable .copy-btn.copied { color: var(--success); border-color: var(--success); } /* Recommended-fix card — clickable affordance */ .fix-clickable { cursor: pointer; position: relative; transition: border-color 0.12s ease; } .fix-clickable:hover { border-color: var(--coral); } .fix-clickable::after { content: "Click for setup steps →"; position: absolute; top: 8px; right: 12px; font: 600 10px/1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral); opacity: 0.7; } /* ============================================================================ * Utilities * ============================================================================ */ .row-link { color: var(--text); font-weight: 600; } .row-link:hover { color: var(--coral); text-decoration: none; } .flex { display: flex; gap: 10px; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .flex-1 { flex: 1; } .text-right { text-align: right; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 22px; } .mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 22px; }