sync: pull progress gradient fills and SLA banner from web_template v1.2

Progress bars now use linear-gradient fills for a more dramatic terminal
readout appearance (matches web_template 39862fa):
- Default (orange), --cyan, --green, --red variants all upgraded from flat
  accent colors to directional gradients with highlight endpoints

SLA banner component (lt-sla-p1 / lt-sla-p2) added to base.css, replacing
the lt-alert workaround previously used for P1/P2 SLA display:
- lt-sla-p1: pulsing red banner (animation: lt-sla-pulse 2s)
- lt-sla-p2: static amber banner
- Subcomponents: icon, info, title, bar, fill, meta, dismiss
- Both fills use gradients for visual consistency (P2 amber→#ffd740)
- lt-sla-dismiss includes transition + :focus-visible ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -1,6 +1,7 @@
 # Tinker Tickets
 
 [![Lint](https://code.lotusguild.org/LotusGuild/tinker_tickets/actions/workflows/lint.yml/badge.svg)](https://code.lotusguild.org/LotusGuild/tinker_tickets/actions?workflow=lint.yml)
+[![Security](https://code.lotusguild.org/LotusGuild/tinker_tickets/actions/workflows/security.yml/badge.svg)](https://code.lotusguild.org/LotusGuild/tinker_tickets/actions?workflow=security.yml)
 
 A feature-rich PHP-based ticketing system designed for tracking and managing data center infrastructure issues with enterprise-grade workflow management and a retro terminal aesthetic.
 
@@ -569,12 +570,13 @@ Key conventions and gotchas for working with this codebase:
 |---|---|---|
 | `lint.yml` (php-lint) | phpcs PSR-12 standard | Every push and PR |
 | `lint.yml` (js-lint) | ESLint on `assets/js/` | Every push and PR |
-| `security.yml` | `npm audit --audit-level=high` (not applicable — no runtime npm deps) | — |
+| `security.yml` | semgrep with `p/php` + `p/owasp-top-ten` configs | Every push, PR, and weekly (Monday 6am) |
-| `deploy` job in `lint.yml` | Calls deploy webhooks on CT132 (10.10.10.45): `tinker-deploy` (main) or `tinker-beta-deploy` (development) | Push to `main` or `development`, after both lint jobs pass |
+| `deploy` job in `lint.yml` | Calls deploy webhooks on CT132 (10.10.10.45): `tinker-deploy` (main) or `tinker-beta-deploy` (development); tags deployed commit `deploy-YYYY.MM.DD-N` | Push to `main` or `development`, after both lint jobs pass |
+| `notify-failure` job in `lint.yml` | Posts CI failure alert to Matrix via webhook | Push to any branch when lint fails |
 
 Branch protection is enabled on `main` — both lint jobs must pass before any PR can merge.
 
-Lint config: `.phpcs.xml` (PSR-12 with project-specific tweaks), `.eslintrc.json` per directory.
+Lint config: `.phpcs.xml` (PSR-12 with project-specific tweaks), `.eslintrc.json` (root, browser env).
 
 ## License
 

assets/css/base.css

@@ -2458,7 +2458,7 @@ select option:checked {
 }
 .lt-progress-bar {
   height: 100%;
-  background: var(--accent-orange);
+  background: linear-gradient(90deg, var(--accent-orange), #ff8c2b);
   box-shadow: var(--glow-orange);
   transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
@@ -2471,9 +2471,9 @@ select option:checked {
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
 }
-.lt-progress--cyan .lt-progress-bar  { background: var(--accent-cyan);   box-shadow: var(--glow-cyan); }
+.lt-progress--cyan .lt-progress-bar  { background: linear-gradient(90deg, var(--accent-cyan),  #33dfff); box-shadow: var(--glow-cyan); }
-.lt-progress--green .lt-progress-bar { background: var(--accent-green);  box-shadow: var(--glow-green); }
+.lt-progress--green .lt-progress-bar { background: linear-gradient(90deg, var(--accent-green), #33ffaa); box-shadow: var(--glow-green); }
-.lt-progress--red .lt-progress-bar   { background: var(--accent-red);    box-shadow: var(--glow-red); }
+.lt-progress--red .lt-progress-bar   { background: linear-gradient(90deg, var(--accent-red),   #ff4466); box-shadow: var(--glow-red); }
 .lt-progress--striped .lt-progress-bar {
   background-image: repeating-linear-gradient(
     45deg, transparent, transparent 4px,
@@ -4479,7 +4479,83 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
 
 
 /* ----------------------------------------------------------------
-   61. TIMELINE / ACTIVITY FEED
+   61. SLA BANNER
+   ----------------------------------------------------------------
+   lt-sla-p1 — pulsing red banner for critical SLA breach
+   lt-sla-p2 — static amber banner for high-priority SLA warning
+   ---------------------------------------------------------------- */
+.lt-sla-p1,
+.lt-sla-p2 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.6rem 1rem;
+  border: 1px solid;
+  font-family: var(--font-mono);
+}
+.lt-sla-p1 {
+  border-color: rgba(255,45,85,0.4);
+  background: rgba(255,45,85,0.08);
+  animation: lt-sla-pulse 2s infinite;
+}
+.lt-sla-p2 {
+  border-color: rgba(255,179,0,0.4);
+  background: rgba(255,179,0,0.08);
+}
+@keyframes lt-sla-pulse {
+  0%, 100% { box-shadow: 0 0 8px  rgba(255,45,85,0.20); }
+  50%       { box-shadow: 0 0 20px rgba(255,45,85,0.45); }
+}
+.lt-sla-icon  { font-size: 1rem; flex-shrink: 0; }
+.lt-sla-info  { flex: 1; min-width: 0; }
+.lt-sla-title {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: 4px;
+}
+.lt-sla-p1 .lt-sla-title { color: var(--accent-red);   text-shadow: var(--glow-red); }
+.lt-sla-p2 .lt-sla-title { color: var(--accent-amber); text-shadow: var(--glow-amber); }
+.lt-sla-bar {
+  height: 5px;
+  background: rgba(255,255,255,0.08);
+  position: relative;
+  overflow: hidden;
+}
+.lt-sla-fill {
+  height: 100%;
+  width: 0%;
+  transition: width 0.4s ease;
+}
+.lt-sla-p1 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-red),   var(--accent-orange)); box-shadow: 0 0 8px rgba(255,45,85,0.6); }
+.lt-sla-p2 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-amber), #ffd740);             box-shadow: 0 0 8px rgba(255,179,0,0.6); }
+.lt-sla-meta {
+  font-size: 0.60rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  flex-shrink: 0;
+}
+.lt-sla-dismiss {
+  font-size: 0.70rem;
+  color: var(--text-dim);
+  cursor: pointer;
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  padding: 0 0.25rem;
+  font-family: var(--font-mono);
+  transition: color 0.15s ease;
+}
+.lt-sla-dismiss:hover        { color: var(--text-secondary); }
+.lt-sla-dismiss:focus-visible { outline: 1px dashed var(--accent-cyan); outline-offset: 2px; }
+html[data-theme="light"] .lt-sla-p1 { background: rgba(180,30,50,0.06); border-color: rgba(180,30,50,0.35); }
+html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06);  border-color: rgba(138,90,0,0.35); }
+
+
+/* ----------------------------------------------------------------
+   62. TIMELINE / ACTIVITY FEED
    ---------------------------------------------------------------- */
 .lt-timeline {
   display: flex;