MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 2,275: | Line 2,275: | ||
} |
} |
||
/* ========================================================= |
|||
ERINDAL DEITY PAGES |
|||
Shared structure only. Individual deity palettes are page-local custom |
|||
properties in each deity .wiki page. Common.css contains no named deity |
|||
themes and uses the global Erindal theme only as a safe fallback. |
|||
========================================================= */ |
|||
/* MediaWiki site CSS does not support the parent-selector approach here. |
|||
The wrapper therefore owns its full-width sizing directly, with no |
|||
body.page-<deity-name> rules. */ |
|||
.deity-page { |
|||
color: var(--deity-ink, var(--ew-ink)); |
|||
} |
|||
.deity-hero { |
|||
background: var(--deity-deep, var(--ew-dark-2)); |
|||
} |
|||
.deity-hero__overlay { |
|||
color: var(--deity-hero-text, #fffaf2); |
|||
background: |
|||
linear-gradient(180deg, rgba(20, 12, 9, 0.04) 20%, rgba(20, 12, 9, 0.88) 100%), |
|||
linear-gradient(90deg, rgba(20, 12, 9, 0.62), transparent 68%); |
|||
} |
|||
.deity-hero__eyebrow { |
|||
color: var(--deity-hero-kicker, var(--ew-gold-soft)); |
|||
text-transform: uppercase; |
|||
} |
|||
.deity-hero__subtitle { |
|||
color: var(--deity-hero-subtitle, #eadcc9); |
|||
} |
|||
.deity-hero a.new, |
|||
.deity-figure a.new { |
|||
display: none !important; |
|||
} |
|||
.deity-overview { |
|||
grid-template-columns: minmax(0, 1fr) minmax(310px, 370px); |
|||
} |
|||
.deity-overview__lead > p:first-child::first-letter { |
|||
color: var(--deity-accent, var(--ew-gold)); |
|||
font-size: 3.7em; |
|||
line-height: 0.78; |
|||
} |
|||
.deity-record { |
|||
border: 1px solid var(--deity-line, var(--ew-border)); |
|||
background: var(--deity-paper, var(--ew-paper-light)); |
|||
box-shadow: 0 10px 22px rgba(55, 37, 27, 0.13); |
|||
} |
|||
.deity-record__heading { |
|||
color: var(--deity-record-heading-text, #fff7ec); |
|||
background: linear-gradient(135deg, var(--deity-deep, var(--ew-dark-2)), var(--deity-deep-alt, var(--ew-dark-1))); |
|||
} |
|||
.deity-visual { |
|||
border-bottom: 1px solid var(--deity-line, var(--ew-border)); |
|||
background: linear-gradient(145deg, var(--deity-visual-bg, var(--ew-paper)), var(--deity-paper, var(--ew-paper-light))); |
|||
} |
|||
.deity-visual__tabs { |
|||
display: none; |
|||
} |
|||
.deity-visual.is-enhanced .deity-visual__tabs { |
|||
display: grid !important; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
min-width: 0; |
|||
border-bottom: 1px solid var(--deity-line, var(--ew-border)); |
|||
background: rgba(0, 0, 0, 0.04); |
|||
} |
|||
.deity-record .deity-visual__tabs > .deity-visual__tab { |
|||
display: flex; |
|||
flex: 0 0 50% !important; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
width: 50% !important; |
|||
max-width: 50% !important; |
|||
min-width: 0; |
|||
min-height: 46px; |
|||
padding: 0.58rem 0.45rem; |
|||
color: var(--deity-muted, #665f57); |
|||
border-bottom: 3px solid transparent; |
|||
font-family: "Alegreya SC", Georgia, serif; |
|||
font-size: 0.86rem; |
|||
font-weight: 700; |
|||
line-height: 1; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
float: none !important; |
|||
cursor: pointer; |
|||
} |
|||
.deity-visual__panel a.new { |
|||
display: flex !important; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-sizing: border-box; |
|||
width: 100% !important; |
|||
height: 270px !important; |
|||
padding: 1.25rem; |
|||
color: var(--deity-muted, #665f57) !important; |
|||
background: rgba(255, 255, 255, 0.22); |
|||
font-style: italic; |
|||
line-height: 1.3; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
} |
|||
.deity-visual__panel a.new::before { |
|||
content: "Missing image: "; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
} |
|||
.deity-visual__tab + .deity-visual__tab { |
|||
border-left: 1px solid var(--deity-line, var(--ew-border)); |
|||
} |
|||
.deity-visual__tab:hover, |
|||
.deity-visual__tab:focus, |
|||
.deity-visual__tab.is-active { |
|||
color: var(--deity-deep, var(--ew-dark-2)); |
|||
border-bottom-color: var(--deity-accent, var(--ew-gold)); |
|||
background: rgba(255, 255, 255, 0.42); |
|||
outline: 0; |
|||
} |
|||
.deity-visual__panel { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 270px; |
|||
min-height: 270px; |
|||
max-height: 270px; |
|||
overflow: hidden; |
|||
} |
|||
.deity-visual__panel + .deity-visual__panel { |
|||
border-top: 1px solid var(--deity-line, var(--ew-border)); |
|||
} |
|||
/* Match the JavaScript default panel state from the first paint. */ |
|||
.deity-visual:not(.is-enhanced) .deity-visual__panel--appearance { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-top: 0; |
|||
} |
|||
.deity-visual:not(.is-enhanced) .deity-visual__panel--symbol { |
|||
display: none !important; |
|||
border-top: 0; |
|||
} |
|||
.deity-visual.is-enhanced .deity-visual__panel { |
|||
display: none; |
|||
border-top: 0; |
|||
} |
|||
.deity-visual.is-enhanced .deity-visual__panel.is-active { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.deity-visual__panel .mw-file-description, |
|||
.deity-visual__panel .mw-file-element, |
|||
.deity-visual__appearance, |
|||
.deity-visual__symbol { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
width: 100% !important; |
|||
} |
|||
.deity-visual__panel .mw-file-description { |
|||
height: 100%; |
|||
} |
|||
.deity-visual__appearance, |
|||
.deity-visual__panel--appearance .mw-file-element { |
|||
height: 270px !important; |
|||
object-fit: cover; |
|||
object-position: 50% 18%; |
|||
} |
|||
.deity-visual__panel--symbol { |
|||
padding: 0; |
|||
text-align: center; |
|||
} |
|||
.deity-visual__symbol, |
|||
.deity-visual__panel--symbol .mw-file-element { |
|||
box-sizing: border-box; |
|||
width: 100% !important; |
|||
max-width: none !important; |
|||
height: 270px !important; |
|||
padding: 1rem; |
|||
object-fit: contain; |
|||
object-position: center; |
|||
} |
|||
.deity-record__row { |
|||
grid-template-columns: minmax(105px, 0.9fr) minmax(0, 1.35fr); |
|||
border-top: 1px solid var(--deity-line, var(--ew-border)); |
|||
} |
|||
.deity-record__row span { |
|||
color: var(--deity-muted, #665f57); |
|||
} |
|||
.deity-index { |
|||
margin: 0 0 2rem; |
|||
overflow: hidden; |
|||
border: 1px solid var(--deity-line, var(--ew-border)); |
|||
border-radius: 11px; |
|||
background: linear-gradient(145deg, var(--deity-paper, var(--ew-paper-light)), var(--deity-paper-alt, var(--ew-paper))); |
|||
} |
|||
.deity-index__heading { |
|||
padding: 0.8rem 1rem 0.7rem; |
|||
color: var(--deity-deep, var(--ew-dark-2)); |
|||
font-size: 1.15rem; |
|||
} |
|||
.deity-index__grid { |
|||
grid-template-columns: repeat(3, minmax(0, 1fr)); |
|||
gap: 1px; |
|||
background: var(--deity-line, var(--ew-border)); |
|||
} |
|||
.deity-index__grid > div, |
|||
.wiki-index__grid > div { |
|||
background: rgba(250, 247, 240, 0.96); |
|||
} |
|||
.deity-index__grid a, |
|||
.wiki-index__grid a { |
|||
min-height: 56px; |
|||
padding: 0.72rem 0.85rem; |
|||
color: inherit; |
|||
} |
|||
.deity-index__grid span { |
|||
color: var(--deity-accent, var(--ew-gold)); |
|||
} |
|||
.deity-page__body h2 { |
|||
display: flex; |
|||
gap: 0.75rem; |
|||
align-items: center; |
|||
margin: 2.35rem 0 1rem; |
|||
border-bottom: 0; |
|||
color: var(--deity-deep, var(--ew-dark-2)); |
|||
font-size: 1.75rem; |
|||
} |
|||
.deity-page__body h2::after { |
|||
background: linear-gradient(90deg, var(--deity-accent, var(--ew-gold)), transparent); |
|||
} |
|||
.deity-page__body h3 { |
|||
color: var(--deity-accent, var(--ew-gold)); |
|||
font-family: "Alegreya SC", Georgia, serif; |
|||
} |
|||
.deity-page__body a, |
|||
.deity-record a { |
|||
color: var(--deity-link, var(--ew-link)); |
|||
} |
|||
.deity-quote, |
|||
.deity-note { |
|||
margin: 1.25rem 0; |
|||
padding: 0.95rem 1.05rem; |
|||
border: 1px solid var(--deity-line, var(--ew-border)); |
|||
border-left: 5px solid var(--deity-accent, var(--ew-gold)); |
|||
border-radius: 8px; |
|||
background: linear-gradient(135deg, var(--deity-paper, var(--ew-paper-light)), var(--deity-paper-alt, var(--ew-paper))); |
|||
} |
|||
.deity-quote { |
|||
color: var(--deity-deep, var(--ew-dark-2)); |
|||
} |
|||
.deity-quote__source { |
|||
display: block; |
|||
margin-top: 0.35rem; |
|||
color: var(--deity-muted, #665f57); |
|||
font-size: 0.9rem; |
|||
font-style: normal; |
|||
text-align: right; |
|||
} |
|||
.deity-card { |
|||
border: 1px solid var(--deity-line, var(--ew-border)); |
|||
border-top: 4px solid var(--deity-accent, var(--ew-gold)); |
|||
background: linear-gradient(145deg, var(--deity-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.52)); |
|||
box-shadow: 0 5px 14px rgba(49, 35, 25, 0.08); |
|||
} |
|||
.deity-figure { |
|||
border: 1px solid var(--deity-line, var(--ew-border)); |
|||
background: var(--deity-paper, var(--ew-paper-light)); |
|||
box-shadow: 0 8px 20px rgba(50, 33, 24, 0.14); |
|||
} |
|||
.deity-figure .mw-file-description, |
|||
.deity-figure .mw-file-element, |
|||
.deity-figure__image { |
|||
display: block; |
|||
width: 100% !important; |
|||
max-width: none !important; |
|||
} |
|||
.deity-figure__caption { |
|||
color: var(--deity-muted, #665f57); |
|||
background: linear-gradient(135deg, var(--deity-paper, var(--ew-paper-light)), var(--deity-paper-alt, var(--ew-paper))); |
|||
} |
|||
/* ========================================================= |
/* ========================================================= |
||
| Line 2,788: | Line 2,459: | ||
} |
} |
||
/* ========================================================= |
|||
DEITY ARTICLE / INFOBOX LAYOUT — SINGLE FLOWING SYSTEM |
|||
Desktop uses the same traditional infobox flow for every deity page. |
|||
The Divine Record must occur before the prose it should wrap beside. |
|||
This is source structure, not deity-specific CSS. |
|||
========================================================= */ |
|||
@media (min-width: 951px) { |
|||
.deity-overview, |
|||
.deity-article-layout { |
|||
display: block !important; |
|||
margin-bottom: 1.5rem !important; |
|||
} |
|||
/* Legacy/current record and new rail share the same desktop infobox geometry. */ |
|||
.deity-overview .deity-record, |
|||
.deity-article-layout__rail { |
|||
float: right !important; |
|||
box-sizing: border-box !important; |
|||
width: 370px !important; |
|||
max-width: 34% !important; |
|||
margin: 0 0 1.5rem 2rem !important; |
|||
} |
|||
.deity-article-layout__rail .deity-record { |
|||
float: none !important; |
|||
width: 100% !important; |
|||
max-width: none !important; |
|||
margin: 0 !important; |
|||
} |
|||
.deity-overview__lead, |
|||
.deity-article-layout__main, |
|||
.deity-page__body { |
|||
display: block !important; |
|||
min-width: 0 !important; |
|||
} |
|||
.deity-index { |
|||
min-width: 0 !important; |
|||
overflow: hidden !important; |
|||
} |
|||
.deity-article-layout .deity-index { |
|||
margin: 0 0 1.5rem !important; |
|||
} |
|||
.deity-article-layout__main .toc, |
|||
.deity-article-layout__main #toc { |
|||
float: none !important; |
|||
box-sizing: border-box !important; |
|||
width: min(100%, 300px) !important; |
|||
max-width: 100% !important; |
|||
margin: 0 0 1.5rem !important; |
|||
} |
|||
/* Never force article sections below a tall Divine Record on desktop. */ |
|||
.deity-page > .deity-page__body { |
|||
display: block !important; |
|||
clear: none !important; |
|||
box-sizing: border-box !important; |
|||
width: auto !important; |
|||
max-width: none !important; |
|||
min-width: 0 !important; |
|||
} |
|||
} |
|||
@media (max-width: 950px) { |
|||
.deity-overview, |
|||
.deity-article-layout { |
|||
display: grid !important; |
|||
grid-template-columns: minmax(0, 1fr) !important; |
|||
gap: 1.5rem !important; |
|||
} |
|||
.deity-overview .deity-record, |
|||
.deity-article-layout__rail, |
|||
.deity-article-layout__rail .deity-record { |
|||
float: none !important; |
|||
box-sizing: border-box !important; |
|||
width: min(100%, 580px) !important; |
|||
max-width: 100% !important; |
|||
margin: 0 auto !important; |
|||
} |
|||
.deity-article-layout__rail { |
|||
grid-column: 1 !important; |
|||
grid-row: 1 !important; |
|||
} |
|||
.deity-article-layout__main { |
|||
grid-column: 1 !important; |
|||
grid-row: 2 !important; |
|||
min-width: 0 !important; |
|||
} |
|||
.deity-page > .deity-page__body { |
|||
display: block !important; |
|||
clear: both !important; |
|||
box-sizing: border-box !important; |
|||
width: 100% !important; |
|||
max-width: none !important; |
|||
min-width: 0 !important; |
|||
} |
|||
} |
|||
/* Centred, unmistakable appearance/symbol selector. */ |
|||
.deity-record .deity-visual__tabs { |
|||
display: grid !important; |
|||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; |
|||
align-items: stretch !important; |
|||
box-sizing: border-box !important; |
|||
width: 100% !important; |
|||
min-height: 52px !important; |
|||
padding: 4px !important; |
|||
border-bottom: 1px solid var(--deity-line, var(--ew-border)) !important; |
|||
background: var(--deity-tabs-bg, var(--ew-paper)) !important; |
|||
} |
|||
.deity-record .deity-visual__tabs .deity-visual__tab { |
|||
display: grid !important; |
|||
place-items: center !important; |
|||
box-sizing: border-box !important; |
|||
width: 100% !important; |
|||
max-width: none !important; |
|||
min-width: 0 !important; |
|||
min-height: 44px !important; |
|||
padding: 0.55rem 0.45rem !important; |
|||
overflow: visible !important; |
|||
color: var(--deity-tab-text, var(--ew-ink)) !important; |
|||
border: 1px solid transparent !important; |
|||
border-radius: 6px !important; |
|||
background: transparent !important; |
|||
font-family: "Alegreya SC", Georgia, serif !important; |
|||
font-size: 0.88rem !important; |
|||
font-weight: 700 !important; |
|||
line-height: 1.1 !important; |
|||
text-align: center !important; |
|||
white-space: nowrap !important; |
|||
text-overflow: clip !important; |
|||
box-shadow: none !important; |
|||
cursor: pointer !important; |
|||
} |
|||
.deity-record .deity-visual__tabs .deity-visual__tab + .deity-visual__tab { |
|||
border-left-color: var(--deity-line, var(--ew-border)) !important; |
|||
} |
|||
.deity-record .deity-visual__tabs .deity-visual__tab:hover, |
|||
.deity-record .deity-visual__tabs .deity-visual__tab:focus-visible { |
|||
color: var(--deity-deep, var(--ew-dark-2)) !important; |
|||
border-color: var(--deity-accent, var(--ew-gold)) !important; |
|||
background: rgba(255, 250, 241, 0.68) !important; |
|||
outline: 2px solid transparent !important; |
|||
} |
|||
/* Divine Appearance is the default visible panel, so its button starts |
|||
visually active before Common.js runs. */ |
|||
.deity-record .deity-visual:not(.is-enhanced) .deity-visual__tabs .deity-visual__tab:first-child, |
|||
.deity-record .deity-visual__tabs .deity-visual__tab.is-active, |
|||
.deity-record .deity-visual__tabs .deity-visual__tab[aria-selected="true"] { |
|||
color: var(--deity-tab-active-text, #fffaf2) !important; |
|||
border-color: var(--deity-tab-active-border, var(--ew-gold)) !important; |
|||
background: linear-gradient(180deg, var(--deity-tab-active-top, var(--ew-dark-2)) 0%, var(--deity-tab-active-bottom, var(--ew-dark-1)) 100%) !important; |
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 5px rgba(54, 27, 17, 0.28) !important; |
|||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important; |
|||
} |
|||
/* ========================================================= |
/* ========================================================= |
||
| Line 3,247: | Line 2,751: | ||
gap: 1px; |
gap: 1px; |
||
background: var(--wiki-line, var(--ew-border)); |
background: var(--wiki-line, var(--ew-border)); |
||
} |
|||
/* Preserved from the former mixed deity/wiki index rules. */ |
|||
.wiki-index__grid > div { |
|||
background: rgba(250, 247, 240, 0.96); |
|||
} |
|||
.wiki-index__grid a { |
|||
min-height: 56px; |
|||
padding: 0.72rem 0.85rem; |
|||
color: inherit; |
|||
} |
} |
||
Revision as of 17:17, 18 August 2026
/* ========================================================================
ERINDAL WIKI - LIVE VECTOR THEME v6.3.16 STRUCTURALLY OPTIMIZED - PHASE 2
Target: MediaWiki 1.43.x, legacy Vector skin
======================================================================== */
/* Optimized: removed superseded typography passes and obsolete v5 topbar CSS.
Current v6 server-rendered shell and page/template systems are preserved. */
:root {
--ew-sidebar: 276px;
--ew-topbar: 56px;
--ew-content-max: calc(100vw - var(--ew-sidebar));
--ew-dark-0: #02070a;
--ew-dark-1: #061119;
--ew-dark-2: #0b1a23;
--ew-gold: #d1a24a;
--ew-gold-soft: #efc979;
--ew-paper: #efe7d9;
--ew-paper-light: #f8f2e8;
--ew-ink: #171513;
--ew-border: rgba(111, 86, 54, .34);
--ew-link: #0c4771;
}
/* ========================================================================
PAGE THEME POLICY
Common.css owns shared layout, typography and component behaviour.
Individual countries, cities, deities, organizations, characters, magic
articles and other designed pages set their own --country-*, --city-*,
--deity-* or --wiki-* palette variables on their page wrapper.
Do not add per-page colour classes or page-name selectors here.
======================================================================== */
html, body {
background: var(--ew-dark-0) !important;
}
body {
color: var(--ew-ink);
font-family: "Crimson Text", Georgia, serif;
}
/* ---------- GLOBAL DARK SHELL ---------- */
#mw-panel {
position: fixed !important;
z-index: 90;
top: 0 !important;
left: 0 !important;
bottom: 0;
width: var(--ew-sidebar) !important;
overflow-y: auto;
padding: 0 16px 24px !important;
box-sizing: border-box;
background:
radial-gradient(circle at 45% 0%, rgba(58, 83, 98, .25), transparent 300px),
linear-gradient(180deg, #0b1a23 0%, #041019 58%, #020a0f 100%) !important;
border-right: 2px solid rgba(125, 102, 69, .52);
box-shadow: inset -12px 0 24px rgba(0,0,0,.38), 4px 0 18px rgba(0,0,0,.18);
color: #f4eee3;
}
/* Decorative corners */
#mw-panel::before,
#mw-panel::after {
content: "";
position: fixed;
z-index: 92;
top: 4px;
width: 18px;
height: 18px;
border-color: rgba(207,163,80,.62);
border-style: solid;
pointer-events: none;
}
#mw-panel::before { left: 4px; border-width: 1px 0 0 1px; }
#mw-panel::after { left: calc(var(--ew-sidebar) - 23px); border-width: 1px 1px 0 0; }
/* Replace default Vector logo area with Erindal wordmark */
#p-logo {
position: relative !important;
top: auto !important;
left: auto !important;
width: calc(var(--ew-sidebar) - 32px) !important;
height: 126px !important;
margin: 0 0 12px !important;
border-bottom: 1px solid rgba(139,116,79,.45);
}
#p-logo a {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background: none !important;
z-index: 5;
}
#p-logo::before {
content: "";
position: absolute;
left: 15px;
top: 25px;
width: 72px;
height: 72px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d6a74d' stroke-width='3'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Cpath d='M50 6L58 41L94 50L58 59L50 94L42 59L6 50L42 41Z'/%3E%3Cpath d='M50 17L53 44L83 50L53 56L50 83L47 56L17 50L47 44Z'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5' fill='%23d6a74d'/%3E%3C/svg%3E");
}
#p-logo::after {
content: "ERINDAL\A WIKI";
white-space: pre;
position: absolute;
left: 101px;
top: 28px;
color: var(--ew-gold-soft);
font: 700 27px/1.05 "Cinzel", Georgia, serif;
letter-spacing: .075em;
text-shadow: 0 2px 2px rgba(0,0,0,.65);
}
/* Sidebar sections */
#mw-panel .portal {
background: none !important;
margin: 0 !important;
padding: 0 0 18px !important;
border-bottom: 1px solid rgba(139,116,79,.46);
}
#mw-panel .portal + .portal,
#mw-panel .vector-menu-portal + .vector-menu-portal,
#mw-panel .mw-portlet + .mw-portlet {
margin-top: 18px !important;
}
#mw-panel .portal h3 {
height: auto !important;
margin: 0 0 9px 12px !important;
padding: 0 !important;
color: #b9ad9a !important;
background: none !important;
font: 600 12px/1.2 "Cinzel", Georgia, serif !important;
text-transform: uppercase;
letter-spacing: .055em;
}
#mw-panel .portal .body {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
#mw-panel .portal .body ul { margin: 0 !important; list-style: none !important; }
#mw-panel .portal .body li,
#mw-panel .vector-menu-content-list li {
margin: 2px 0 !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
#mw-panel .portal .body li a,
#mw-panel .portal .body li a:visited {
position: relative;
display: block;
padding: 7px 8px 7px 39px !important;
color: #f1ede6 !important;
text-decoration: none !important;
border-radius: 2px;
}
#mw-panel .portal .body li a:hover {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg, rgba(35,67,93,.72), rgba(22,43,57,.20));
}
#mw-panel .portal .body li a::before,
#mw-panel .vector-menu-content-list li a::before,
#mw-panel .mw-list-item > a::before {
content: "◆";
position: absolute;
left: 14px;
top: 7px;
width: 16px;
color: #98a09e;
text-align: center;
font-size: 11px;
}
#mw-panel .portal:first-of-type .body li:first-child a {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg, rgba(35,67,93,.95), rgba(22,43,57,.42));
}
#mw-panel .portal:first-of-type .body li:first-child a::before,
#p-navigation .vector-menu-content-list li:first-child a::before,
#p-navigation .mw-list-item:first-child > a::before {
content: "⌂";
color: var(--ew-gold-soft);
font-size: 18px;
top: 4px;
}
/* Hide default sidebar toolbox/footer links we don't need in the fantasy navigation */
#p-tb { display: none !important; }
/* --- Vector 1.43 legacy compatibility --- */
#mw-page-base {
margin-left: var(--ew-sidebar) !important;
width: calc(100vw - var(--ew-sidebar)) !important;
background: #061119 !important;
height: var(--ew-topbar) !important;
max-width: none !important;
}
#mw-panel .vector-menu-portal,
#mw-panel .mw-portlet {
background: none !important;
margin: 0 !important;
padding: 0 0 18px !important;
border-bottom: 1px solid rgba(139,116,79,.46) !important;
}
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .mw-portlet h3 {
height: auto !important;
margin: 0 0 9px 12px !important;
padding: 0 !important;
color: #b9ad9a !important;
background: none !important;
font: 600 12px/1.2 "Cinzel", Georgia, serif !important;
text-transform: uppercase !important;
letter-spacing: .055em !important;
}
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list { margin:0 !important; padding:0 !important; background:none !important; }
#mw-panel .vector-menu-content-list { list-style:none !important; }
#mw-panel .vector-menu-content-list li a,
#mw-panel .vector-menu-content-list li a:visited {
position: relative !important;
display: block !important;
padding: 7px 8px 7px 39px !important;
color: #f1ede6 !important;
text-decoration: none !important;
border-radius: 2px !important;
}
#mw-panel .vector-menu-content-list li a:hover {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg,rgba(35,67,93,.72),rgba(22,43,57,.20)) !important;
}
#p-navigation .vector-menu-content-list li:first-child a {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg,rgba(35,67,93,.95),rgba(22,43,57,.42)) !important;
}
/* Vector 1.43 link text lives inside spans; style those explicitly. */
#mw-panel .mw-list-item > a,
#mw-panel .mw-list-item > a:visited {
position: relative !important;
display: block !important;
padding: 7px 8px 7px 39px !important;
color: #f1ede6 !important;
text-decoration: none !important;
border-radius: 2px !important;
font: 15px/1.2 "Crimson Text", Georgia, serif !important;
}
#mw-panel .mw-list-item > a > span,
#mw-panel .mw-list-item > a:visited > span {
color: inherit !important;
font: inherit !important;
}
#mw-panel .mw-list-item > a:hover {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg, rgba(35,67,93,.72), rgba(22,43,57,.20)) !important;
}
#p-navigation .mw-list-item:first-child > a {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg, rgba(35,67,93,.95), rgba(22,43,57,.42)) !important;
}
/* Never show an auto-generated TOC on the front page. */
body.page-Main_Page .toc,
body.page-Main_Page #toc { display: none !important; }
/* MediaWiki file markup wrappers */
.ew-hero-image > span, .ew-hero-image > a,
.ew-map-image > span, .ew-map-image > a,
.ew-feature-image > span, .ew-feature-image > a,
.ew-strip > span, .ew-strip > a { display:block !important; width:100% !important; height:100% !important; }
.ew-hero-image .mw-file-description,
.ew-map-image .mw-file-description,
.ew-feature-image .mw-file-description,
.ew-strip .mw-file-description { display:block !important; width:100% !important; height:100% !important; }
/* ---------- GLOBAL TOPBAR COMPONENTS ---------- */
.ew-global-menu {
display: flex;
align-items: stretch;
height: 100%;
min-width: 0;
}
.ew-global-menu a,
.ew-global-menu a:visited {
display: flex;
align-items: center;
padding: 0 18px;
color: #f3eee5 !important;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .04em;
text-decoration: none !important;
white-space: nowrap;
}
.ew-global-menu a:hover { color: var(--ew-gold-soft) !important; background: rgba(255,255,255,.035); }
.ew-menu-arrow { margin-left: 6px; font-size: 11px; }
.ew-global-search {
margin-left: auto;
width: min(304px, 26vw);
height: 35px;
display: flex;
border: 1px solid rgba(151,128,91,.42);
background: rgba(0,0,0,.28);
border-radius: 4px;
overflow: hidden;
}
.ew-global-search input[type="search"] {
min-width: 0;
flex: 1;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: #eee8de !important;
padding: 0 12px !important;
font: 15px "Crimson Text", Georgia, serif !important;
}
.ew-global-search input::placeholder { color: #d4cbc0; opacity: .88; }
.ew-global-search button {
width: 42px;
border: 0;
border-left: 1px solid rgba(151,128,91,.34);
background: transparent;
color: #f1eade;
font-size: 22px;
cursor: pointer;
}
.ew-global-tools { display: flex; height: 100%; margin-left: 9px; }
.ew-tool-link,
.ew-tool-link:visited {
width: 44px;
display: grid;
place-items: center;
color: #f3eee5 !important;
text-decoration: none !important;
border-left: 1px solid rgba(151,128,91,.20);
font-size: 21px;
}
.ew-tool-link:hover { color: var(--ew-gold-soft) !important; }
/* ---------- VECTOR CONTENT POSITIONING ---------- */
#mw-head-base {
margin-left: var(--ew-sidebar) !important;
width: calc(100vw - var(--ew-sidebar)) !important;
margin-top: var(--ew-topbar) !important;
height: 34px !important;
background: #0a151c !important;
max-width: none !important;
}
#mw-head {
left: var(--ew-sidebar) !important;
right: auto !important;
width: calc(100vw - var(--ew-sidebar)) !important;
top: var(--ew-topbar) !important;
height: 34px !important;
background: linear-gradient(180deg, #0a151c, #071017) !important;
border-bottom: 1px solid rgba(125,102,69,.30);
box-sizing: border-box;
max-width: none !important;
}
#left-navigation,
#right-navigation { margin-top: 0 !important; height: 34px !important; }
.vector-menu-tabs,
.vector-menu-tabs span,
.vector-menu-tabs ul { background-image: none !important; }
.vector-menu-tabs li {
background-image: none !important;
background: transparent !important;
height: 34px !important;
}
.vector-menu-tabs li a,
.vector-menu-tabs li a:visited {
height: 34px !important;
line-height: 34px !important;
padding: 0 10px !important;
color: #cfc6ba !important;
background: transparent !important;
font-size: 12px !important;
}
.vector-menu-tabs li.selected a,
.vector-menu-tabs li a:hover { color: var(--ew-gold-soft) !important; }
#p-personal { display: none !important; }
#content {
margin-left: var(--ew-sidebar) !important;
width: calc(100vw - var(--ew-sidebar)) !important;
max-width: none !important;
margin-top: 0 !important;
border: 0 !important;
min-height: calc(100vh - 90px);
box-sizing: border-box;
padding: 34px 42px 44px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.02)),
repeating-linear-gradient(45deg, rgba(119,91,49,.012), rgba(119,91,49,.012) 2px, transparent 2px, transparent 7px),
var(--ew-paper) !important;
color: var(--ew-ink) !important;
}
#content a,
#content a:visited { color: var(--ew-link); }
#content a:hover { color: #8c5d0a; }
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4 { font-family: "Cinzel", Georgia, serif; color: #181512; }
#firstHeading { border-bottom: 1px solid rgba(91,70,44,.35); }
#footer {
position: relative;
margin-left: var(--ew-sidebar) !important;
width: calc(100vw - var(--ew-sidebar)) !important;
max-width: none !important;
box-sizing: border-box;
padding: 17px 28px 19px !important;
background:
linear-gradient(180deg, rgba(18,39,51,.22), rgba(6,17,25,0) 55%),
#061119 !important;
color: #c8c2b7 !important;
border-top: 1px solid rgba(197,157,79,.36);
}
/* Vector gives the individual footer lists/items their own colours in some
versions. Set them explicitly so the last-edited line never disappears
against the dark Erindal footer. */
#footer #footer-info,
#footer #footer-info li,
#footer #footer-info-lastmod,
#footer #footer-info-copyright {
color: #bdb7ac !important;
}
#footer #footer-info {
margin: 0 0 0.55rem !important;
padding: 0 !important;
font-size: 0.84rem !important;
line-height: 1.45 !important;
}
#footer #footer-places {
display: flex !important;
flex-wrap: wrap;
gap: 0.35rem 1rem;
margin: 0 !important;
padding: 0 !important;
}
#footer #footer-places li {
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
#footer a,
#footer a:visited {
color: #d1b66d !important;
text-decoration: none !important;
}
#footer a:hover,
#footer a:focus {
color: #fff0bd !important;
text-decoration: underline !important;
}
/* The stock MediaWiki and Debian image badges clash with the custom fantasy
shell. The software credits remain available through the normal site/about
information; hide only the graphical footer badges. */
#footer #footer-icons {
display: none !important;
}
/* ---------- MAIN PAGE: remove article chrome ---------- */
body.page-Main_Page #mw-head,
body.page-Main_Page #mw-head-base,
body.page-Main_Page #mw-page-base { display: none !important; }
body.page-Main_Page #content {
margin-top: var(--ew-topbar) !important;
padding: 0 !important;
background: var(--ew-dark-0) !important;
}
body.page-Main_Page #firstHeading,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page .mw-indicators,
body.page-Main_Page .catlinks,
body.page-Main_Page #jump-to-nav { display: none !important; }
body.page-Main_Page #bodyContent,
body.page-Main_Page #mw-content-text,
body.page-Main_Page .mw-parser-output { margin: 0 !important; padding: 0 !important; }
body.page-Main_Page .mw-parser-output > p:empty { display:none; }
/* ---------- HOMEPAGE ---------- */
.ew-home,
.ew-home * { box-sizing: border-box; }
.ew-home {
width: 100%;
max-width: none;
margin: 0;
color: var(--ew-ink);
background: var(--ew-paper);
font-family: "Crimson Text", Georgia, serif;
}
.ew-home a { text-decoration: none !important; }
.ew-hero {
height: clamp(278px, 18vw, 340px);
position: relative;
overflow: hidden;
background: #061019;
border-bottom: 2px solid rgba(91,70,44,.48);
}
.ew-hero-image { position:absolute; inset:0; overflow:hidden; }
.ew-hero-image .mw-file-element,
.ew-hero-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
display: block;
}
.ew-hero-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(2,7,10,.94) 0%, rgba(2,7,10,.78) 30%, rgba(2,7,10,.30) 48%, rgba(2,7,10,.08) 69%, rgba(2,7,10,.14) 100%);
}
.ew-hero-copy {
position: relative;
z-index: 2;
padding: 48px 0 0 55px;
color: #fffaf1;
text-shadow: 0 3px 4px rgba(0,0,0,.75);
}
.ew-hero-kicker { text-transform: uppercase; font-size: 22px; letter-spacing: .04em; margin-bottom: 2px; }
.ew-hero-title {
color: #fffaf1;
font-size: 54px;
line-height: 1.03;
letter-spacing: .045em;
text-transform: uppercase;
font-weight: 500;
}
.ew-gold-rule { height: 28px; display: flex; align-items: center; margin: 4px 0 8px; }
.ew-gold-rule::before { content: "✧"; color: var(--ew-gold); font-size: 17px; margin-right: 4px; }
.ew-gold-rule span { display:block; width:68px; height:2px; background:linear-gradient(90deg,var(--ew-gold),rgba(209,162,74,0)); }
.ew-hero-copy p { margin:0; color:#fff7eb; font-size:16px; line-height:1.45; }
.ew-home-grid {
display:grid;
grid-template-columns:minmax(0,1fr) clamp(420px,38%,560px);
gap:8px;
padding:8px 10px 0;
background:#efe7d9;
}
.ew-home-left,
.ew-home-right { min-width:0; }
.ew-panel {
position:relative;
background:
linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.08)),
repeating-linear-gradient(45deg,rgba(119,91,49,.018),rgba(119,91,49,.018) 2px,transparent 2px,transparent 7px),
var(--ew-paper-light);
border:1px solid var(--ew-border);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.27),0 1px 2px rgba(0,0,0,.08);
}
.ew-panel::before,
.ew-panel::after {
content:"";
position:absolute;
width:13px;
height:13px;
border-color:rgba(142,116,78,.32);
border-style:solid;
pointer-events:none;
}
.ew-panel::before { top:5px; left:5px; border-width:1px 0 0 1px; }
.ew-panel::after { top:5px; right:5px; border-width:1px 1px 0 0; }
.ew-panel h2 {
margin:0 !important;
padding:0 !important;
border:0 !important;
color:#111 !important;
font-size:20px !important;
line-height:1.25 !important;
text-transform:uppercase;
font-weight:700;
}
.ew-panel p { color:#171717; font-size:15.5px; line-height:1.42; }
.ew-overview {
min-height:222px;
display:grid;
grid-template-columns:minmax(0,1fr) 42%;
overflow:hidden;
}
.ew-panel-copy { padding:31px 24px 24px 39px; }
.ew-heading-mark { color:#58605f; margin-right:9px; font-size:26px; vertical-align:-2px; }
.ew-map-image { min-height:210px; overflow:hidden; opacity:.80; }
.ew-map-image .mw-file-element,
.ew-map-image img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; mix-blend-mode:multiply; }
.ew-categories-panel { margin-top:8px; padding:20px 18px 18px; min-height:337px; }
.ew-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:12px; }
.ew-card {
min-height:75px;
cursor:pointer;
display:flex;
align-items:center;
gap:12px;
padding:12px 13px;
border:1px solid rgba(118,93,58,.25);
background:rgba(250,246,238,.72);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.ew-card-icon { width:42px; flex:0 0 auto; color:#454847; font-size:30px; text-align:center; line-height:1; }
.ew-card-icon.ew-gold { color:#ba7e12; }
.ew-card a,
.ew-card-label { display:block; color:#151515 !important; text-transform:uppercase; font-size:12.5px; font-weight:700; line-height:1.15; }
.ew-card:hover { background:rgba(255,250,240,.96); border-color:rgba(153,111,52,.48); }
.ew-card:focus-visible { outline:2px solid var(--ew-gold); outline-offset:-3px; }
.ew-card small { display:block; margin-top:7px; color:#2d2b27; font-size:12px; }
.ew-strip { grid-column:span 3; min-height:75px; overflow:hidden; border:1px solid rgba(118,93,58,.25); }
.ew-strip .mw-file-element,
.ew-strip img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; filter:sepia(.16) saturate(.78) brightness(1.04); }
.ew-home-right .ew-panel { margin-bottom:8px; }
.ew-featured { padding:19px 18px 18px; }
.ew-featured h2 { display:flex; align-items:center; gap:12px; margin-bottom:12px !important; }
.ew-featured h2 span { color:#5d6260; font-size:23px; }
.ew-feature-image { height:145px; overflow:hidden; border:1px solid rgba(65,47,27,.35); margin-bottom:9px; }
.ew-feature-image .mw-file-element,
.ew-feature-image img { width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; }
.ew-featured h3 { margin:0 0 5px !important; padding:0 !important; border:0 !important; color:#111 !important; font-size:20px !important; text-transform:uppercase; font-weight:500; }
.ew-featured p { margin:0; font-size:15px; line-height:1.3; }
.ew-readmore { margin-top:9px; font-size:14px; }
.ew-readmore a { color:#073d67 !important; }
.ew-recent { padding:15px 17px 15px; min-height:246px; }
.ew-recent h2 { display:flex; align-items:center; gap:8px; font-size:16px !important; margin-bottom:12px !important; }
.ew-recent-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; align-items:center; margin:6px 0; }
.ew-recent-icon { width:32px; height:32px; display:grid; place-items:center; background:#1a2228; color:#eee9dd; border:1px solid rgba(100,78,45,.48); font-size:12px; }
.ew-recent-row a { color:#073d67 !important; font-size:13.5px; line-height:1.1; }
.ew-recent-row small { display:block; color:#4c4842; font-size:11.5px; margin-top:2px; }
.ew-recent-loading { padding:8px 0; color:#5b554c; font-size:13px; }
.ew-important { margin:6px 10px 10px; padding:14px 26px 16px; }
.ew-important h2 { font-size:15px !important; margin-bottom:12px !important; }
.ew-important h2 span { color:#676b68; margin-right:8px; }
.ew-important-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; }
.ew-important-grid a { color:#073d67 !important; font-size:14px; }
.ew-important-grid small { display:block; margin-top:4px; color:#171717; font-size:12px; line-height:1.28; }
/* ---------- Article styling ---------- */
body:not(.page-Main_Page) .mw-parser-output { max-width: 1180px; }
body:not(.page-Main_Page) .mw-parser-output p { font-size: 16px; line-height: 1.58; }
body:not(.page-Main_Page) .mw-parser-output h2 {
margin-top: 1.5em;
padding-bottom: 5px;
border-bottom: 1px solid rgba(91,70,44,.28);
}
.mw-editsection { font-family: Arial, sans-serif; font-size: 11px; }
.toc, .mw-warning, .mw-message-box {
background: rgba(255,255,255,.42) !important;
border-color: rgba(111,86,54,.32) !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
.ew-global-menu a { padding: 0 10px; font-size: 12px; }
.ew-global-search { width: 220px; }
.ew-home-grid { grid-template-columns:1fr; }
.ew-home-right { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ew-home-right .ew-panel { margin-bottom:0; }
}
@media (max-width: 900px) {
:root { --ew-sidebar: 218px; }
#p-logo::before { width:58px; height:58px; left:8px; top:30px; }
#p-logo::after { left:72px; top:34px; font-size:21px; }
.ew-global-menu a:nth-child(n+4) { display:none; }
#content { padding:26px 24px 36px !important; }
body.page-Main_Page #content { padding:0 0 10px !important; }
.ew-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ew-strip { grid-column:span 2; }
.ew-important-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
:root { --ew-sidebar: 0px; }
#mw-panel { display:none !important; }
#ew-global-topbar { left:0; padding-left:10px; }
#mw-head, #mw-head-base { left:0 !important; margin-left:0 !important; }
#content, #footer { margin-left:0 !important; }
.ew-global-menu a:nth-child(n+3) { display:none; }
.ew-global-search { width: min(240px, 45vw); }
.ew-tool-link:first-child { display:none; }
.ew-overview { grid-template-columns:1fr; }
.ew-map-image { display:none; }
.ew-home-right { grid-template-columns:1fr; }
.ew-category-grid { grid-template-columns:1fr; }
.ew-strip { grid-column:span 1; }
.ew-important-grid { grid-template-columns:1fr; }
.ew-hero-copy { padding-left:26px; }
.ew-hero-title { font-size:40px; }
}
/* Final MediaWiki parser cleanup */
body.page-Main_Page .ew-home p { margin-top:0; }
body.page-Main_Page .ew-home .mw-default-size,
body.page-Main_Page .ew-home figure { margin:0 !important; padding:0 !important; max-width:none !important; }
body.page-Main_Page .ew-home figure > a { display:block !important; width:100% !important; height:100% !important; }
body.page-Main_Page #mw-page-base { background:#061119 !important; }
/* ---------- FLUID / WIDE-SCREEN LAYOUT ---------- */
body.page-Main_Page .ew-home {
width: 100% !important;
max-width: none !important;
}
/* Keep the right column useful on wide screens without letting it eat half the page. */
/* Let category cards gain columns on very wide displays instead of becoming huge. */
@media (min-width: 1900px) {
.ew-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ew-strip { grid-column: span 4; }
}
/* When viewport is only moderately wide, preserve the reference-image proportions. */
@media (min-width: 1181px) and (max-width: 1550px) {
.ew-home-grid { grid-template-columns: minmax(0, 1.56fr) minmax(360px, .98fr); }
}
/* ========================================================================
TYPOGRAPHY - CONSOLIDATED CURRENT STATE
Final values from the former v4.4-v4.8 typography passes. Older font
experiments were removed so each element has one authoritative rule.
======================================================================== */
/* Readable body/lore face. */
html body,
#content,
#bodyContent,
#mw-content-text,
.mw-parser-output,
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output dd,
.mw-parser-output dt,
.ew-home,
.ew-panel p,
.ew-card small,
.ew-recent-row,
.ew-global-search input[type="search"] {
font-family: "Alegreya", Georgia, serif !important;
font-weight: 400 !important;
}
/* Navigation chrome. */
#mw-panel .mw-list-item > a,
#mw-panel .mw-list-item > a > span,
#mw-panel .vector-menu-content-list li a,
#mw-panel .portal .body li a {
font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
font-size: 16px !important;
font-weight: 400 !important;
letter-spacing: .012em !important;
}
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading-label,
#mw-panel .portal h3 {
font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: .07em !important;
}
/* Legacy Vector fallback for portlets that expose only an h3 heading. */
#mw-panel .mw-portlet h3 {
font-family: "Cinzel", Georgia, serif !important;
font-weight: 600 !important;
}
#ew-global-topbar,
.ew-global-menu,
.ew-global-menu a {
font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
}
.ew-global-menu { font-weight: 400 !important; }
.ew-global-menu a {
font-size: 15px !important;
font-weight: 400 !important;
letter-spacing: .045em !important;
}
/* Content-facing headings and labels. */
#firstHeading,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
.ew-panel h2,
.ew-panel h3,
.ew-panel-title,
.ew-section-title,
.ew-category-title,
.ew-featured h2,
.ew-featured h3,
.ew-recent h2,
.ew-important h2,
.ew-overview h2,
.ew-category h2,
.ew-card-label {
font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
font-weight: 700 !important;
letter-spacing: .015em !important;
}
.ew-card-label {
display: block !important;
color: #171513 !important;
font-size: 14px !important;
line-height: 1.12 !important;
text-transform: none !important;
letter-spacing: .01em !important;
}
.ew-featured h3,
.ew-featured h3 a,
.ew-featured .mw-selflink {
font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
font-size: 21px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: .018em !important;
text-transform: none !important;
}
.ew-panel h2,
.ew-panel-title,
.ew-section-title,
.ew-category-title,
.ew-overview h2,
.ew-category h2,
.ew-featured h2,
.ew-recent h2,
.ew-important h2 {
font-size: 21px !important;
line-height: 1.15 !important;
}
#firstHeading { font-size: 34px !important; line-height: 1.12 !important; }
#content h2 { font-size: 26px !important; line-height: 1.18 !important; }
#content h3 { font-size: 21px !important; line-height: 1.2 !important; }
#content h4 { font-size: 18px !important; line-height: 1.22 !important; }
/* Strong display face only for branding. */
#p-logo::after,
.ew-hero-title {
font-family: "Cinzel Decorative", "Cinzel", Georgia, serif !important;
font-weight: 700 !important;
}
#p-logo::after { letter-spacing: .055em !important; }
.ew-hero-title { letter-spacing: .025em !important; }
.ew-hero-kicker {
font-family: "Alegreya SC", "Alegreya", Georgia, serif !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
}
/* Long-form prose sizing. */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output dt,
.ew-home,
.ew-panel p {
font-size: 16.5px !important;
line-height: 1.48 !important;
}
/* Use Vector's own edit controls. Do not create a second custom one. */
#ca-edit,
#ca-ve-edit,
#ca-viewsource {
display: list-item !important;
}
/* Legacy custom edit shortcut is no longer used. */
.ew-edit-link { display: none !important; }
/* =========================================================
SHARED ARTICLE PRIMITIVES
Structural rules shared by the designed article systems.
Page-specific colours and unique behavior remain local.
========================================================= */
.country-page,
.history-page,
.city-page,
.deity-page,
.wiki-page {
box-sizing: border-box;
width: calc(100vw - var(--ew-sidebar) - 84px) !important;
max-width: none !important;
font-family: "Alegreya", Georgia, serif;
line-height: 1.62;
}
.country-hero,
.history-hero,
.city-hero,
.deity-hero,
.wiki-hero {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.country-hero,
.history-hero,
.city-hero,
.deity-hero {
box-shadow: 0 12px 30px rgba(28, 18, 13, 0.19);
}
.country-hero__overlay,
.history-hero__overlay,
.city-hero__overlay,
.deity-hero__overlay,
.wiki-hero__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
}
.country-hero__eyebrow,
.history-hero__eyebrow,
.city-hero__eyebrow,
.deity-hero__eyebrow,
.wiki-hero__eyebrow {
margin-bottom: 0.25rem;
font-family: "Alegreya SC", Georgia, serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.16em;
}
.country-hero__title,
.history-hero__title,
.city-hero__title,
.deity-hero__title,
.wiki-hero__title {
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
text-shadow: 0 3px 16px rgba(0, 0, 0, 0.72);
}
.country-hero__subtitle,
.history-hero__subtitle,
.city-hero__subtitle,
.deity-hero__subtitle,
.wiki-hero__subtitle {
font-style: italic;
}
.country-overview,
.history-overview,
.city-overview,
.deity-overview {
display: grid;
gap: 2rem;
align-items: start;
margin-bottom: 2.25rem;
}
.country-overview__lead,
.history-overview__lead,
.city-overview__lead,
.deity-overview__lead {
font-size: 1.08rem;
}
.country-overview__lead > p:first-child::first-letter,
.history-overview__lead > p:first-child::first-letter,
.city-overview__lead > p:first-child::first-letter,
.deity-overview__lead > p:first-child::first-letter {
float: left;
margin: 0.08em 0.1em 0 0;
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
}
.country-record,
.history-record,
.city-record,
.deity-record,
.wiki-record {
overflow: hidden;
border-radius: 12px;
}
.country-record__heading,
.history-record__heading,
.city-record__heading,
.deity-record__heading {
padding: 0.85rem 1rem;
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
}
.country-record__row,
.history-record__row,
.city-record__row,
.deity-record__row {
display: grid;
gap: 0.75rem;
padding: 0.62rem 0.85rem;
}
.country-record__row span,
.history-record__row span,
.city-record__row span,
.deity-record__row span {
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
}
.country-card-grid,
.deity-card-grid,
.wiki-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 1rem 0 1.75rem;
}
.country-card-grid--three,
.deity-card-grid--three,
.wiki-card-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.history-figure,
.deity-figure,
.wiki-figure {
box-sizing: border-box;
margin: 1.35rem 0 1.9rem;
overflow: hidden;
border-radius: 10px;
}
.history-figure__caption,
.deity-figure__caption,
.wiki-figure__caption {
padding: 0.65rem 0.9rem 0.72rem;
font-size: 0.94rem;
font-style: italic;
line-height: 1.35;
}
.city-index__grid,
.deity-index__grid,
.wiki-index__grid {
display: grid;
}
.city-index__grid > div,
.deity-index__grid > div,
.wiki-index__grid > div {
min-width: 0;
}
.city-index__grid span,
.city-index__grid strong,
.deity-index__grid span,
.deity-index__grid strong,
.wiki-index__grid span,
.wiki-index__grid strong {
display: block;
}
.city-index__grid span,
.deity-index__grid span,
.wiki-index__grid span {
font-family: "Alegreya SC", Georgia, serif;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.city-index__grid strong,
.deity-index__grid strong,
.wiki-index__grid strong {
margin-top: 0.12rem;
font-size: 0.98rem;
line-height: 1.2;
}
.city-index__heading,
.deity-index__heading,
.wiki-index__heading {
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
text-align: center;
}
.deity-card,
.wiki-card {
min-width: 0;
padding: 1rem;
border-radius: 9px;
}
.deity-card h3,
.wiki-card h3 {
margin: 0 0 0.35rem;
font-size: 1.17rem;
}
.deity-card p,
.wiki-card p {
margin: 0.35rem 0 0;
}
.history-note,
.city-note {
margin: 1.25rem 0;
border-radius: 8px;
}
.history-note strong,
.city-note strong {
font-family: "Alegreya SC", Georgia, serif;
}
.history-page__body,
.city-page__body {
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
}
.history-page__body .toc,
.city-page__body .toc,
.history-page__body #toc,
.city-page__body #toc {
margin: 0 0 1.8rem;
padding: 0.9rem 1.1rem;
border-radius: 9px;
}
.history-page__body h2,
.city-page__body h2,
.deity-page__body h2,
.wiki-page__body h2 {
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
}
.city-page__body h2::after,
.deity-page__body h2::after,
.wiki-page__body h2::after {
content: "";
flex: 1;
height: 1px;
}
.city-index__grid a,
.deity-index__grid a,
.wiki-index__grid a {
display: block;
text-decoration: none;
}
.history-figure .mw-file-element,
.deity-figure .mw-file-element,
.history-figure__image,
.deity-figure__image {
height: clamp(220px, 28vw, 340px);
object-fit: cover;
}
.deity-quote,
.wiki-quote {
font-size: 1.08rem;
font-style: italic;
}
/* =========================================================
COUNTRY PAGES
Country-specific components and palette usage.
========================================================= */
.country-page {
color: var(--country-ink, var(--ew-ink));
}
.country-hero {
background: var(--country-deep, var(--ew-dark-2));
}
/* Do not show the blue missing-file link before the hero artwork is uploaded. */
.country-hero__overlay {
color: #fffaf2;
background:
linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%),
linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%);
}
.country-hero__eyebrow {
color: #efb879;
}
.country-hero__subtitle {
color: #eadcc9;
}
.country-overview {
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}
.country-overview__lead > p:first-child::first-letter {
color: var(--country-accent, var(--ew-gold));
font-size: 3.7em;
line-height: 0.78;
}
.country-quickfacts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 1.4rem;
}
.country-quickfact {
min-height: 74px;
padding: 0.8rem 0.95rem;
border: 1px solid var(--country-line, var(--ew-border));
border-left: 4px solid var(--country-accent, var(--ew-gold));
border-radius: 8px;
background: linear-gradient(135deg, var(--country-paper, var(--ew-paper-light)), var(--country-paper-alt, var(--ew-paper)));
box-shadow: 0 4px 12px rgba(63, 43, 31, 0.07);
}
.country-quickfact span {
display: block;
margin-bottom: 0.2rem;
color: var(--country-muted, #6f665d);
font-family: "Alegreya SC", Georgia, serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.country-record {
border: 1px solid var(--country-line, var(--ew-border));
background: var(--country-paper, var(--ew-paper-light));
box-shadow: 0 10px 22px rgba(55, 37, 27, 0.13);
}
.country-record__heading {
color: #fff7ec;
background: linear-gradient(135deg, var(--country-deep, var(--ew-dark-2)), #4a2b20);
}
.country-record__emblem,
.country-record__map {
padding: 1rem;
text-align: center;
}
.country-record__emblem img,
.country-record__map img {
max-width: 100%;
height: auto;
}
.country-record__row {
grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
border-top: 1px solid var(--country-line, var(--ew-border));
}
.country-record__row span {
color: var(--country-muted, #6f665d);
}
.country-page h2 {
display: flex;
gap: 0.75rem;
align-items: center;
margin-top: 2.35rem;
border-bottom: 0;
color: var(--country-deep, var(--ew-dark-2));
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.75rem;
font-weight: 700;
}
.country-page h2::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--country-accent, var(--ew-gold)), transparent);
}
.country-page h3 {
color: var(--country-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
}
.country-feature {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
gap: 1.5rem;
align-items: center;
margin: 1rem 0 1.75rem;
}
.country-feature--image-left {
grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
}
.country-feature__media {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(50, 33, 24, 0.16);
}
.country-feature__media img {
display: block;
width: 100%;
min-height: 230px;
object-fit: cover;
}
.country-card-grid--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.country-mini-card,
.country-place-card,
.country-person-card {
overflow: hidden;
border: 1px solid var(--country-line, var(--ew-border));
border-radius: 10px;
background: var(--country-paper, var(--ew-paper-light));
box-shadow: 0 5px 14px rgba(62, 42, 31, 0.08);
}
.country-mini-card,
.country-person-card {
padding: 1rem;
}
.country-mini-card h3,
.country-place-card h3,
.country-person-card h3 {
margin: 0 0 0.35rem;
font-size: 1.15rem;
}
.country-mini-card p,
.country-place-card p,
.country-person-card p {
margin: 0;
}
.country-place-card__body {
padding: 0.85rem 1rem;
}
.country-place-card .mw-file-description,
.country-place-card__image,
.country-place-card__image img {
display: block;
width: 100%;
height: 135px;
object-fit: cover;
}
/* Missing territory/city art should not leave a large empty image panel. */
.country-place-card a.new.country-place-card__image {
display: none !important;
}
.country-person-card {
text-align: center;
}
.country-person-card__portrait {
margin: -1rem -1rem 0.85rem;
overflow: hidden;
}
.country-person-card__portrait img {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
object-position: center 20%;
}
.country-relations {
display: grid;
gap: 0.7rem;
}
.country-relations > div {
position: relative;
padding: 0.85rem 1rem;
border: 1px solid var(--country-line, var(--ew-border));
border-left: 4px solid var(--country-accent, var(--ew-gold));
border-radius: 8px;
background: rgba(245, 240, 230, 0.68);
}
.country-relations p {
margin: 0.3rem 0 0;
}
.relation {
display: inline-block;
margin-left: 0.65rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
color: #fff;
font-size: 0.76rem;
font-weight: 700;
vertical-align: 0.08em;
}
.relation--friendly { background: #39715a; }
.relation--guarded { background: #6f6678; }
.relation--uneasy { background: #a06b2f; }
.relation--tense { background: #9a4f37; }
.relation--hostile { background: #7f3030; }
.country-mainlink,
.country-related {
margin: 0.8rem 0 1.2rem;
padding: 0.75rem 1rem;
border-left: 4px solid var(--country-accent, var(--ew-gold));
background: linear-gradient(90deg, rgba(152, 77, 46, 0.11), transparent);
}
@media (max-width: 760px) {
.country-record {
order: -1;
}
}
/* ========================================================================
v6.0 SERVER-RENDERED SHELL REPAIR
#ew-server-topbar and #ew-sidebar-toggle are emitted by LocalSettings.php.
They do not depend on a custom MediaWiki:Sidebar portlet or Common.js.
======================================================================== */
/* Hide the two obsolete implementations if an older Sidebar or cached script
still supplies them. */
#ew-global-topbar,
#mw-panel #p-erindal-topbar {
display: none !important;
}
#ew-server-topbar {
position: fixed !important;
z-index: 150 !important;
top: 0 !important;
left: var(--ew-sidebar) !important;
right: 0 !important;
display: flex !important;
align-items: center !important;
width: calc(100vw - var(--ew-sidebar)) !important;
max-width: none !important;
height: var(--ew-topbar) !important;
margin: 0 !important;
padding: 0 18px 0 30px !important;
box-sizing: border-box !important;
overflow: visible !important;
color: #f3eee5 !important;
background: linear-gradient(180deg, #08141c 0%, #03090d 100%) !important;
border: 0 !important;
border-bottom: 2px solid rgba(112, 88, 58, .46) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 2px 6px rgba(0,0,0,.28) !important;
font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
}
#ew-server-topbar::before,
#ew-server-topbar::after {
content: "";
position: absolute;
top: 4px;
width: 18px;
height: 18px;
border-color: rgba(207, 163, 80, .55);
border-style: solid;
pointer-events: none;
}
#ew-server-topbar::before {
left: 4px;
border-width: 1px 0 0 1px;
}
#ew-server-topbar::after {
right: 4px;
border-width: 1px 1px 0 0;
}
#ew-server-topbar .ew-global-menu {
display: flex !important;
flex: 0 1 auto !important;
align-items: stretch !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
#ew-server-topbar .ew-global-section {
position: relative !important;
display: block !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
#ew-server-topbar .ew-global-section > summary {
display: flex !important;
align-items: center !important;
height: 100% !important;
margin: 0 !important;
padding: 0 17px !important;
box-sizing: border-box !important;
color: #f3eee5 !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
list-style: none !important;
font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
cursor: pointer !important;
}
#ew-server-topbar .ew-global-section > summary::-webkit-details-marker {
display: none !important;
}
#ew-server-topbar .ew-global-section > summary::marker {
content: "";
}
#ew-server-topbar .ew-global-section > summary span {
margin-left: 7px;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
transition: transform .16s ease;
}
#ew-server-topbar .ew-global-section[open] > summary span {
transform: rotate(180deg);
}
#ew-server-topbar .ew-global-section > summary:hover,
#ew-server-topbar .ew-global-section > summary:focus,
#ew-server-topbar .ew-global-section[open] > summary {
color: var(--ew-gold-soft) !important;
background: rgba(255,255,255,.04) !important;
}
#ew-server-topbar .ew-global-dropdown {
position: absolute !important;
z-index: 170 !important;
top: calc(var(--ew-topbar) - 2px) !important;
left: 0 !important;
display: none !important;
min-width: 220px !important;
margin: 0 !important;
padding: 7px !important;
box-sizing: border-box !important;
background: linear-gradient(180deg, #0b1a23, #041019) !important;
border: 1px solid rgba(125, 102, 69, .62) !important;
box-shadow: 0 10px 24px rgba(0,0,0,.36) !important;
}
#ew-server-topbar .ew-global-section[open] > .ew-global-dropdown {
display: block !important;
}
#ew-server-topbar .ew-global-dropdown a,
#ew-server-topbar .ew-global-dropdown a:visited {
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 9px 12px !important;
color: #f1ede6 !important;
background: transparent !important;
font-family: "Almendra SC", "Cinzel", Georgia, serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
letter-spacing: .015em !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
}
#ew-server-topbar .ew-global-dropdown a:hover,
#ew-server-topbar .ew-global-dropdown a:focus {
color: var(--ew-gold-soft) !important;
background: linear-gradient(90deg, rgba(35,67,93,.82), rgba(22,43,57,.24)) !important;
}
#ew-server-topbar .ew-global-search {
position: static !important;
flex: 0 1 304px !important;
width: min(304px, 26vw) !important;
height: 35px !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#ew-server-topbar .ew-global-search input[type="search"] {
min-width: 0 !important;
height: 33px !important;
margin: 0 !important;
padding: 0 12px !important;
font-family: "Alegreya", Georgia, serif !important;
font-size: 15px !important;
}
#ew-server-topbar .ew-global-search button {
flex: 0 0 42px !important;
width: 42px !important;
height: 33px !important;
padding: 0 !important;
line-height: 33px !important;
}
/* The server-rendered topbar already contains its own search. */
#p-search {
display: none !important;
}
/* A visible tab on the sidebar edge. When the panel is closed it remains at
the left edge so the sidebar can always be opened again. */
#ew-sidebar-toggle {
position: fixed !important;
z-index: 190 !important;
top: 70px !important;
left: calc(var(--ew-sidebar) - 14px) !important;
display: grid !important;
place-items: center !important;
width: 30px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 1px 3px 0 !important;
color: var(--ew-gold-soft) !important;
background: linear-gradient(180deg, #102431, #06131b) !important;
border: 1px solid rgba(207,163,80,.72) !important;
border-radius: 6px !important;
box-shadow: 0 3px 12px rgba(0,0,0,.44) !important;
font: 28px/1 Georgia, serif !important;
text-align: center !important;
cursor: pointer !important;
}
#ew-sidebar-toggle:hover,
#ew-sidebar-toggle:focus {
color: #fff4d6 !important;
background: linear-gradient(180deg, #173447, #0a1b25) !important;
outline: 2px solid rgba(239,201,121,.30) !important;
outline-offset: 1px !important;
}
html.ew-sidebar-collapsed {
--ew-sidebar: 0px;
}
html.ew-sidebar-collapsed #mw-panel {
display: block !important;
width: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html.ew-sidebar-collapsed #mw-panel > * {
display: none !important;
}
html.ew-sidebar-collapsed #mw-panel::before,
html.ew-sidebar-collapsed #mw-panel::after {
display: none !important;
}
html.ew-sidebar-collapsed #ew-sidebar-toggle {
left: 0 !important;
border-left: 0 !important;
border-radius: 0 6px 6px 0 !important;
}
#mw-panel,
#mw-page-base,
#mw-head-base,
#mw-head,
#content,
#footer,
#ew-server-topbar,
#ew-sidebar-toggle {
transition: left .18s ease, width .18s ease, margin-left .18s ease !important;
}
@media (max-width: 1180px) {
#ew-server-topbar .ew-global-section > summary {
padding-right: 11px !important;
padding-left: 11px !important;
font-size: 14px !important;
}
#ew-server-topbar .ew-global-search {
flex-basis: 220px !important;
width: 220px !important;
}
}
@media (max-width: 900px) {
#ew-server-topbar .ew-global-section:nth-child(n+5) {
display: none !important;
}
}
@media (max-width: 700px) {
html:not(.ew-sidebar-collapsed) {
--ew-sidebar: 218px;
}
#mw-panel {
display: block !important;
}
#ew-server-topbar .ew-global-section:nth-child(n+3) {
display: none !important;
}
#ew-server-topbar .ew-global-search {
flex-basis: min(210px, 48vw) !important;
width: min(210px, 48vw) !important;
}
#ew-sidebar-toggle {
display: grid !important;
}
}
/* =========================================================
NATIONAL HISTORY PAGES
Shared structure only. History-page palettes belong on the page wrapper.
========================================================= */
.history-page {
color: var(--history-ink, var(--ew-ink));
}
/* The main Erindal article rules normally stop every parser output at 1180px.
Nation-history pages are designed as full-page layouts, so they must be
allowed to use all of the space available beside the sidebar. */
.history-hero {
background: var(--history-deep, var(--ew-dark-2));
}
.history-hero__overlay {
color: #fffaf2;
background:
linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%),
linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%);
}
.history-hero__eyebrow {
color: #efb476;
}
.history-hero__subtitle {
color: #eadcc9;
}
.history-overview {
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}
.history-overview__lead > p:first-child::first-letter {
color: var(--history-accent, var(--ew-gold));
font-size: 3.8em;
line-height: 0.76;
}
.history-record {
border: 1px solid var(--history-line, var(--ew-border));
background: var(--history-paper, var(--ew-paper-light));
box-shadow: 0 9px 22px rgba(55, 37, 27, 0.12);
}
.history-record__heading {
color: #fff7ec;
background: linear-gradient(135deg, var(--history-deep, var(--ew-dark-2)), #503023);
}
.history-record__row {
grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
border-top: 1px solid var(--history-line, var(--ew-border));
}
.history-record__row span {
color: var(--history-muted, #6f665d);
}
.history-era-index {
box-sizing: border-box;
margin: 1.8rem 0 2.4rem;
padding: 1.15rem;
border: 1px solid var(--history-line, var(--ew-border));
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent),
var(--history-paper-alt, var(--ew-paper));
}
.history-era-index__heading {
margin: 0 0 0.85rem;
color: var(--history-deep, var(--ew-dark-2));
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.25rem;
font-weight: 700;
text-align: center;
}
.history-era-index__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.72rem;
align-items: stretch;
}
.history-era-index__grid > div {
box-sizing: border-box;
min-width: 0;
}
.history-era-index__grid a {
display: block;
box-sizing: border-box;
height: 100%;
padding: 0.72rem 0.82rem;
border: 1px solid rgba(91, 59, 41, 0.18);
border-left: 4px solid var(--history-accent, var(--ew-gold));
border-radius: 7px;
color: var(--history-ink, var(--ew-ink));
background: rgba(255, 252, 246, 0.68);
text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.history-era-index__grid a:hover {
transform: translateY(-1px);
background: #fffaf2;
box-shadow: 0 5px 12px rgba(54, 36, 25, 0.1);
}
.history-era-index__grid span,
.history-era-index__grid strong {
display: block;
}
.history-era-index__grid span {
color: var(--history-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.history-era-index__grid strong {
margin-top: 0.12rem;
font-size: 0.98rem;
line-height: 1.2;
}
.history-page__body {
position: relative;
padding-left: 2.25rem;
border-left: 2px solid rgba(153, 75, 44, 0.28);
}
.history-page__body p {
margin: 0.82rem 0;
}
.history-page__body h2 {
position: relative;
margin: 2.65rem 0 1rem;
padding: 0 0 0.55rem;
border-bottom: 1px solid var(--history-line, var(--ew-border));
color: var(--history-deep, var(--ew-dark-2));
font-size: clamp(1.55rem, 3vw, 2rem);
}
.history-page__body h2::before {
position: absolute;
top: 0.35em;
left: calc(-2.25rem - 7px);
width: 12px;
height: 12px;
border: 2px solid var(--history-paper, var(--ew-paper-light));
border-radius: 50%;
background: var(--history-accent, var(--ew-gold));
box-shadow: 0 0 0 2px rgba(153, 75, 44, 0.32);
content: "";
}
.history-page__body h3 {
margin-top: 1.75rem;
color: var(--history-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.3rem;
font-weight: 700;
}
.history-page__body a,
.history-record a {
color: #784029;
}
.history-page__body .toc,
.history-page__body #toc {
border: 1px solid var(--history-line, var(--ew-border));
background: var(--history-paper, var(--ew-paper-light));
}
.history-note {
padding: 0.9rem 1rem;
border: 1px solid var(--history-line, var(--ew-border));
border-left: 5px solid var(--history-accent, var(--ew-gold));
background: linear-gradient(135deg, var(--history-paper, var(--ew-paper-light)), var(--history-paper-alt, var(--ew-paper)));
}
.history-note--disputed {
--history-accent: #776453;
}
.history-note--aftermath {
--history-accent: #7c6331;
}
.history-note strong {
color: var(--history-deep, var(--ew-dark-2));
}
.history-page__body .thumb {
margin-top: 1.1rem;
border-color: var(--history-line, var(--ew-border));
}
.history-page__body table.wikitable {
border-color: var(--history-line, var(--ew-border));
background: var(--history-paper, var(--ew-paper-light));
}
.history-page__body table.wikitable th {
color: #fff8ed;
background: var(--history-deep, var(--ew-dark-2));
}
.history-figure {
border: 1px solid var(--history-line, var(--ew-border));
background: var(--history-paper, var(--ew-paper-light));
box-shadow: 0 8px 20px rgba(50, 33, 24, 0.14);
}
.history-figure .mw-file-description {
display: block;
width: 100%;
max-width: none;
}
.history-figure .mw-file-element,
.history-figure__image {
display: block;
width: 100% !important;
max-width: none !important;
}
.history-figure a.new {
display: none !important;
}
.history-figure__caption {
color: var(--history-muted, #6f665d);
background: linear-gradient(135deg, var(--history-paper, var(--ew-paper-light)), var(--history-paper-alt, var(--ew-paper)));
}
@media (max-width: 760px) {
.history-page__body {
padding-left: 1.25rem;
}
.history-page__body h2::before {
left: calc(-1.25rem - 7px);
}
.history-record {
width: min(100%, 560px);
order: -1;
}
}
/* =========================================================
ERINDAL CITY PAGES
Shared structure only. City-specific palettes belong on the page wrapper.
========================================================= */
.city-page {
color: var(--city-ink, var(--ew-ink));
}
.city-hero {
background: var(--city-deep, var(--ew-dark-2));
}
/* Match the country pages: a missing upload should not leave blue alt text
sitting over the dark hero background. */
.city-hero__overlay {
box-sizing: border-box;
color: #fffaf2;
background:
linear-gradient(180deg, rgba(20, 12, 9, 0.06) 18%, rgba(20, 12, 9, 0.88) 100%),
linear-gradient(90deg, rgba(20, 12, 9, 0.52), transparent 64%);
}
.city-hero__eyebrow {
color: var(--city-accent-light, var(--ew-gold-soft));
}
.city-hero__subtitle {
max-width: 900px;
color: #eadcc9;
}
.city-overview {
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}
.city-overview__lead > p:first-child::first-letter {
color: var(--city-accent, var(--ew-gold));
font-size: 3.8em;
line-height: 0.76;
}
.city-record {
border: 1px solid var(--city-line, var(--ew-border));
background: var(--city-paper, var(--ew-paper-light));
box-shadow: 0 9px 22px rgba(55, 37, 27, 0.12);
}
.city-record__heading {
color: #fff8ed;
background: linear-gradient(135deg, var(--city-deep, var(--ew-dark-2)), color-mix(in srgb, var(--city-deep, var(--ew-dark-2)) 66%, var(--city-accent, var(--ew-gold))));
}
.city-record__row {
grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1.3fr);
border-top: 1px solid var(--city-line, var(--ew-border));
}
.city-record__row span {
color: var(--city-muted, #6f665d);
}
.city-index {
box-sizing: border-box;
margin: 1.8rem 0 2.4rem;
padding: 1.15rem;
border: 1px solid var(--city-line, var(--ew-border));
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent),
var(--city-paper-alt, var(--ew-paper));
}
.city-index__heading {
margin: 0 0 0.85rem;
color: var(--city-deep, var(--ew-dark-2));
font-size: 1.25rem;
}
.city-index__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.72rem;
align-items: stretch;
}
.city-index__grid > div {
box-sizing: border-box;
}
.city-index__grid a {
box-sizing: border-box;
height: 100%;
padding: 0.72rem 0.82rem;
border: 1px solid rgba(91, 59, 41, 0.18);
border-left: 4px solid var(--city-accent, var(--ew-gold));
border-radius: 7px;
color: var(--city-ink, var(--ew-ink));
background: rgba(255, 252, 246, 0.7);
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.city-index__grid a:hover {
transform: translateY(-1px);
background: #fffaf2;
box-shadow: 0 5px 12px rgba(54, 36, 25, 0.1);
}
.city-index__grid span {
color: var(--city-accent, var(--ew-gold));
}
.city-page__body p {
margin: 0.82rem 0;
}
.city-page__body h2 {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 2.35rem 0 1rem;
border-bottom: 0;
color: var(--city-deep, var(--ew-dark-2));
font-size: 1.75rem;
}
.city-page__body h2::after {
background: linear-gradient(90deg, var(--city-accent, var(--ew-gold)), transparent);
}
.city-page__body h3 {
margin-top: 1.75rem;
color: var(--city-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.32rem;
font-weight: 700;
}
.city-page__body a,
.city-record a {
color: color-mix(in srgb, var(--city-accent, var(--ew-gold)) 76%, #1c2730);
}
.city-page__body .toc,
.city-page__body #toc {
border: 1px solid var(--city-line, var(--ew-border));
background: var(--city-paper, var(--ew-paper-light));
}
.city-district-grid,
.city-location-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
margin: 1.1rem 0 1.5rem;
}
.city-location-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.city-district-card,
.city-location-card {
box-sizing: border-box;
min-width: 0;
padding: 1rem 1.05rem;
border: 1px solid var(--city-line, var(--ew-border));
border-top: 4px solid var(--city-accent, var(--ew-gold));
border-radius: 9px;
background: linear-gradient(145deg, var(--city-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.5));
box-shadow: 0 5px 14px rgba(49, 35, 25, 0.08);
}
.city-district-card h3,
.city-location-card h3 {
margin: 0 0 0.35rem;
color: var(--city-deep, var(--ew-dark-2));
font-size: 1.18rem;
}
.city-district-card p,
.city-location-card p {
margin: 0.35rem 0 0;
}
.city-note {
padding: 0.95rem 1.05rem;
border: 1px solid var(--city-line, var(--ew-border));
border-left: 5px solid var(--city-accent, var(--ew-gold));
background: linear-gradient(135deg, var(--city-paper, var(--ew-paper-light)), var(--city-paper-alt, var(--ew-paper)));
}
.city-note--danger {
--city-accent: #7f3f32;
}
.city-note--history {
--city-accent: #7b653d;
}
.city-note--disputed {
--city-accent: #596876;
}
.city-note strong {
color: var(--city-deep, var(--ew-dark-2));
}
/* =========================================================
FINAL SHARED HERO SCALE
Nation, history, city and deity pages deliberately use one size.
Keep this block last so older duplicate rules cannot win.
========================================================= */
.country-hero,
.history-hero,
.city-hero,
.deity-hero,
.wiki-hero {
box-sizing: border-box !important;
height: clamp(240px, 22vw, 320px) !important;
min-height: 240px !important;
max-height: 320px !important;
margin: 0 0 1.4rem !important;
border-radius: 14px !important;
}
.country-hero .mw-file-description,
.country-hero .mw-file-element,
.history-hero .mw-file-description,
.history-hero .mw-file-element,
.city-hero .mw-file-description,
.city-hero .mw-file-element,
.deity-hero .mw-file-description,
.deity-hero .mw-file-element,
.wiki-hero .mw-file-description,
.wiki-hero .mw-file-element,
.country-hero__image,
.history-hero__image,
.city-hero__image,
.deity-hero__image,
.wiki-hero__image {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
object-fit: cover !important;
}
.country-hero__overlay,
.history-hero__overlay,
.city-hero__overlay,
.deity-hero__overlay,
.wiki-hero__overlay {
padding: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.country-hero__title,
.history-hero__title,
.city-hero__title,
.deity-hero__title,
.wiki-hero__title {
max-width: 900px !important;
font-size: clamp(2.1rem, 4vw, 3.6rem) !important;
line-height: 0.96 !important;
}
.country-hero__subtitle,
.history-hero__subtitle,
.city-hero__subtitle,
.deity-hero__subtitle,
.wiki-hero__subtitle {
margin-top: 0.55rem !important;
font-size: clamp(1rem, 2vw, 1.35rem) !important;
}
/* Missing files leave no blue filename inside the hero. */
.country-hero a.new,
.history-hero a.new,
.city-hero a.new,
.deity-hero a.new,
.wiki-hero a.new {
display: none !important;
}
@media (max-width: 760px) {
.country-hero,
.history-hero,
.city-hero,
.deity-hero,
.wiki-hero {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
border-radius: 10px !important;
}
.country-hero__overlay,
.history-hero__overlay,
.city-hero__overlay,
.deity-hero__overlay,
.wiki-hero__overlay {
padding: 1.25rem !important;
}
}
/* =========================================================
FLOWING RECORD LAYOUT
Desktop record boxes behave like traditional wiki infoboxes: they float
beside the article instead of forcing everything below their full height.
========================================================= */
@media (min-width: 951px) {
.country-overview,
.history-overview,
.city-overview {
display: block !important;
margin-bottom: 1.5rem !important;
}
.country-record,
.history-record,
.city-record {
float: right !important;
box-sizing: border-box !important;
width: 340px !important;
max-width: 34% !important;
margin: 0 0 1.5rem 2rem !important;
}
.country-overview__lead,
.history-overview__lead,
.city-overview__lead {
display: block !important;
min-width: 0 !important;
}
.history-era-index,
.city-index {
min-width: 0;
overflow: hidden;
}
.country-page::after,
.history-page::after,
.city-page::after,
.deity-page::after,
.wiki-page::after {
content: "";
display: block;
clear: both;
}
}
/* =========================================================
HISTORY AND CHRONOLOGY PORTALS — FULL CONTENT WIDTH
The original general article rule caps parser output at 1180px. These are
designed reference pages and should use the same available width as city,
nation, national-history and deity layouts.
========================================================= */
body.page-Category_History_and_Timeline .mw-parser-output,
body.page-History_and_Timeline .mw-parser-output,
body.page-Chronology_of_Erindal .mw-parser-output,
body.page-Calendar_of_Erindal .mw-parser-output,
body.page-Death_Souls_and_Resurrection .mw-parser-output {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
}
@media (max-width: 950px) {
.country-overview,
.history-overview,
.city-overview {
display: block !important;
}
.country-record,
.history-record,
.city-record {
float: none !important;
box-sizing: border-box !important;
width: min(100%, 580px) !important;
max-width: 100% !important;
margin: 0 auto 1.5rem !important;
}
}
/* =========================================================
ERINDAL ARTICLE SYSTEM: ORGANIZATIONS, CHARACTERS AND MAGIC
Shared structure only. Each article defines its own palette on .wiki-page.
========================================================= */
.wiki-page {
color: var(--wiki-ink, var(--ew-ink));
}
.wiki-hero {
background: var(--wiki-deep, var(--ew-dark-2));
box-shadow: 0 12px 30px rgba(25, 20, 17, 0.19);
}
.wiki-hero__overlay {
color: #fffaf2;
background:
linear-gradient(180deg, rgba(12, 16, 20, 0.03) 18%, rgba(10, 13, 16, 0.9) 100%),
linear-gradient(90deg, rgba(9, 13, 16, 0.66), transparent 70%);
}
.wiki-hero__eyebrow {
color: #efc078;
text-transform: uppercase;
}
.wiki-hero__subtitle {
color: #e9dfd0;
}
.wiki-article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 370px;
gap: 2rem;
align-items: start;
}
.wiki-article-layout__main,
.wiki-article-layout__rail,
.wiki-page__body {
min-width: 0;
}
.wiki-lead {
margin-bottom: 1.35rem;
font-size: 1.08rem;
}
.wiki-lead > p:first-child::first-letter {
float: left;
margin: 0.08em 0.1em 0 0;
color: var(--wiki-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
font-size: 3.7em;
font-weight: 700;
line-height: 0.78;
}
.wiki-record {
border: 1px solid var(--wiki-line, var(--ew-border));
background: var(--wiki-paper, var(--ew-paper-light));
box-shadow: 0 10px 22px rgba(38, 32, 28, 0.13);
}
.wiki-record__title {
padding: 0.85rem 1rem;
color: #fff8ee;
background: linear-gradient(135deg, var(--wiki-deep, var(--ew-dark-2)), var(--wiki-accent, var(--ew-gold)));
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
}
.wiki-record__image {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 285px;
padding: 0.8rem;
overflow: hidden;
border-bottom: 1px solid var(--wiki-line, var(--ew-border));
background: linear-gradient(145deg, var(--wiki-paper-alt, var(--ew-paper)), var(--wiki-paper, var(--ew-paper-light)));
}
.wiki-record__image--portrait {
box-sizing: border-box;
height: 270px;
min-height: 270px;
max-height: 270px;
padding: 0;
overflow: hidden;
background: var(--wiki-paper, var(--ew-paper-light));
}
.wiki-record__image .mw-file-description {
display: block;
width: 100%;
height: 100%;
}
.wiki-record__image .mw-file-element {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: contain;
object-position: center;
}
/* Character portraits use the normal MediaWiki infobox behaviour:
show the whole image at the record width, preserve its aspect ratio,
and leave the file link intact so clicking opens the MediaWiki file page
where the original/full-resolution image is available. */
.wiki-record__image--portrait .mw-file-description {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box;
width: 100% !important;
height: 270px !important;
}
.wiki-record__image--portrait .mw-file-element {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: 270px !important;
max-height: 270px !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 auto !important;
}
/* Organization record emblems
---------------------------------------------------------
IMPORTANT: target .wiki-record--organization itself.
MediaWiki may insert <span>/<a> wrappers around [[File:...]], so relying
only on a class attached to the image/wrapper proved unreliable.
Unlike portraits, an emblem should NOT be forced to fill either dimension.
It keeps its natural aspect ratio and is constrained only by max-width /
max-height. Clicking the image still uses MediaWiki's normal file link. */
.wiki-record.wiki-record--organization .wiki-record__image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 230px !important;
min-height: 230px !important;
max-height: 230px !important;
padding: 0.7rem !important;
overflow: hidden !important;
border-bottom: 1px solid var(--wiki-line, var(--ew-border));
background: var(--wiki-paper, var(--ew-paper-light));
}
/* MediaWiki can place one or more spans around the file link. */
.wiki-record.wiki-record--organization .wiki-record__image > span,
.wiki-record.wiki-record--organization .wiki-record__image .mw-file-description,
.wiki-record.wiki-record--magic .wiki-record__image > span,
.wiki-record.wiki-record--magic .wiki-record__image .mw-file-description {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* This is the actual image. Do not give it width:100% or height:100%.
Those declarations were what kept making the tall Holy Flame emblem huge.
Natural ratio + two maximums gives the same compact-thumbnail behaviour
wanted from a wiki infobox. */
.wiki-record.wiki-record--organization .wiki-record__image .mw-file-element,
.wiki-record.wiki-record--organization .wiki-record__image img,
.wiki-record.wiki-record--organization .wiki-record__emblem-image {
display: block !important;
box-sizing: border-box !important;
width: auto !important;
height: auto !important;
max-width: 88% !important;
max-height: 205px !important;
margin: auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
}
/* Magic record illustrations
---------------------------------------------------------
Arcane illustrations should behave like compact wiki thumbnails, not like
character portraits or full-bleed hero art. Keep the original aspect ratio,
centre the complete image in a restrained frame, and leave MediaWiki's
normal file link intact so clicking opens the file page/full image. */
.wiki-record.wiki-record--magic .wiki-record__image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 230px !important;
min-height: 230px !important;
max-height: 230px !important;
padding: 0.7rem !important;
overflow: hidden !important;
border-bottom: 1px solid var(--wiki-line, var(--ew-border));
background:
radial-gradient(circle at 50% 45%, rgba(255,255,255,0.24), transparent 72%),
var(--wiki-paper, var(--ew-paper-light));
}
.wiki-record.wiki-record--magic .wiki-record__image .mw-file-element,
.wiki-record.wiki-record--magic .wiki-record__image img {
display: block !important;
box-sizing: border-box !important;
width: auto !important;
height: auto !important;
max-width: 90% !important;
max-height: 205px !important;
margin: auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
}
.wiki-record__image a.new {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--wiki-muted, #6f665d) !important;
font-style: italic;
text-align: center;
}
.wiki-record__rows > div {
display: grid;
grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.35fr);
gap: 0.75rem;
padding: 0.65rem 0.85rem;
border-top: 1px solid var(--wiki-line, var(--ew-border));
}
.wiki-record__rows > div:first-child {
border-top: 0;
}
.wiki-record__rows span {
color: var(--wiki-muted, #6f665d);
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
}
.wiki-record__rows strong {
min-width: 0;
overflow-wrap: anywhere;
}
.wiki-record a,
.wiki-page a {
color: #174f72;
}
.wiki-index {
margin: 0 0 1.5rem;
overflow: hidden;
border: 1px solid var(--wiki-line, var(--ew-border));
border-radius: 11px;
background: linear-gradient(145deg, var(--wiki-paper, var(--ew-paper-light)), var(--wiki-paper-alt, var(--ew-paper)));
}
.wiki-index__heading {
padding: 0.8rem 1rem 0.7rem;
color: var(--wiki-deep, var(--ew-dark-2));
font-size: 1.15rem;
}
.wiki-index__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--wiki-line, var(--ew-border));
}
/* Preserved from the former mixed deity/wiki index rules. */
.wiki-index__grid > div {
background: rgba(250, 247, 240, 0.96);
}
.wiki-index__grid a {
min-height: 56px;
padding: 0.72rem 0.85rem;
color: inherit;
}
.wiki-index__grid span {
color: var(--wiki-accent, var(--ew-gold));
}
.wiki-article-layout__main .toc,
.wiki-article-layout__main #toc {
float: none !important;
box-sizing: border-box !important;
width: min(100%, 300px) !important;
max-width: 100% !important;
margin: 0 0 1.5rem !important;
}
.wiki-page > .wiki-page__body {
display: block;
clear: both;
box-sizing: border-box;
width: 100%;
max-width: none;
min-width: 0;
}
.wiki-page__body h2 {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 2.35rem 0 1rem;
border-bottom: 0;
color: var(--wiki-deep, var(--ew-dark-2));
font-size: 1.75rem;
}
.wiki-page__body h2::after {
background: linear-gradient(90deg, var(--wiki-accent, var(--ew-gold)), transparent);
}
.wiki-page__body h3 {
color: var(--wiki-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
}
.wiki-card {
border: 1px solid var(--wiki-line, var(--ew-border));
border-top: 4px solid var(--wiki-accent, var(--ew-gold));
background: linear-gradient(145deg, var(--wiki-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.55));
box-shadow: 0 5px 14px rgba(45, 38, 32, 0.08);
}
.wiki-process {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 1rem 0 1.75rem;
counter-reset: none;
}
.wiki-process > div {
position: relative;
min-width: 0;
padding: 1.1rem;
border: 1px solid var(--wiki-line, var(--ew-border));
border-radius: 9px;
background: linear-gradient(145deg, var(--wiki-paper, var(--ew-paper-light)), rgba(255, 255, 255, 0.55));
}
.wiki-process > div > span {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
margin-bottom: 0.55rem;
color: white;
border-radius: 50%;
background: var(--wiki-accent, var(--ew-gold));
font-family: "Alegreya SC", Georgia, serif;
font-weight: 700;
}
.wiki-process h3 {
margin: 0 0 0.3rem;
}
.wiki-process p {
margin: 0;
}
.wiki-figure {
border: 1px solid var(--wiki-line, var(--ew-border));
background: var(--wiki-paper, var(--ew-paper-light));
box-shadow: 0 8px 20px rgba(40, 34, 30, 0.14);
}
.wiki-figure .mw-file-description,
.wiki-figure .mw-file-element {
display: block;
width: 100% !important;
max-width: none !important;
}
.wiki-figure .mw-file-element {
height: clamp(220px, 31vw, 430px);
object-fit: cover;
}
.wiki-figure__caption {
color: var(--wiki-muted, #6f665d);
background: linear-gradient(135deg, var(--wiki-paper, var(--ew-paper-light)), var(--wiki-paper-alt, var(--ew-paper)));
}
.wiki-quote {
margin: 1.25rem 0;
padding: 0.95rem 1.05rem;
border: 1px solid var(--wiki-line, var(--ew-border));
border-left: 5px solid var(--wiki-accent, var(--ew-gold));
border-radius: 8px;
background: linear-gradient(135deg, var(--wiki-paper, var(--ew-paper-light)), var(--wiki-paper-alt, var(--ew-paper)));
color: var(--wiki-deep, var(--ew-dark-2));
}
.wiki-quote p {
margin: 0;
}
.wiki-quote cite {
display: block;
margin-top: 0.35rem;
color: var(--wiki-muted, #6f665d);
font-size: 0.9rem;
font-style: normal;
text-align: right;
}
.wiki-table {
width: 100%;
margin: 1rem 0 1.6rem;
border-collapse: collapse;
background: rgba(248, 245, 238, 0.86);
}
.wiki-table th {
color: #fff8ee;
background: var(--wiki-deep, var(--ew-dark-2));
font-family: "Alegreya SC", Georgia, serif;
text-align: left;
}
.wiki-table th,
.wiki-table td {
padding: 0.65rem 0.75rem;
border: 1px solid var(--wiki-line, var(--ew-border));
vertical-align: top;
}
@media (max-width: 950px) {
.wiki-article-layout {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
.wiki-article-layout__rail {
grid-column: 1;
grid-row: 1;
}
.wiki-article-layout__main {
grid-column: 1;
grid-row: 2;
}
.wiki-article-layout__rail .wiki-record {
width: min(100%, 580px);
margin: 0 auto;
}
.wiki-page {
width: calc(100vw - var(--ew-sidebar) - 48px) !important;
}
}
@media (max-width: 760px) {
.wiki-table {
display: block;
overflow-x: auto;
}
}
/* Desktop records use traditional wiki flow. The record is first in the
source, floats at the top-right and article text continues beside it until
the record ends. This prevents both a blank wall and a record postponed to
the bottom of a long page. */
@media (min-width: 951px) {
.wiki-article-layout {
display: block;
}
.wiki-article-layout__rail {
float: right;
box-sizing: border-box;
width: 370px;
max-width: 34%;
margin: 0 0 1.5rem 2rem;
}
.wiki-article-layout__main {
display: block;
min-width: 0;
}
.wiki-page__body {
clear: none !important;
}
}
/* ========================================================================
END ERINDAL WIKI COMMON.CSS v6.0
======================================================================== */
/* ========================================================================
v6.3.12 CATEGORY HUBS
Reusable visual treatment for MediaWiki category pages.
Category-specific colours belong in the category page's own .wiki source.
======================================================================== */
body.ns-14 {
--category-accent: var(--ew-gold);
--category-accent-light: var(--ew-gold-soft);
--category-deep: #102733;
--category-paper: #f5f0e7;
--category-paper-alt: #e8dfd0;
--category-ink: #2b2925;
--category-muted: #70675c;
--category-line: rgba(59, 52, 44, 0.24);
}
/* Category directories are navigation pages, not normal reading-width articles.
IMPORTANT: do not use width:100% here. The old article system can leave the
parser output's containing block at the 1180px reading width, so 100% simply
becomes 1180px again. Give category parser output the same explicit viewport
width calculation used by the working country/wiki-page systems. */
body.ns-14 #mw-content-text {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
}
body.ns-14 .mw-parser-output {
box-sizing: border-box !important;
width: calc(100vw - var(--ew-sidebar) - 84px) !important;
max-width: none !important;
}
/* Keep category pages feeling like part of the Erindal article system. */
body.ns-14 #firstHeading {
margin-bottom: 0.9rem;
color: var(--category-deep);
font-family: "Alegreya SC", Georgia, serif;
letter-spacing: 0.025em;
}
.category-hub {
box-sizing: border-box;
width: 100%;
margin: 0 0 1.7rem;
color: var(--category-ink);
font-family: "Alegreya", Georgia, serif;
}
.category-hub__header {
position: relative;
overflow: hidden;
padding: 1.55rem 1.7rem 1.45rem;
border: 1px solid var(--category-line);
border-radius: 13px;
background:
linear-gradient(120deg,
color-mix(in srgb, var(--category-deep) 96%, black) 0%,
var(--category-deep) 58%,
color-mix(in srgb, var(--category-accent) 48%, var(--category-deep)) 100%);
box-shadow: 0 10px 25px rgba(30, 24, 18, 0.13);
}
.category-hub__header::after {
content: "";
position: absolute;
right: -45px;
bottom: -90px;
width: 300px;
height: 220px;
border: 1px solid color-mix(in srgb, var(--category-accent-light) 25%, transparent);
border-radius: 50%;
box-shadow:
0 0 0 34px color-mix(in srgb, var(--category-accent-light) 7%, transparent),
0 0 0 72px color-mix(in srgb, var(--category-accent-light) 4%, transparent);
pointer-events: none;
}
.category-hub__eyebrow {
position: relative;
z-index: 1;
margin-bottom: 0.22rem;
color: var(--category-accent-light);
font-family: "Alegreya SC", Georgia, serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.category-hub__title {
position: relative;
z-index: 1;
margin: 0;
color: #fff8ed;
font-family: "Alegreya SC", Georgia, serif;
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.025em;
}
.category-hub__subtitle {
position: relative;
z-index: 1;
max-width: 780px;
margin-top: 0.55rem;
color: rgba(255, 248, 237, 0.88);
font-size: 1.02rem;
line-height: 1.5;
}
.category-hub__intro {
margin: 1rem 0 0;
padding: 0.95rem 1.1rem;
border-left: 3px solid var(--category-accent);
background: linear-gradient(90deg,
color-mix(in srgb, var(--category-accent) 9%, var(--category-paper)),
var(--category-paper));
color: var(--category-ink);
}
.category-hub__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
margin-top: 1rem;
}
.category-hub__grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* A secondary status card can sit beneath a 3-column category grid without
pretending to be another functional organization type. On desktop it uses
the middle column; on smaller layouts it remains centred, then becomes
full-width on mobile. */
.category-hub__card--centered {
grid-column: 2 / 3;
}
@media (max-width: 950px) {
.category-hub__card--centered {
grid-column: 1 / -1;
width: calc((100% - 0.8rem) / 2);
justify-self: center;
}
}
@media (max-width: 620px) {
.category-hub__card--centered {
width: 100%;
}
}
.category-hub__card {
min-width: 0;
padding: 1rem 1.05rem 0.95rem;
border: 1px solid var(--category-line);
border-radius: 10px;
background:
linear-gradient(145deg, var(--category-paper), var(--category-paper-alt));
box-shadow: 0 5px 14px rgba(45, 36, 28, 0.06);
}
.category-hub__card h3,
.category-hub__card-title {
display: block;
margin: 0 0 0.28rem;
color: var(--category-deep);
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.13rem;
font-weight: 700;
line-height: 1.15;
}
.category-hub__card p {
margin: 0 0 0.65rem;
color: var(--category-muted);
line-height: 1.45;
}
.category-hub__card a {
color: #174f72;
font-weight: 700;
text-decoration: none;
}
.category-hub__card a:hover,
.category-hub__card a:focus {
text-decoration: underline;
}
/* Automatic MediaWiki category output ----------------------------------- */
body.ns-14 #mw-subcategories,
body.ns-14 #mw-pages {
margin-top: 1.8rem;
}
body.ns-14 #mw-subcategories > h2,
body.ns-14 #mw-pages > h2 {
margin: 0 0 0.45rem;
padding-bottom: 0.42rem;
color: var(--category-deep);
border-bottom: 1px solid var(--category-line);
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.45rem;
letter-spacing: 0.025em;
}
body.ns-14 #mw-subcategories > p,
body.ns-14 #mw-pages > p {
color: var(--category-muted);
}
/* Turn the stock alphabetical columns into parchment directory cards. */
body.ns-14 .mw-category {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
margin-top: 1rem;
}
body.ns-14 .mw-category-generated .mw-category-group,
body.ns-14 .mw-category .mw-category-group {
box-sizing: border-box;
min-width: 0;
margin: 0 !important;
padding: 0.85rem 0.95rem 0.9rem;
border: 1px solid var(--category-line);
border-radius: 10px;
background:
linear-gradient(145deg, var(--category-paper), var(--category-paper-alt));
box-shadow: 0 4px 12px rgba(43, 34, 27, 0.055);
}
body.ns-14 .mw-category-group h3 {
margin: 0 0 0.45rem;
padding: 0 0 0.32rem;
color: var(--category-accent);
border-bottom: 1px solid color-mix(in srgb, var(--category-line) 75%, transparent);
font-family: "Alegreya SC", Georgia, serif;
font-size: 1.2rem;
line-height: 1;
}
body.ns-14 .mw-category-group ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.ns-14 .mw-category-group li {
margin: 0 !important;
padding: 0.28rem 0 !important;
}
body.ns-14 .mw-category-group li + li {
border-top: 1px dotted color-mix(in srgb, var(--category-line) 70%, transparent);
}
body.ns-14 .mw-category-group a {
color: #174f72;
font-weight: 600;
text-decoration: none;
}
body.ns-14 .mw-category-group a:hover,
body.ns-14 .mw-category-group a:focus {
color: var(--category-deep);
text-decoration: underline;
}
/* Subcategories use the same visual language where MediaWiki exposes them. */
body.ns-14 #mw-subcategories .mw-category {
margin-bottom: 0.4rem;
}
@media (max-width: 950px) {
.category-hub__grid,
body.ns-14 .mw-category {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.category-hub__header {
padding: 1.2rem;
}
.category-hub__grid,
.category-hub__grid--2,
body.ns-14 .mw-category {
grid-template-columns: 1fr;
}
}
/* ========================================================================
v6.3.16 MAIN CATEGORY HUBS - HIDE DUPLICATE SUBCATEGORIES
The nine top-level category hubs already show curated category cards.
Hide MediaWiki's automatic #mw-subcategories block only on those pages.
Compact/mini category hubs remain unchanged.
======================================================================== */
body.ns-14.page-Category_Nations_and_Realms #mw-subcategories,
body.ns-14.page-Category_Ancestries_and_Cultures #mw-subcategories,
body.ns-14.page-Category_Races_and_Peoples #mw-subcategories,
body.ns-14.page-Category_Characters #mw-subcategories,
body.ns-14.page-Category_Organizations #mw-subcategories,
body.ns-14.page-Category_Religion_and_Deities #mw-subcategories,
body.ns-14.page-Category_Magic_and_Cosmology #mw-subcategories,
body.ns-14.page-Category_Locations #mw-subcategories,
body.ns-14.page-Category_History_and_Timeline #mw-subcategories,
body.ns-14.page-Category_Family_Lines #mw-subcategories {
display: none !important;
}
/* ========================================================================
PHASE 3 - CONSOLIDATED RESPONSIVE RULES
Replaces repeated page-system media rules with MediaWiki 1.43-compatible
selector lists only; no template or markup changes.
======================================================================== */
@media (max-width: 1050px) {
.country-card-grid--four,
.country-card-grid--three,
.city-index__grid,
.city-location-grid,
.deity-card-grid--three,
.wiki-card-grid--three,
.wiki-index__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.country-page,
.deity-page,
body.ns-14 .mw-parser-output {
width: calc(100vw - var(--ew-sidebar) - 48px) !important;
}
}
@media (max-width: 760px) {
.country-overview,
.country-feature,
.country-feature--image-left,
.country-card-grid,
.country-card-grid--three,
.country-card-grid--four,
.country-quickfacts,
.history-overview,
.history-era-index__grid,
.city-overview,
.city-index__grid,
.city-district-grid,
.city-location-grid,
.deity-overview,
.deity-card-grid,
.deity-card-grid--three,
.deity-index__grid,
.wiki-index__grid,
.wiki-card-grid,
.wiki-card-grid--three,
.wiki-process {
grid-template-columns: 1fr;
}
.country-record__row,
.history-record__row,
.city-record__row,
.deity-record__row,
.wiki-record__rows > div {
grid-template-columns: 1fr;
gap: 0.15rem;
}
.city-record,
.deity-record {
width: min(100%, 580px);
order: -1;
}
.history-figure .mw-file-element,
.history-figure__image,
.deity-figure .mw-file-element,
.deity-figure__image {
height: 220px;
}
}
@media (max-width: 700px) {
.country-page,
.deity-page,
.wiki-page,
body.ns-14 .mw-parser-output {
width: calc(100vw - 48px) !important;
}
}