MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* cmp.wiki palette for the Citizen skin (wiki lane, 2026-10-30).
   Fonts (Unbounded, Inter, JetBrains Mono) and the shared header come from /shared/header.css, loaded on every page. */
:root {
	--font-family-citizen-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-family-citizen-monospace: "JetBrains Mono", ui-monospace, monospace;
	/* teal accent #5ef2e8 = oklch(87.97% 0.1261 188.85); darker on the day theme so links stay readable */
	--color-progressive-oklch__h: 188.85;
	--color-progressive-oklch__c: 0.1261;
	--color-progressive-oklch__l: 52%;
}
:root.skin-theme-clientpref-night {
	--color-progressive-oklch__l: 87.97%;
	--color-surface-0-oklch__l: 13.4%;
	--color-surface-0-oklch__c: 0.005;
	--color-base: #e9e6df;
	--color-emphasized: #ffffff;
	--color-subtle: #a6acb4;
	--border-color-base: #222830;
}
@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		--color-progressive-oklch__l: 87.97%;
		--color-surface-0-oklch__l: 13.4%;
		--color-surface-0-oklch__c: 0.005;
		--color-base: #e9e6df;
		--color-emphasized: #ffffff;
		--color-subtle: #a6acb4;
		--border-color-base: #222830;
	}
}
/* display type for titles and section headings */
#firstHeading,
.mw-parser-output .mw-heading2 h2,
.mw-parser-output > h2 {
	font-family: "Unbounded", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}
/* orange for the secondary accent */
.mw-parser-output .cmpw-accent { color: #ff8a3d; }

/* shared site header (design lane): pinned on top of every page, Citizen's own header starts below it */
.cmp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
body { padding-top: 96px; }
@media (min-width: 980px) {
	body { padding-top: var(--cmp-header-h, 60px); }
	.citizen-header { top: var(--cmp-header-h, 60px); }
}
/* the header markup arrives through the site notice slot; keep that slot from adding its own spacing */
#siteNotice:has(> .cmp-header) { margin: 0; padding: 0; }