/**
* For Vector 2022 implementation, see [[MediaWiki:Vector-2022.css]]
*/

@font-face {
font-family: "Poppins";
src: url("https://www.creopedia.net/w/images/4/41/Poppins-VariableFont_wght.woff2")
format("woff2");
font-weight: 100 900; /* variable wght axis: 100-900 */
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Poppins Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica");
size-adjust: 108.3444%;
ascent-override: 96.9132%;
descent-override: 32.3044%;
line-gap-override: 9.2298%;
}

:root {
--cp-font-poppins: "Poppins", "Poppins Fallback";
--cp-font-family-heading:
var(--cp-font-poppins), Georgia, "Times New Roman", serif;
--cp-font-family-body:
var(--cp-font-poppins), system-ui, -apple-system, sans-serif;
--cp-logo-wordmark: url(https://www.creopedia.net/w/images/3/38/Creopedia-wordmark.webp);
--cp-page-background-tile: url(https://www.creopedia.net/w/images/6/62/Creopedia-bg-pattern.webp);
--cp-page-background-size: 480px;
--cp-header-background: url(https://www.creopedia.net/w/images/f/f4/Header-background-left.webp);
--cp-header-background-size: 300px;
}

/* This is specific enough to override all skin-theme-clientpref- variables */
html:root {
/* Text / ink */
--color-base: light-dark(oklch(0.305 0.018 256), oklch(0.902 0.008 256));
--color-base--hover: light-dark(
oklch(0.378 0.018 256),
oklch(0.945 0.004 256)
);
--color-base--subtle: light-dark(
oklch(0.461 0.028 256),
oklch(0.732 0.028 256)
);
--color-emphasized: light-dark(
oklch(0.245 0.018 256),
oklch(0.945 0.004 256)
);
--color-subtle: light-dark(oklch(0.461 0.028 256), oklch(0.732 0.028 256));
--color-placeholder: light-dark(
oklch(0.567 0.028 256),
oklch(0.62 0.028 256)
);
--color-disabled: light-dark(oklch(0.64 0.026 256), oklch(0.52 0.026 256));
--color-inverted: light-dark(
oklch(0.992 0.004 256),
oklch(0.189 0.016 256)
);
--color-notice: light-dark(oklch(0.305 0.018 256), oklch(0.945 0.004 256));

/* Surfaces */
--background-color-base: light-dark(
oklch(0.985 0.007 256),
oklch(0.18 0.024 256)
);
--background-color-neutral: light-dark(
oklch(0.943 0.014 256),
oklch(0.281 0.026 256)
);
--background-color-neutral-subtle: light-dark(
oklch(0.975 0.011 256),
oklch(0.225 0.03 256)
);
--background-color-interactive: light-dark(
oklch(0.925 0.015 256),
oklch(0.305 0.028 256)
);
--background-color-interactive-subtle: light-dark(
oklch(0.965 0.014 256),
oklch(0.235 0.03 256)
);
--background-color-disabled: light-dark(
oklch(0.86 0.018 256),
oklch(0.43 0.022 256)
);
--background-color-disabled-subtle: light-dark(
oklch(0.93 0.018 256),
oklch(0.33 0.03 256)
);
--background-color-inverted: light-dark(
oklch(0.18 0.024 256),
oklch(0.982 0.006 256)
);

/* Borders */
--border-color-base: light-dark(
oklch(0.79 0.013 256),
oklch(0.47 0.016 256)
);
--border-color-subtle: light-dark(
oklch(0.875 0.013 256),
oklch(0.4 0.016 256)
);
--border-color-muted: light-dark(
oklch(0.912 0.013 256),
oklch(0.33 0.018 256)
);
--border-color-interactive: light-dark(
oklch(0.567 0.016 256),
oklch(0.732 0.013 256)
);
--border-color-disabled: light-dark(
oklch(0.844 0.013 256),
oklch(0.461 0.016 256)
);
--border-color-inverted: light-dark(
oklch(0.992 0.004 256),
oklch(0.189 0.016 256)
);
--border-color-divider: light-dark(
oklch(0.79 0.013 256),
oklch(0.47 0.016 256)
);
--border-color-notice: light-dark(
oklch(0.461 0.016 256),
oklch(0.844 0.013 256)
);

/* Progressive: accent, links, primary actions (hue 256) */
--color-progressive: light-dark(
oklch(0.53 0.158 256),
oklch(0.722 0.105 256)
);
--color-progressive--hover: light-dark(
oklch(0.585 0.15 256),
oklch(0.814 0.069 256)
);
--color-progressive--active: light-dark(
oklch(0.342 0.09 256),
oklch(0.878 0.046 256)
);
--color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--background-color-progressive: oklch(0.53 0.158 256);
--background-color-progressive--hover: oklch(0.585 0.15 256);
--background-color-progressive--active: oklch(0.342 0.09 256);
--background-color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--background-color-progressive-subtle: light-dark(
oklch(0.967 0.018 256),
oklch(0.33 0.07 256)
);
--background-color-input-binary--checked: oklch(0.53 0.158 256);
--border-color-progressive: oklch(0.53 0.158 256);
--border-color-progressive--hover: oklch(0.585 0.15 256);
--border-color-progressive--active: oklch(0.342 0.09 256);
--border-color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--box-shadow-color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);

/* Destructive: red */
--color-destructive: light-dark(
oklch(0.579 0.201 26),
oklch(0.725 0.166 30)
);
--color-destructive--hover: light-dark(
oklch(0.662 0.217 29),
oklch(0.812 0.105 31)
);
--color-destructive--active: light-dark(
oklch(0.482 0.144 31),
oklch(0.879 0.065 31)
);
--color-destructive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--color-destructive--visited: light-dark(
oklch(0.537 0.098 21),
oklch(0.715 0.066 21)
);
--background-color-destructive: oklch(0.579 0.201 26);
--background-color-destructive--hover: oklch(0.662 0.217 29);
--background-color-destructive--active: oklch(0.482 0.144 31);
--background-color-destructive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--background-color-destructive-subtle: light-dark(
oklch(0.951 0.025 30),
oklch(0.349 0.092 32)
);
--border-color-destructive: oklch(0.579 0.201 26);
--border-color-destructive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);

/* Error: red */
--color-error: light-dark(oklch(0.579 0.201 26), oklch(0.725 0.166 30));
--background-color-error: light-dark(
oklch(0.579 0.201 26),
oklch(0.662 0.217 29)
);
--background-color-error--hover: light-dark(
oklch(0.662 0.217 29),
oklch(0.725 0.166 30)
);
--background-color-error--active: light-dark(
oklch(0.482 0.144 31),
oklch(0.812 0.105 31)
);
--background-color-error-subtle: light-dark(
oklch(0.951 0.025 30),
oklch(0.349 0.092 32)
);
--border-color-error: light-dark(
oklch(0.482 0.144 31),
oklch(0.662 0.217 29)
);
--border-color-error--hover: light-dark(
oklch(0.662 0.217 29),
oklch(0.725 0.166 30)
);

/* Warning: amber */
--color-warning: light-dark(oklch(0.805 0.151 83), oklch(0.867 0.156 88));
--background-color-warning-subtle: light-dark(
oklch(0.962 0.04 90),
oklch(0.332 0.049 74)
);
--border-color-warning: light-dark(
oklch(0.572 0.101 79),
oklch(0.867 0.156 88)
);

/* Success: green */
--color-success: light-dark(oklch(0.513 0.094 171), oklch(0.691 0.125 171));
--background-color-success-subtle: light-dark(
oklch(0.945 0.022 172),
oklch(0.327 0.05 171)
);
--border-color-success: light-dark(
oklch(0.456 0.08 171),
oklch(0.691 0.125 171)
);

/* Visited link: violet */
--color-visited: light-dark(oklch(0.536 0.122 287), oklch(0.713 0.076 297));

/* Diff content: added (on-hue blue) / removed (amber) */
--color-content-added: light-dark(
oklch(0.436 0.12 200),
oklch(0.791 0.086 200)
);
--color-content-removed: light-dark(
oklch(0.4 0.164 29),
oklch(0.725 0.166 30)
);
--background-color-content-added: light-dark(
oklch(0.849 0.06 256),
oklch(0.342 0.06 256)
);
--background-color-content-removed: light-dark(
oklch(0.925 0.095 90),
oklch(0.332 0.049 74)
);
--border-color-content-added: light-dark(
oklch(0.849 0.06 256),
oklch(0.342 0.06 256)
);
--border-color-content-removed: light-dark(
oklch(0.925 0.095 90),
oklch(0.332 0.049 74)
);
}

/* Use nearest-neighbor scaling for pixelated images */
.cp-image-pixelated {
image-rendering: pixelated;
}

/**
* RelatedArticles reserves min-height on its container (163px on desktop,
* 320px below 1120px) so its cards do not shift the page when they load.
* Creopedia has no related articles, so the container stays empty on every
* page and that reserved space renders as a large gap between the category
* bar and the footer.
*/
html.client-js .read-more-container {
min-height: 0;
}

html.client-js .read-more-container:empty {
padding: 0;
}

File:Header-background-left.webp

2026-08-04T18:38:28Z

Professional Wiki: Professional Wiki uploaded a new version of File:Header-background-left.webp

2026-06-03T04:16:03Z

Professional Wiki: Protected "File:Creopedia-wordmark.svg" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite) [Upload=Allow only administrators] (indefinite))

2026-06-03T02:00:32Z

Professional Wiki: Swap heading font Nippo -> Cinzel (new @font-face, recomputed serif fallback metrics, rename --cp-font-nippo to --cp-font-cinzel) (via update-page on MediaWiki MCP Server)

/**
* For Vector 2022 implementation, see [[MediaWiki:Vector-2022.css]]
*/

@font-face {
font-family: "Poppins";
src: url("https://www.creopedia.net/w/images/4/41/Poppins-VariableFont_wght.woff2")
format("woff2");
font-weight: 100 900; /* variable wght axis: 100-900 */
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Cinzel";
src: url("https://www.creopedia.net/w/images/3/35/Cinzel-VariableFont_wght.woff2")
format("woff2");
font-weight: 400 900; /* variable wght axis: 400-900 */
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Poppins Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica");
size-adjust: 108.3444%;
ascent-override: 96.9132%;
descent-override: 32.3044%;
line-gap-override: 9.2298%;
}

@font-face {
/* Serif fallback matched to Cinzel's metrics (Times New Roman reference)
* to minimise layout shift during font swap. */
font-family: "Cinzel Fallback";
src: local("Times New Roman"), local("Times");
size-adjust: 125.8316%;
ascent-override: 77.564%;
descent-override: 29.5633%;
line-gap-override: 0%;
}

:root {
--cp-font-cinzel: "Cinzel", "Cinzel Fallback";
--cp-font-poppins: "Poppins", "Poppins Fallback";
--cp-font-family-heading:
var(--cp-font-cinzel), Georgia, "Times New Roman", serif;
--cp-font-family-body:
var(--cp-font-poppins), system-ui, -apple-system, sans-serif;
--cp-page-background-tile: url(https://www.creopedia.net/w/images/6/62/Creopedia-bg-pattern.webp);
--cp-page-background-size: 480px;
--cp-header-background: url(https://www.creopedia.net/w/images/f/f4/Header-background-left.webp);
--cp-header-background-size: 300px;
}

/* This is specific enough to override all skin-theme-clientpref- variables */
html:root {
/* Text / ink */
--color-base: light-dark(oklch(0.305 0.018 256), oklch(0.902 0.008 256));
--color-base--hover: light-dark(
oklch(0.378 0.018 256),
oklch(0.945 0.004 256)
);
--color-base--subtle: light-dark(
oklch(0.461 0.028 256),
oklch(0.732 0.028 256)
);
--color-emphasized: light-dark(
oklch(0.245 0.018 256),
oklch(0.945 0.004 256)
);
--color-subtle: light-dark(oklch(0.461 0.028 256), oklch(0.732 0.028 256));
--color-placeholder: light-dark(
oklch(0.567 0.028 256),
oklch(0.62 0.028 256)
);
--color-disabled: light-dark(oklch(0.64 0.026 256), oklch(0.52 0.026 256));
--color-inverted: light-dark(
oklch(0.992 0.004 256),
oklch(0.189 0.016 256)
);
--color-notice: light-dark(oklch(0.305 0.018 256), oklch(0.945 0.004 256));

/* Surfaces */
--background-color-base: light-dark(
oklch(0.985 0.007 256),
oklch(0.18 0.024 256)
);
--background-color-neutral: light-dark(
oklch(0.943 0.014 256),
oklch(0.281 0.026 256)
);
--background-color-neutral-subtle: light-dark(
oklch(0.975 0.011 256),
oklch(0.225 0.03 256)
);
--background-color-interactive: light-dark(
oklch(0.925 0.015 256),
oklch(0.305 0.028 256)
);
--background-color-interactive-subtle: light-dark(
oklch(0.965 0.014 256),
oklch(0.235 0.03 256)
);
--background-color-disabled: light-dark(
oklch(0.86 0.018 256),
oklch(0.43 0.022 256)
);
--background-color-disabled-subtle: light-dark(
oklch(0.93 0.018 256),
oklch(0.33 0.03 256)
);
--background-color-inverted: light-dark(
oklch(0.18 0.024 256),
oklch(0.982 0.006 256)
);

/* Borders */
--border-color-base: light-dark(
oklch(0.79 0.013 256),
oklch(0.47 0.016 256)
);
--border-color-subtle: light-dark(
oklch(0.875 0.013 256),
oklch(0.4 0.016 256)
);
--border-color-muted: light-dark(
oklch(0.912 0.013 256),
oklch(0.33 0.018 256)
);
--border-color-interactive: light-dark(
oklch(0.567 0.016 256),
oklch(0.732 0.013 256)
);
--border-color-disabled: light-dark(
oklch(0.844 0.013 256),
oklch(0.461 0.016 256)
);
--border-color-inverted: light-dark(
oklch(0.992 0.004 256),
oklch(0.189 0.016 256)
);
--border-color-divider: light-dark(
oklch(0.79 0.013 256),
oklch(0.47 0.016 256)
);
--border-color-notice: light-dark(
oklch(0.461 0.016 256),
oklch(0.844 0.013 256)
);

/* Progressive: accent, links, primary actions (hue 256) */
--color-progressive: light-dark(
oklch(0.53 0.158 256),
oklch(0.722 0.105 256)
);
--color-progressive--hover: light-dark(
oklch(0.585 0.15 256),
oklch(0.814 0.069 256)
);
--color-progressive--active: light-dark(
oklch(0.342 0.09 256),
oklch(0.878 0.046 256)
);
--color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--background-color-progressive: oklch(0.53 0.158 256);
--background-color-progressive--hover: oklch(0.585 0.15 256);
--background-color-progressive--active: oklch(0.342 0.09 256);
--background-color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--background-color-progressive-subtle: light-dark(
oklch(0.967 0.018 256),
oklch(0.33 0.07 256)
);
--background-color-input-binary--checked: oklch(0.53 0.158 256);
--border-color-progressive: oklch(0.53 0.158 256);
--border-color-progressive--hover: oklch(0.585 0.15 256);
--border-color-progressive--active: oklch(0.342 0.09 256);
--border-color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--box-shadow-color-progressive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);

/* Destructive: red */
--color-destructive: light-dark(
oklch(0.579 0.201 26),
oklch(0.725 0.166 30)
);
--color-destructive--hover: light-dark(
oklch(0.662 0.217 29),
oklch(0.812 0.105 31)
);
--color-destructive--active: light-dark(
oklch(0.482 0.144 31),
oklch(0.879 0.065 31)
);
--color-destructive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--color-destructive--visited: light-dark(
oklch(0.537 0.098 21),
oklch(0.715 0.066 21)
);
--background-color-destructive: oklch(0.579 0.201 26);
--background-color-destructive--hover: oklch(0.662 0.217 29);
--background-color-destructive--active: oklch(0.482 0.144 31);
--background-color-destructive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);
--background-color-destructive-subtle: light-dark(
oklch(0.951 0.025 30),
oklch(0.349 0.092 32)
);
--border-color-destructive: oklch(0.579 0.201 26);
--border-color-destructive--focus: light-dark(
oklch(0.53 0.158 256),
oklch(0.64 0.13 256)
);

/* Error: red */
--color-error: light-dark(oklch(0.579 0.201 26), oklch(0.725 0.166 30));
--background-color-error: light-dark(
oklch(0.579 0.201 26),
oklch(0.662 0.217 29)
);
--background-color-error--hover: light-dark(
oklch(0.662 0.217 29),
oklch(0.725 0.166 30)
);
--background-color-error--active: light-dark(
oklch(0.482 0.144 31),
oklch(0.812 0.105 31)
);
--background-color-error-subtle: light-dark(
oklch(0.951 0.025 30),
oklch(0.349 0.092 32)
);
--border-color-error: light-dark(
oklch(0.482 0.144 31),
oklch(0.662 0.217 29)
);
--border-color-error--hover: light-dark(
oklch(0.662 0.217 29),
oklch(0.725 0.166 30)
);

/* Warning: amber */
--color-warning: light-dark(oklch(0.805 0.151 83), oklch(0.867 0.156 88));
--background-color-warning-subtle: light-dark(
oklch(0.962 0.04 90),
oklch(0.332 0.049 74)
);
--border-color-warning: light-dark(
oklch(0.572 0.101 79),
oklch(0.867 0.156 88)
);

/* Success: green */
--color-success: light-dark(oklch(0.513 0.094 171), oklch(0.691 0.125 171));
--background-color-success-subtle: light-dark(
oklch(0.945 0.022 172),
oklch(0.327 0.05 171)
);
--border-color-success: light-dark(
oklch(0.456 0.08 171),
oklch(0.691 0.125 171)
);

/* Visited link: violet */
--color-visited: light-dark(oklch(0.536 0.122 287), oklch(0.713 0.076 297));

/* Diff content: added (on-hue blue) / removed (amber) */
--color-content-added: light-dark(
oklch(0.436 0.12 200),
oklch(0.791 0.086 200)
);
--color-content-removed: light-dark(
oklch(0.4 0.164 29),
oklch(0.725 0.166 30)
);
--background-color-content-added: light-dark(
oklch(0.849 0.06 256),
oklch(0.342 0.06 256)
);
--background-color-content-removed: light-dark(
oklch(0.925 0.095 90),
oklch(0.332 0.049 74)
);
--border-color-content-added: light-dark(
oklch(0.849 0.06 256),
oklch(0.342 0.06 256)
);
--border-color-content-removed: light-dark(
oklch(0.925 0.095 90),
oklch(0.332 0.049 74)
);
}

/* Use nearest-neighbor scaling for pixelated images */
.cp-image-pixelated {
image-rendering: pixelated;
}

2026-06-01T23:24:21Z

Professional Wiki:

/**
* For Creopedia-specific tokens, see [[MediaWiki:Common.css]]
*/

html,
body {
font-family: var(--cp-font-family-body);
}

body {
background-color: var(--background-color-base);
}

th,
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.vector-sticky-header-context-bar-primary,
.vector-menu,
.vector-pinnable-element,
.mw-editsection,
.mw-editsection-like,
.tabber__tab {
font-family: var(--cp-font-family-heading);
}

.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.vector-sticky-header-context-bar-primary {
font-weight: 600;
letter-spacing: -0.025em;
}

th,
.vector-pinnable-header-label,
.tabber__tab {
font-weight: 500;
}

/* Temporary wordmark tweaks, need a proper logo */
.mw-logo-icon {
border-radius: 9999px;
}

.mw-logo-wordmark {
font-size: 1.5rem;
letter-spacing: -0.025em;
color: var(--color-emphasized);
font-family: var(--cp-font-family-heading);
text-transform: uppercase;
}

.mw-page-container::before {
content: "";
position: absolute;
inset: 0;
margin-inline: -100%;
max-width: 100vw;
overflow: hidden;
z-index: -1;
background-image:
linear-gradient(
to bottom,
var(--background-color-base) 0%,
color-mix(in srgb, var(--background-color-base) 90%, transparent)
100%
),
var(--cp-page-background-tile);
background-repeat: no-repeat, repeat;
background-size:
100% 100%,
var(--cp-page-background-size);
background-attachment: scroll, scroll;
background-position:
center top,
center top;
}

/**
* Vector 2022 tweaks
*/

.vector-pinned-container {
background: transparent;
}

/* Hide Vector 2022 opt-out link, only Vector 2022 is themed */
.vector-main-menu-action-opt-out {
display: none;
}

/* Tweak Vector search bar to be more consistent */
.vector-search-box .vector-typeahead-search-container {
max-width: none;
margin-right: 0;
}

.vector-search-box.vector-search-box-auto-expand-width {
margin-left: 0 !important;
}

.cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width:not(
.cdx-typeahead-search--expanded
) {
margin-left: 0;
}

/* Match the initial state with the expanded state */
.cdx-typeahead-search .cdx-text-input--has-start-icon .cdx-text-input__input {
padding-left: 60px;
}

.vector-typeahead-search-container .cdx-text-input__start-icon {
left: 22px;
}

/* max-width-breakpoint-mobile */
@media screen and (max-width: 639px) {
/* Make header single row */
.vector-header {
flex-flow: row;
}

/* Remove space reserved by workmark */
.mw-logo {
min-width: auto;
}

/* Hide workmark to save space */
.mw-logo-wordmark {
display: none;
}
}

/* max-width-breakpoint-tablet */
@media screen and (max-width: 1119px) {
/* Make Vector search bar more responsive by making it into an overlay */
.vector-header-search-toggled .vector-search-box {
position: absolute !important;
z-index: 450; /* z-index-overlay */
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 24px;
background-color: var(--background-color-base);
}

.vector-typeahead-search-container {
flex-grow: 1;
}
}

/* min-width-breakpoint-desktop */
@media screen and (min-width: 1120px) {
.vector-search-box .vector-typeahead-search-container {
margin-right: 48px;
}
}