/* ============================================================ main.css — Reset, Custom Properties & Global Styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand */ --primary: #6C5CE7; --primary-hover: #5A4BD1; --primary-light: #F0EDFF; /* Surfaces */ --bg: #FAFAFA; --surface: #FFFFFF; --border: #E5E7EB; /* Text */ --text: #1A1A2E; --text-secondary: #6B7280; /* Severity */ --critical: #DC2626; --high: #EA580C; --medium: #2563EB; --low: #9CA3AF; /* Semantic */ --success: #16A34A; --degraded: #EA580C; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Radii */ --radius: 8px; --radius-sm: 4px; --radius-full: 9999px; /* Motion */ --transition: 150ms ease; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; } img { max-width: 100%; display: block; } ul { list-style: none; } /* Utility: screen-reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ Universal loading indicators (driven by loader.js + HTMX's .htmx-request lifecycle). One brand-purple spinner motif across: the top progress bar, in-flight buttons, and region/modal content. ============================================================ */ @keyframes lw-spin { to { transform: rotate(360deg); } } /* 1 — Top progress bar (element created by loader.js, appended to ). */ #portal-loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--primary); box-shadow: 0 0 8px 0 rgba(108, 92, 231, 0.55); border-radius: 0 3px 3px 0; z-index: 2000; opacity: 0; pointer-events: none; transition: width 0.2s ease, opacity 0.3s ease; } #portal-loadbar.is-active { opacity: 1; } #portal-loadbar.is-done { opacity: 0; } /* 2 — In-flight button (loader.js adds .btn-loading to the submit/action button). Content is hidden and a centered spinner shown; the button keeps its size and is non-interactive. Works for text-only and icon buttons alike. */ .btn-loading { position: relative !important; color: transparent !important; pointer-events: none; } .btn-loading > * { visibility: hidden; } .btn-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(108, 92, 231, 0.3); border-top-color: var(--primary); border-radius: 50%; animation: lw-spin 0.6s linear infinite; visibility: visible; } /* White spinner on filled/primary buttons (incl. the filled purple auth submit button). */ .btn-primary.btn-loading::after, .btn-new-ticket.btn-loading::after, .btn-danger.btn-loading::after, .login-btn.btn-loading::after { border-color: rgba(255, 255, 255, 0.45); border-top-color: #ffffff; } /* 3 — Region / modal content loading (e.g. the slide-over while /detail loads; app.js toggles .panel-loading). Faint overlay + centered spinner. */ .panel-loading { position: relative; min-height: 140px; } .panel-loading::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); z-index: 5; } .panel-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid rgba(108, 92, 231, 0.2); border-top-color: var(--primary); border-radius: 50%; animation: lw-spin 0.6s linear infinite; z-index: 6; } /* Inline message shown in the slide-over when a /detail load fails (replaces the .panel-loading spinner so it can't hang forever; see app.js htmx:responseError). */ .panel-error { padding: 40px 28px; text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .btn-loading::after, .panel-loading::after { animation-duration: 1.4s; } #portal-loadbar { transition: opacity 0.3s ease; } }