Template:Deployment/styles.css

/* Deployment page styles — theme-aware via Citizen vars. Brand teal #0f8b6c, ink #173d34. */

.ohc-deploy-sidebar { float: right; clear: right; width: 320px; max-width: 100%; margin: 0 0 1em 1em; background: var(--color-surface-1, #ffffff); border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); border-radius: 14px; font-size: 0.85em; overflow: hidden; }
.ohc-deploy-sidebar__title { background: #173d34; color: #fff; font-family: 'Figtree', 'Switzer', sans-serif; text-align: center; font-weight: 700; padding: 0.55em 0.6em; font-size: 1.05em; }
.ohc-deploy-sidebar__group { border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); }
.ohc-deploy-sidebar__group-title { background: var(--color-surface-2, #f8f9fa); color: var(--color-emphasized, #202122); padding: 0.35em 0.7em; font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; }
.ohc-deploy-sidebar__items { padding: 0.25em 0; }
.ohc-deploy-sidebar__items p { margin: 0; }
.ohc-deploy-sidebar__items br { display: none; }
.ohc-deploy-sidebar__item { display: block; color: var(--color-base, #202122); padding: 0.2em 0.7em 0.2em 1.2em; line-height: 1.5; }

@media (max-width: 72em) { .ohc-deploy-sidebar { float: none; width: 100%; margin: 1em 0; } }

.deployment-infra { width: 100%; border-collapse: collapse; margin: 0.8em 0; }
.deployment-infra th, .deployment-infra td { text-align: left; vertical-align: top; padding: 0.6em 0.8em; line-height: 1.6; }
.deployment-infra th { font-weight: 700; white-space: nowrap; width: 10em; background: var(--color-surface-2, #f8f9fa); color: var(--color-emphasized, #202122); border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); }
.deployment-infra td { background: var(--color-surface-1, #ffffff); color: var(--color-base, #202122); border-bottom: 1px solid var(--border-color-subtle, rgba(0,0,0,0.05)); }

.deployment-infra tr.deployment-row--fe th  { background: rgba(15,139,108,0.12); color: #0b6b53; }
.deployment-infra tr.deployment-row--be th  { background: rgba(37,99,235,0.10);  color: #1e40af; }
.deployment-infra tr.deployment-row--db th  { background: rgba(234,179,8,0.10);   color: #854d0e; }
.deployment-infra tr.deployment-row--sto th { background: rgba(168,85,247,0.10);  color: #7e22ce; }

@media (prefers-color-scheme: dark) {
  .deployment-infra tr.deployment-row--fe th  { background: rgba(15,139,108,0.22); color: #86efac; }
  .deployment-infra tr.deployment-row--be th  { background: rgba(37,99,235,0.20);  color: #93c5fd; }
  .deployment-infra tr.deployment-row--db th  { background: rgba(234,179,8,0.20);   color: #fde047; }
  .deployment-infra tr.deployment-row--sto th { background: rgba(168,85,247,0.20);  color: #c4b5fd; }
}

.deployment-plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 1em 0; }
.deployment-plugin-grid::after { content: ""; clear: both; display: table; }

.deployment-plugin-card { border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); border-radius: 12px; padding: 14px; background: var(--color-surface-1, #ffffff); transition: box-shadow 0.15s; }
.deployment-plugin-card:hover { box-shadow: 0 4px 14px rgba(15,139,108,0.14); }

.deployment-plugin-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.deployment-plugin-card__header p, .deployment-plugin-card__description p, .deployment-plugin-card__footer p { margin: 0; }
.deployment-plugin-card__name { font-weight: 600; font-size: 1em; margin-right: auto; color: var(--color-progressive, #0f8b6c); text-decoration: none; }
.deployment-plugin-card__name:hover { text-decoration: underline; }

.deployment-plugin-card__badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 0.75em; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.deployment-plugin-card__badge--be { background: rgba(3,105,161,0.1); color: #0369a1; border: 1px solid rgba(3,105,161,0.2); }
.deployment-plugin-card__badge--fe { background: rgba(190,24,93,0.1); color: #be185d; border: 1px solid rgba(190,24,93,0.2); }
.deployment-plugin-card__badge--both { background: rgba(15,139,108,0.1); color: #0f8b6c; border: 1px solid rgba(15,139,108,0.2); }
.deployment-plugin-card__badge--active { background: rgba(22,163,74,0.1); color: #15803d; border: 1px solid rgba(22,163,74,0.2); }
.deployment-plugin-card__badge--stable { background: rgba(29,78,216,0.1); color: #1d4ed8; border: 1px solid rgba(29,78,216,0.2); }
.deployment-plugin-card__badge--experimental { background: rgba(194,65,12,0.1); color: #c2410c; border: 1px solid rgba(194,65,12,0.2); }
.deployment-plugin-card__badge--deprecated { background: rgba(185,28,28,0.1); color: #b91c1c; border: 1px solid rgba(185,28,28,0.2); }

@media (prefers-color-scheme: dark) {
  .deployment-plugin-card__badge--be { color: #7dd3fc; }
  .deployment-plugin-card__badge--fe { color: #f9a8d4; }
  .deployment-plugin-card__badge--both { color: #6ee7b7; }
  .deployment-plugin-card__badge--active { color: #86efac; }
  .deployment-plugin-card__badge--stable { color: #93c5fd; }
  .deployment-plugin-card__badge--experimental { color: #fdba74; }
  .deployment-plugin-card__badge--deprecated { color: #fca5a5; }
}

.deployment-plugin-card__description { color: var(--color-subtle, #54595d); font-size: 0.88em; line-height: 1.5; margin-bottom: 8px; }
.deployment-plugin-card__footer { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8em; color: var(--color-subtle, #64748b); align-items: center; }
.deployment-plugin-card__tag { background: var(--color-surface-2, #f1f5f9); padding: 1px 6px; border-radius: 5px; color: var(--color-base, #475569); }