/* =========================================================
ERINDAL NATIONAL HISTORY PAGES — TemplateStyles
MediaWiki 1.43 / TemplateStyles-safe
Loaded by Template:NationalHistory styles.
Page-specific palettes remain on each .history-page wrapper.
Shared Erindal foundations (page width, hero scale, base record
geometry, shared responsive rules) remain in Common.css.
========================================================= */
.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-color: var(--history-deep, var(--ew-dark-2));
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(80, 48, 35, 0.58));
}
.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-color: var(--history-paper-alt, var(--ew-paper));
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent);
}
.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-color: var(--history-paper, var(--ew-paper-light));
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(230, 220, 203, 0.18));
}
.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-color: var(--history-paper, var(--ew-paper-light));
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(230, 220, 203, 0.18));
}
@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;
}
}