Jump to content

Template:NationalHistory/styles.css

From Erindal Wiki
Revision as of 13:17, 18 September 2026 by Miyokari (talk | contribs)
/* =========================================================
   NATIONAL HISTORY ARTICLE TEXT
   History pages now sit on the dark Erindal article background.
   Paper components retain the page-local dark ink palette.
   ========================================================= */

.history-overview__lead,
.history-page__body {
  color: #e9dfd0;
}

.history-overview__lead p,
.history-page__body p,
.history-page__body li {
  color: inherit;
}

.history-page__body {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 2.25rem;
  border-left: 2px solid rgba(209, 160, 111, 0.34);
}

.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 rgba(209, 160, 111, 0.28);
  color: #f4eadb;
  font-family: "Alegreya SC", Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 700;
}

.history-page__body h2::before {
  position: absolute;
  top: 0.35em;
  left: calc(-2.25rem - 7px);
  width: 12px;
  height: 12px;
  border: 2px solid #f4eadb;
  border-radius: 50%;
  background: var(--history-accent, var(--ew-gold));
  box-shadow: 0 0 0 2px rgba(209, 160, 111, 0.32);
  content: "";
}

.history-page__body h3 {
  margin-top: 1.75rem;
  color: var(--history-accent-light, #d1a06f);
  font-family: "Alegreya SC", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.history-page__body a {
  color: #d9aa72;
}

.history-page__body a:hover {
  color: #f0c58d;
}

/* Light components inside the dark article body must keep dark text. */
.history-page__body .toc,
.history-page__body #toc,
.history-page__body .history-note,
.history-page__body table.wikitable,
.history-page__body .history-figure {
  color: var(--history-ink, #2d2824);
}

.history-page__body .toc,
.history-page__body #toc {
  margin: 0 0 1.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--history-line, var(--ew-border));
  border-radius: 9px;
  background: var(--history-paper, var(--ew-paper-light));
}

@media (max-width: 760px) {
  .history-page__body {
    padding-left: 1.25rem;
  }

  .history-page__body h2::before {
    left: calc(-1.25rem - 7px);
  }
}