|
|
| Line 1: |
Line 1: |
| /* ==========================================================================
| |
| 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;
| |
| }
| |
