Citizen.css: Difference between revisions

/* ==========================================================================
   The Canon of Nora — Citizen skin overrides
   Paste this into MediaWiki:Citizen.css on-wiki
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  /* Palette — pulled from mockup */
  --canon-plum-darkest: #2a1a40;
  --canon-plum-dark:    #3d2563;
  --canon-plum:         #4a2d73;
  --canon-gold:         #b8923f;
  --canon-gold-light:   #d4af6a;
  --canon-cream:        #f6f3f9;
  --canon-lavender:     #ece6f4;
  --canon-text-dark:    #2a1a40;
  --canon-text-muted:   #6b6378;

  /* Citizen's legacy token formula ties EVERY surface color's hue to
     --color-progressive-oklch__h (see tokens-theme-base.less). That means
     surfaces can't be tinted independently from the accent color through
     the sub-variables alone. So below we override the FINAL computed
     custom properties directly — these win in the cascade regardless of
     Citizen's internal formula, since they're plain CSS custom props
     evaluated at render time, not Less variables. */
}

:root {
  /* Accent / progressive color */
  --color-progressive: var(--canon-plum);
  --color-progressive--hover: var(--canon-plum-dark);
  --color-progressive--active: var(--canon-plum-darkest);

  /* Surface scale: 0 = page bg, 1-2 = nested panels, 3-4 = cards/elevated */
  --color-surface-0: var(--canon-cream);
  --color-surface-1: #f1ecf8;
  --color-surface-2: var(--canon-lavender);
  --color-surface-3: #ffffff;
  --color-surface-4: #ffffff;

  /* Text hierarchy */
  --color-emphasized: var(--canon-plum-darkest);
  --color-base: var(--canon-text-dark);
  --color-subtle: var(--canon-text-muted);

  /* Links */
  --color-link: var(--canon-plum);
  --color-link--hover: var(--canon-plum-darkest);
  --color-link--active: var(--canon-plum-darkest);

  --border-color-base: var(--canon-gold-light);
}

/* Typography */
body,
.citizen-body-content,
.citizen-ui-text {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.citizen-page-heading,
.firstHeading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  color: var(--canon-plum-darkest);
  letter-spacing: 0.01em;
}

.firstHeading {
  font-size: 2.4em;
  font-weight: 700;
}

/* Sidebar / logo area */
#mw-panel,
.citizen-sidebar {
  background-color: var(--color-surface-2);
  border-right: 1px solid var(--canon-gold-light);
}

.citizen-sidebar .mw-portlet-label,
.citizen-sidebar .citizen-menu-heading {
  font-family: 'Cormorant Garamond', serif;
  color: var(--canon-plum-darkest);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Active sidebar link (e.g. "Main Page") */
.citizen-sidebar .selected > a,
.citizen-sidebar a.is-active {
  background-color: var(--canon-plum-darkest);
  color: var(--canon-cream) !important;
  border-radius: 6px;
}

/* Buttons */
.cdx-button--action-progressive,
.canon-button-primary {
  background-color: var(--canon-plum-darkest);
  border-color: var(--canon-plum-darkest);
  color: var(--canon-cream);
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  border-radius: 8px;
}

.canon-button-secondary {
  background-color: transparent;
  border: 1px solid var(--canon-plum-darkest);
  color: var(--canon-plum-darkest);
  border-radius: 8px;
}

/* Home portal cards (used on Main Page via Template:Home portal) */
.canon-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2em;
  margin: 1.5em 0;
}

.canon-portal-card {
  background: var(--color-surface-3);
  border: 1px solid var(--canon-gold-light);
  border-radius: 10px;
  padding: 1.2em 1.4em;
  box-shadow: 0 1px 3px rgba(42, 26, 64, 0.06);
}

.canon-portal-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3em;
  border-bottom: 1px solid var(--canon-gold-light);
  padding-bottom: 0.4em;
  margin-bottom: 0.6em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.canon-portal-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.canon-portal-card li a {
  display: flex;
  justify-content: space-between;
  padding: 0.35em 0;
  color: var(--canon-plum);
  border-bottom: 1px solid #f0ecf6;
  text-decoration: none;
}

.canon-portal-card li:last-child a {
  border-bottom: none;
}

/* Hero / welcome banner on Main Page */
.canon-hero {
  background: #ffffff;
  border: 1px solid var(--canon-gold-light);
  border-radius: 14px;
  padding: 2em;
  display: flex;
  gap: 2em;
  align-items: center;
  margin-bottom: 1.5em;
}

.canon-hero h1 {
  font-size: 2.2em;
  margin-top: 0;
}

.canon-hero p {
  color: var(--canon-text-muted);
  font-size: 1.05em;
  line-height: 1.6;
}