MediaWiki:Common.css: Difference between revisions

Revision as of 14:31, 26 July 2026

/* HarvestWiki visual system — jade, parchment, and gold */
:root {
  --hw-jade: #2f6f55;
  --hw-jade-deep: #1e4c3b;
  --hw-jade-soft: #e7f1eb;
  --hw-gold: #c7983d;
  --hw-gold-soft: #f7edcf;
  --hw-ink: #20312a;
  --hw-muted: #64756d;
  --hw-paper: #fbfcf9;
  --hw-line: #d8e2dc;
  --hw-shadow: 0 12px 32px rgba(31, 69, 52, .10);
}

body {
  background-color: var(--color-surface-0, #f3f7f4);
  background-image:
    radial-gradient(circle at 8% 5%, rgba(199,152,61,.10), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(47,111,85,.09), transparent 30rem);
  background-attachment: fixed;
}

.mw-parser-output {
  max-width: 1180px;
  line-height: 1.7;
  color: var(--color-base, var(--hw-ink));
}

.mw-first-heading, .firstHeading {
  letter-spacing: -.025em;
  font-weight: 800;
}

.mw-parser-output h2 {
  margin-top: 2.35rem;
  padding-bottom: .42rem;
  border-bottom: 2px solid color-mix(in srgb, var(--hw-gold) 58%, transparent);
  color: var(--color-base, var(--hw-ink));
  letter-spacing: -.015em;
}

.mw-parser-output h3 { color: var(--hw-jade-deep); }
.mw-parser-output a { text-underline-offset: .16em; }
.mw-parser-output a:not(.new) { color: var(--hw-jade); }
.mw-parser-output a:hover { color: var(--hw-jade-deep); }
.mw-parser-output .new { color: #a44b48; }

.mw-parser-output table.wikitable,
.mw-parser-output .hw-table {
  width: 100%;
  margin: 1.1rem 0 1.6rem;
  border: 1px solid var(--hw-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface-1, #fff);
  box-shadow: 0 5px 18px rgba(31,69,52,.07);
}

.mw-parser-output table.wikitable th,
.mw-parser-output .hw-table th {
  padding: .82rem .9rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: var(--hw-jade-deep);
  color: #fff;
  font-size: .78rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.mw-parser-output table.wikitable td,
.mw-parser-output .hw-table td {
  padding: .82rem .9rem;
  border: 0;
  border-bottom: 1px solid var(--hw-line);
  vertical-align: middle;
}

.mw-parser-output table.wikitable tr:last-child td,
.mw-parser-output .hw-table tr:last-child td { border-bottom: 0; }
.mw-parser-output table.wikitable tr:nth-child(even) td,
.mw-parser-output .hw-table tr:nth-child(even) td { background: rgba(47,111,85,.035); }
.mw-parser-output table.wikitable tr:hover td,
.mw-parser-output .hw-table tr:hover td { background: rgba(199,152,61,.10); }

.hw-hero {
  position: relative;
  overflow: hidden;
  margin: .4rem 0 1.8rem;
  padding: clamp(1.7rem, 5vw, 3.8rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, rgba(247,237,207,.17), transparent 18rem),
    linear-gradient(135deg, #173d31 0%, #2f6f55 58%, #5f7d4c 100%);
  color: #f8fbf8;
  box-shadow: var(--hw-shadow);
}

.hw-hero::after {
  content: '道';
  position: absolute;
  right: clamp(1rem, 6vw, 4rem);
  bottom: -2.4rem;
  color: rgba(255,255,255,.065);
  font: 800 clamp(8rem, 24vw, 18rem)/1 serif;
  pointer-events: none;
}

.hw-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: .2rem 0 .75rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
}

.hw-hero p {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 0 1.25rem;
  color: rgba(255,255,255,.86);
  font-size: 1.06rem;
}

.hw-kicker {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: .6rem;
  color: #f0d99a;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.hw-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .65rem; }
.hw-button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .68rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--hw-gold-soft);
  color: #543d12 !important;
  font-weight: 750;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.hw-button:hover { transform: translateY(-1px); background: #fff4d4; }
.hw-button--ghost { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff !important; box-shadow: none; }

.hw-section-intro { max-width: 760px; margin: -.5rem 0 1.2rem; color: var(--hw-muted); }
.hw-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.hw-card {
  min-width: 0;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--hw-line);
  border-radius: 16px;
  background: var(--color-surface-1, rgba(255,255,255,.9));
  box-shadow: 0 5px 18px rgba(31,69,52,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hw-card:hover { transform: translateY(-2px); border-color: rgba(47,111,85,.38); box-shadow: var(--hw-shadow); }
.hw-card h3 { margin: .15rem 0 .35rem; font-size: 1.16rem; }
.hw-card p { margin: .25rem 0 0; color: var(--hw-muted); }
.hw-card-icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--hw-jade-soft); font-size: 1.25rem; }
.hw-card--muted { opacity: .78; background: color-mix(in srgb, var(--color-surface-1, #fff) 88%, var(--hw-jade-soft)); }

.hw-feature-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(250px,.8fr); gap: 1rem; align-items: start; }
.hw-panel {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--hw-line);
  border-radius: 16px;
  background: var(--color-surface-1, #fff);
}
.hw-panel--gold { border-color: #e6d29b; background: linear-gradient(135deg, rgba(247,237,207,.7), rgba(255,255,255,.78)); }
.hw-link-list { margin: .25rem 0 0 !important; padding: 0 !important; list-style: none !important; }
.hw-link-list li { padding: .48rem 0; border-bottom: 1px solid var(--hw-line); }
.hw-link-list li:last-child { border-bottom: 0; }
.hw-status { display: inline-block; margin-left: .35rem; padding: .12rem .48rem; border-radius: 999px; background: var(--hw-gold-soft); color: #6a4d16; font-size: .72rem; font-weight: 750; vertical-align: middle; }

.hw-lead { max-width: 760px; color: var(--hw-muted); font-size: 1.05rem; }
.hw-note {
  margin: 1rem 0 1.5rem;
  padding: .9rem 1rem;
  border-left: 4px solid var(--hw-gold);
  border-radius: 0 12px 12px 0;
  background: rgba(199,152,61,.11);
}
.hw-clear, .hw-section-clear { clear: both; }

.hw-infobox {
  float: right;
  clear: right;
  width: 320px;
  max-width: 40%;
  margin: 0 0 1.25rem 1.5rem;
  padding: .85rem;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--hw-line);
  border-radius: 16px;
  background: var(--color-surface-1, #fff);
  box-shadow: var(--hw-shadow);
}
.hw-infobox-title {
  margin: -.85rem -.85rem .85rem;
  padding: .8rem .9rem;
  background: linear-gradient(135deg, var(--hw-jade-deep), var(--hw-jade));
  color: #fff;
  text-align: center;
  font-size: 1.22rem;
  font-weight: 800;
}
.hw-infobox-heading { margin: .8rem 0 .35rem; padding: .45rem .55rem; border-radius: 8px; background: var(--hw-jade-soft); color: var(--hw-jade-deep); text-align: center; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.hw-infobox-image { margin-bottom: .75rem; text-align: center; }
.hw-infobox-image .mw-file-element, .hw-infobox-image img { display: block; max-width: 100%; height: auto; margin: auto; border-radius: 10px; }
.hw-infobox-row { display: grid; grid-template-columns: 42% 58%; gap: .65rem; align-items: start; padding: .48rem 0; border-bottom: 1px solid var(--hw-line); }
.hw-infobox-row:last-child { border-bottom: 0; }
.hw-infobox-label { color: var(--hw-muted); font-size: .82rem; font-weight: 750; }
.hw-infobox-value { overflow-wrap: anywhere; }
.hw-infobox-blurb { margin: 0 0 .75rem !important; padding: 0 0 .75rem !important; border: 0 !important; border-bottom: 1px solid var(--hw-line) !important; background: transparent !important; box-shadow: none !important; color: inherit; text-align: center; }

.mw-category-generated, .catlinks { margin-top: 2rem; border-radius: 12px; }

@media screen and (max-width: 800px) {
  .hw-hero { border-radius: 16px; }
  .hw-card-grid, .hw-feature-grid { grid-template-columns: 1fr; }
  .hw-infobox { float: none; width: auto; max-width: none; margin: 0 0 1rem; }
  .mw-parser-output table.wikitable, .mw-parser-output .hw-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-color-scheme: dark) {
  :root { --hw-jade-soft: #203d31; --hw-gold-soft: #4b3d20; --hw-ink: #edf3ef; --hw-muted: #a8b8b0; --hw-paper: #17231e; --hw-line: #35483f; }
  body { background-image: radial-gradient(circle at 8% 5%, rgba(199,152,61,.07), transparent 26rem), radial-gradient(circle at 92% 18%, rgba(47,111,85,.10), transparent 30rem); }
  .hw-button { color: #fff3d0 !important; }
  .hw-panel--gold { background: linear-gradient(135deg, rgba(75,61,32,.5), rgba(31,45,38,.8)); }
}