MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ========================================================================
ERINDAL WIKI - COMMON.CSS v6.4 CLEAN BASE
Target: MediaWiki 1.43.x, legacy Vector skin
Cleanup pass: duplicate responsive rules consolidated; no mobile redesign yet.
======================================================================== */
/* 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-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;
overflow-x: hidden;
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: 100% !important;
height: 126px !important;
box-sizing: border-box !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(100% - 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(100% - 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(100% - 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(100% - 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(100% - 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; }
/* ---------- 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;
}
/* Final MediaWiki parser cleanup */
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. */
/* ========================================================================
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;
}
/* ========================================================================
SERVER-RENDERED SHELL
#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: auto !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::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;
}
/* =========================================================
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;
}
/* =========================================================
FLOWING RECORD LAYOUT
Desktop record boxes behave like traditional wiki infoboxes: they float
beside the article instead of forcing everything below their full height.
========================================================= */
/* =========================================================
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;
}
/* ========================================================================
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,
var(--category-deep) 0%,
var(--category-deep) 58%,
var(--category-accent) 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 var(--category-line);
border-radius: 50%;
box-shadow:
0 0 0 34px rgba(255, 255, 255, 0.035),
0 0 0 72px rgba(255, 255, 255, 0.02);
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,
var(--category-paper-alt),
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;
}
.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 var(--category-line);
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 var(--category-line);
}
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;
}
/* ========================================================================
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;
}
/* ========================================================================
RESPONSIVE LAYOUT - CONSOLIDATED CURRENT BEHAVIOUR
This section replaces the scattered responsive blocks that previously
appeared throughout Common.css. It intentionally keeps the existing
breakpoint behaviour. Mobile redesign can now be done here in one place.
======================================================================== */
/* Wide screens */
@media (min-width: 1900px) {
.ew-category-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ew-strip {
grid-column: span 4;
}
}
@media (min-width: 1181px) and (max-width: 1550px) {
.ew-home-grid {
grid-template-columns: minmax(0, 1.56fr) minmax(360px, .98fr);
}
}
/* Desktop infobox/record flow */
@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;
}
}
/* Smaller desktop */
@media (max-width: 1180px) {
.ew-global-menu a {
padding: 0 10px;
font-size: 12px;
}
.ew-global-search {
width: 220px;
}
#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: 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));
}
}
/* Tablet */
@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;
}
.category-hub__card--centered {
grid-column: 1 / -1;
width: calc((100% - 0.8rem) / 2);
justify-self: center;
}
.category-hub__grid,
body.ns-14 .mw-category {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@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;
}
#ew-server-topbar .ew-global-section:nth-child(n+5) {
display: none !important;
}
#content {
padding: 26px 24px 36px !important;
}
body.page-Main_Page #content {
padding: 0 0 10px !important;
}
.country-page,
.deity-page,
body.ns-14 .mw-parser-output {
width: calc(100vw - var(--ew-sidebar) - 48px) !important;
}
}
/* Narrow content */
@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;
}
.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;
}
}
/* Existing mobile shell behaviour - intentionally not redesigned in this pass */
@media (max-width: 700px) {
:root {
--ew-sidebar: 0px;
}
html:not(.ew-sidebar-collapsed) {
--ew-sidebar: 218px;
}
#mw-panel {
display: block !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-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;
}
.country-page,
.deity-page,
.wiki-page,
body.ns-14 .mw-parser-output {
width: calc(100vw - 48px) !important;
}
}
/* Small category layouts */
@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;
}
.category-hub__card--centered {
width: 100%;
}
}
/* ========================================================================
END ERINDAL WIKI COMMON.CSS v6.4 CLEAN BASE
======================================================================== */