/* ============================================ UCPM Feedback 2.0 — Common Tokens Warm light palette, pill badges, Intercom/Zendesk-inspired ============================================ */ :root { /* Accents — swapped via data-accent on */ --accent: #4F46E5; --accent-600: #4338CA; --accent-50: #EEF2FF; --accent-100: #E0E7FF; --accent-200: #C7D2FE; /* Warm neutrals */ --canvas: #FAF9F6; --paper: #FFFFFF; --paper-2: #F5F3EE; --ink: #161413; --ink-2: #3C3836; --ink-3: #6B655F; --ink-4: #9A948C; --line: #E8E4DC; --line-2: #EFEBE3; /* Legacy token shims (so older rules keep working) */ --bg-app: var(--canvas); --bg-surface: var(--paper); --bg-card: var(--paper-2); --bg-dark: var(--canvas); --border-default: var(--line); --text-primary: var(--ink); --text-secondary: var(--ink-3); --text-muted: var(--ink-4); --accent-primary: var(--accent); --accent-hover: var(--accent-600); --accent-secondary: var(--accent-600); --accent-glow: var(--accent); --border-metal: var(--line); /* Status color pairs (soft bg + solid text) */ --green-bg: #E8F5EC; --green-fg: #1E6F3A; --blue-bg: #E4ECFB; --blue-fg: #1E3A8A; --amber-bg: #FBEFD6; --amber-fg: #8A5300; --rose-bg: #FBE4E4; --rose-fg: #9B1C1C; --violet-bg:#EEE6FB; --violet-fg:#5B21B6; --slate-bg: #ECEAE4; --slate-fg: #4B4744; --status-success: var(--green-fg); --status-warning: var(--amber-fg); --status-error: var(--rose-fg); /* Elevation */ --shadow-sm: 0 1px 2px rgba(22,20,19,.04), 0 1px 1px rgba(22,20,19,.03); --shadow-md: 0 4px 14px rgba(22,20,19,.06), 0 1px 3px rgba(22,20,19,.04); --shadow-lg: 0 24px 48px rgba(22,20,19,.12), 0 2px 6px rgba(22,20,19,.06); --radius: 14px; --radius-sm: 10px; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display:'Inter Tight', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; } [data-accent="emerald"] { --accent:#059669; --accent-600:#047857; --accent-50:#ECFDF5; --accent-100:#D1FAE5; --accent-200:#A7F3D0; } [data-accent="amber"] { --accent:#D97706; --accent-600:#B45309; --accent-50:#FFFBEB; --accent-100:#FEF3C7; --accent-200:#FDE68A; } [data-accent="rose"] { --accent:#E11D48; --accent-600:#BE123C; --accent-50:#FFF1F2; --accent-100:#FFE4E6; --accent-200:#FECDD3; } [data-accent="violet"] { --accent:#7C3AED; --accent-600:#6D28D9; --accent-50:#F5F3FF; --accent-100:#EDE9FE; --accent-200:#DDD6FE; } [data-accent="ink"] { --accent:#161413; --accent-600:#000000; --accent-50:#F5F3EE; --accent-100:#ECEAE4; --accent-200:#DAD6CE; } /* Dark mode kept minimally functional (light-first design, but tokens still map) */ [data-theme="dark"] { --canvas: #0F172A; --paper: #111827; --paper-2:#0B1220; --ink: #E5E7EB; --ink-2: #D1D5DB; --ink-3: #9CA3AF; --ink-4: #6B7280; --line: #1F2933; --line-2: #243041; --bg-app: var(--canvas); --bg-surface: var(--paper); --bg-card: var(--paper-2); --border-default: var(--line); --text-primary: var(--ink); --text-secondary: var(--ink-3); --text-muted: var(--ink-4); } /* Reset & Base — override Bootstrap defaults to match our design */ body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } /* Form Elements — scoped overrides on top of Bootstrap */ label { margin-bottom: 6px; font-weight: 600; color: var(--ink-2); font-size: 12.5px; letter-spacing: -0.005em; } input:not([type="checkbox"]):not([type="radio"]):not(.form-control), textarea:not(.form-control), select:not(.form-select) { width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 9px; font-size: 13.5px; font-family: var(--font-sans); transition: border-color .12s, box-shadow .12s; } input:not([type="checkbox"]):not([type="radio"]):not(.form-control):focus, textarea:not(.form-control):focus, select:not(.form-select):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); } /* Bootstrap form overrides via CSS vars */ .form-control, .form-select { --bs-border-color: var(--line); --bs-body-bg: var(--paper); --bs-body-color: var(--ink); border-radius: 9px; font-size: 13.5px; font-family: var(--font-sans); } .form-control:focus, .form-select:focus { --bs-focus-ring-color: var(--accent-50); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); } textarea { min-height: 120px; resize: vertical; line-height: 1.55; } .form-group { margin-bottom: 18px; } .form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; box-shadow: var(--shadow-sm); } /* Buttons — override Bootstrap defaults to match our design */ button:not(.btn):not(.btn-close):not(.toast-btn):not([class*="bs-"]):not(.action-btn):not(.edit-assignee-btn):not(.delete-assignee-btn) { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); padding: 9px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 550; font-family: inherit; transition: background .12s, border-color .12s, transform .05s; display: inline-flex; align-items: center; gap: 8px; } button:not(.btn):not(.btn-close):not(.toast-btn):not(.action-btn):not(.edit-assignee-btn):not(.delete-assignee-btn):hover { background: #000; border-color: #000; } button:not(.btn):not(.btn-close):not(.toast-btn):not(.action-btn):not(.edit-assignee-btn):not(.delete-assignee-btn):active { transform: translateY(1px); } button:not(.btn):not(.btn-close):disabled { opacity: 0.5; cursor: not-allowed; transform: none; } button.secondary:not(.btn) { background: var(--paper); color: var(--ink); border: 1px solid var(--line); } button.secondary:not(.btn):hover { background: var(--paper-2); border-color: var(--ink-4); color: var(--ink); } button.danger:not(.btn) { background: var(--rose-fg); border-color: var(--rose-fg); color: #fff; } button.danger:not(.btn):hover { background: #7F1818; border-color: #7F1818; } /* Bootstrap .btn-primary — use CSS vars to theme */ .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600); --bs-btn-active-bg: var(--accent-600); --bs-btn-active-border-color: var(--accent-600); --bs-btn-focus-shadow-rgb: 79, 70, 229; } button.accent { background: var(--accent); color: #fff; border-color: var(--accent); } button.accent:hover { background: var(--accent-600); border-color: var(--accent-600); } /* Dispatch hand-off button — brand teal, links out to the Dispatch app */ a.dispatch-btn { background: #008687; color: #fff; border: 1px solid #008687; padding: 9px 14px; border-radius: 9px; font-size: 13px; font-weight: 550; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, transform .05s; display: inline-flex; align-items: center; gap: 8px; } a.dispatch-btn:hover { background: #013e46; border-color: #013e46; color: #fff; } a.dispatch-btn:active { transform: translateY(1px); } a.dispatch-btn img { height: 16px; width: auto; display: block; } /* Generic card — theme via Bootstrap CSS vars */ .card { --bs-card-bg: var(--paper); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--radius); --bs-card-cap-bg: var(--paper-2); padding: 20px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; } .card:hover { --bs-card-border-color: var(--ink-4); } /* ============================================ Pill Badges — theme via Bootstrap CSS vars + custom additions ============================================ */ .badge { --bs-badge-font-size: 11.5px; --bs-badge-font-weight: 550; --bs-badge-padding-x: 9px; --bs-badge-padding-y: 3px; --bs-badge-border-radius: 999px; --bs-badge-color: var(--slate-fg); display: inline-flex !important; align-items: center; gap: 5px; letter-spacing: -0.005em; white-space: nowrap; line-height: 1.3; background: var(--slate-bg) !important; color: var(--slate-fg) !important; text-transform: none; border: 0; } .badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; } /* Priority pills */ .badge.priority-low { background: var(--slate-bg) !important; color: var(--slate-fg) !important; } .badge.priority-medium { background: var(--amber-bg) !important; color: var(--amber-fg) !important; } .badge.priority-high { background: var(--rose-bg) !important; color: var(--rose-fg) !important; } .badge.priority-critical { background: var(--rose-bg) !important; color: var(--rose-fg) !important; font-weight: 600 !important; } /* Status pills */ .badge.status-new { background: var(--blue-bg) !important; color: var(--blue-fg) !important; } .badge.status-in_progress { background: var(--amber-bg) !important; color: var(--amber-fg) !important; } .badge.status-resolved { background: var(--green-bg) !important; color: var(--green-fg) !important; } .badge.status-closed { background: var(--slate-bg) !important; color: var(--slate-fg) !important; } .badge.status-waiting_for_publish { background: #f3e8ff !important; color: #7c3aed !important; } /* Category pill — no dot, optional icon */ .badge.badge-category { background: var(--accent-50); color: var(--accent-600); text-transform: none; font-size: 11.5px; } .badge.badge-category::before { display: none; } .badge.assignee-category-empty { background: var(--amber-bg); color: var(--amber-fg); font-weight: 600; } /* Notification Badge (unchanged intent, restyled) */ .notification-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin-left: 8px; background: var(--rose-fg); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* Utilities */ .hidden { display: none !important; } .mono { font-family: var(--font-mono); } .muted { color: var(--ink-3); } /* Loading */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--line); border-radius: 50%; border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; } /* Celebration overlay (kept as-is semantically) */ .celebration-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .confetti { position: absolute; width: 10px; height: 10px; background: #f0f; animation: confetti-fall 3s linear forwards; } @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .celebration-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; font-weight: bold; color: var(--green-fg); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); animation: celebration-bounce 0.6s ease-out; pointer-events: none; z-index: 10000; } @keyframes celebration-bounce { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* Image preview */ .image-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; } .image-preview-item { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--paper-2); } .image-preview-item img { width: 100%; height: 100%; object-fit: cover; } .image-preview-item .remove-btn { position: absolute; top: 6px; right: 6px; background: var(--rose-fg); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 13px; } .image-preview-item .remove-btn:hover { background: #7F1818; } .image-preview-item.marked-remove { opacity: 0.45; border-color: var(--rose-fg); } .image-preview-item.marked-remove::after { content: 'Marked for removal'; position: absolute; left: 0; right: 0; bottom: 0; background: rgba(155, 28, 28, 0.9); color: #fff; font-size: 11px; text-align: center; padding: 4px 0; } /* Lightbox */ .lightbox { display: none; position: fixed; z-index: 10000; inset: 0; background: rgba(22, 20, 19, 0.9); align-items: center; justify-content: center; } .lightbox.active { display: flex; } .lightbox img { max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 36px; font-weight: 700; cursor: pointer; transition: color 0.2s ease; background: none; border: none; padding: 0; } .lightbox-close:hover { color: var(--accent); background: none; } /* Accent-agnostic focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }