Template:Category/Project/styles.css

/* TemplateStyles for {{Category/Project}} — per-project masthead
   (status badge, kicker, description lead, goal, action chips,
   funding line) plus a "Related content" section block below it.

   Sanitizer constraints (MW 1.44.5 / css-sanitizer 5.5.0): var() is
   accepted in `background`, `color`, and `border` shorthand, but
   rejected in `border-color` longhand, `border-radius`, `box-shadow`,
   `padding`, `margin`, and most numeric properties. Same convention
   as the other category styles — geometry literal, color tokens
   through var(). */

.project-masthead {
	position: relative;
	margin: 0 0 1.5em 0;
	padding-right: 9em; /* leave room for the absolute-positioned status badge */
	min-height: 2em;
}

/* Status badge — pinned top-right of the masthead, color-coded.
   Same semantic palette as the workshop card status badges in
   upcoming_events_featured/styles.css; literal hex per the
   var()-in-color-shorthand sanitizer restriction. */
.project-badge {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.project-badge-active {
	background: #2E7D32;
	color: #ffffff;
}

.project-badge-maintained {
	background: #1976D2;
	color: #ffffff;
}

.project-badge-development {
	background: #C77700;
	color: #ffffff;
}

.project-badge-planned {
	background: var(--labki-accent, #2774AE);
	color: #ffffff;
}

/* Both "depricated" (the typo'd enum value currently in
   Has_project_status) and the correct "deprecated" map to the same
   gray treatment, so a future typo cleanup doesn't break styling. */
.project-badge-deprecated {
	background: #6B7280;
	color: #ffffff;
}

.project-badge-cancelled {
	background: #B91C1C;
	color: #ffffff;
}

.project-badge-other {
	background: var(--labki-bg-subtle, #f4f6f8);
	color: var(--labki-text, #2c2c2c);
	border: 1px solid var(--labki-border, #d8dde2);
}

/* Kicker — small uppercased meta strip above the description.
   Matches the document-kicker idiom in Category/Document/styles.css. */
.project-kicker {
	color: var(--labki-text-muted, #5a6a7a);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.4em;
}

.project-kicker .project-status {
	color: var(--labki-accent, #2774AE);
	font-weight: 600;
}

/* Parent-project hint — only renders when Has parent project is set,
   italic + muted so it reads as a breadcrumb-ish kicker without
   stealing focus from the description lead. */
.project-parent {
	font-size: 0.9rem;
	font-style: italic;
	color: var(--labki-text-muted, #5a6a7a);
	margin-bottom: 0.5em;
}

/* Description lead — same italic accent-left treatment as the
   document-lead, so a Project page reads as a sibling visual of
   a Guide / SOP / Policy page. */
.project-lead {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--labki-text, #2c2c2c);
	font-style: italic;
	margin: 0.6em 0;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid var(--labki-accent, #2774AE);
}

/* Goal — distinct from description: not italic, with a labeled
   prefix. Visually subordinate to the lead but more prominent
   than plain body text. */
.project-goal {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--labki-text, #2c2c2c);
	margin: 0.6em 0;
	padding: 0.4em 0.8em;
	background: var(--labki-bg-subtle, #f4f6f8);
	border-radius: 4px;
}

.project-goal-label {
	font-weight: 600;
	color: var(--labki-accent, #2774AE);
}

/* Action chip row — Repository / Website / DOI. The buttons are
   styled by Template:UI/button's TemplateStyles; we just space
   them out here. */
.project-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 0.8em 0 0.4em 0;
}

.project-doi {
	font-size: 0.85rem;
	color: var(--labki-text-muted, #5a6a7a);
}

.project-doi code {
	background: var(--labki-bg-subtle, #f4f6f8);
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 0.85rem;
	border: 1px solid var(--labki-border, #d8dde2);
}

.project-funding {
	font-size: 0.85rem;
	color: var(--labki-text-muted, #5a6a7a);
	margin-top: 0.4em;
}

/* ---------- Related content block ---------- */

/* Sits below the masthead. The h2 headings inside use the wiki's
   default heading styling so they integrate with the rest of the
   page chrome (TOC numbering, edit links, anchors). Only the
   per-section empty-state needs styling. */

.project-related {
	margin: 2em 0 0 0;
}

.project-related-empty {
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	margin: 0.4em 0 1em 0;
}