Jump to content

MediaWiki:Common.css

From Marspedia
Revision as of 13:17, 5 July 2026 by Jburk (talk | contribs) (Home hero: restyle .mainpage_topbox to match the dark Marspedia site-info footer (scoped, no change to other main-page boxes))
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
/* CSS placed here will be applied to all skins */


/* Begin James Gholston Test CSS */
/* @import "https://marspedia.org/MediaWiki:Exoproject.css&action=raw&ctype=text/css"; */
#wazootoo
  /* Testing $wgUseSiteCss */
  {
   color:      #FF007F;
   background: #00FFFF
   }
/* End James Gholston Test CSS */


@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif")

body {font-family: "Noto Sans", sans-serif}
/* changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text) */

div#content h1, div#content h2 {font-family: "Noto Serif", serif}
/* changes the default font used for MediaWiki headings to Noto Serif */

/* Shrink images when on mobile (needs improvement) */
img {
  max-width: 100%;
  height:auto;
}

/* Main Page CSS from Mediawiki.org */

.mainpage_heybox {
  border:3px solid #9B301C; 
  background:#F97242; 
  padding:0.225em;
  text-align:center;
}

.mainpage_heybox a {
  color:#FFF;
}

.mainpage_topbox {
	background: #f9f9f9;
	margin: 1em 0;
}

.mainpage_layouttable {
	border: 0;
	margin: 0;
	width: 100%;
	border-spacing: 10px;
}
.mainpage_layouttable * > tr > td {
	vertical-align: top;
}

.mainpage_boxtitle {
    font-size: 105%;
    padding: 0.4em;
    background-color: #eeeeee;
    font-weight: bold;
    min-height: 2em;
    vertical-align: middle;
}

.mainpage_hubbox mainpage_featuredcell {
    padding-left:5px;
  img {
    padding-left:0;
  }
}


.mainpage_pagetitle {
    color: #cf7606;
    font-size: 200%;
    padding: 0.2em 0.4em;
}

.mainpage_sitelinks {
    padding: 0.2em;
    text-align: center;
    background-color: white;
    font-weight: bold;
}

.mainpage_hubtitle {
    text-align: center;
}

.mainpage_boxcontents {
    background: #ffffff;
    padding: 0.2em 0.4em;
}

.mainpage_boxcontents_small {
    font-size: 95%;
}

.mainpage_boxcontents_title {
    display: block;
    border-bottom: 1px solid #AAA;
    margin-bottom: 0.5em;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}

.mainpage_middleblock .mainpage_hubbox {
    width: 50%;
}

.mainpage_hubbox, .mainpage_topbox {
    padding: 0;
    border: 1px solid #aaaaaa;
}

.mainpage_mwtitle {
    color: #9b301c;
}

.mainpage_languages {
	margin: 0.5em 10px;
}

.mainpage_row2,
.mainpage_row3 {
	/*display: -webkit-box;*/
	/*display: -moz-box;*/
	/*display: -ms-flexbox;*/
	/*display: -webkit-flex;*/
	display: flex;

	flex-flow: row wrap;
  
  	justify-content: space-between;
  	margin: 1em 0;
}
@media screen and (min-width: 45em) {
	.mainpage_row2 .mainpage_hubbox {
		box-sizing: border-box;
		float: left;
		width:50%;
	}
	.mainpage_row2 .mainpage_featuredcell {
		flex:1 0;
		margin-right:5px;
	}
	.mainpage_row2 .mainpage_helpcell {
		flex:1 0;
		margin-left:5px;
	}
}
@media screen and (max-width: 45em) {
	.mainpage_row2 .mainpage_hubbox {
		box-sizing: border-box;
		flex: 1 0 100%;
		width: 100%;
		margin: 0.5em 0;
	}
}
@media screen and (min-width: 45em) {
	.mainpage_row3 .mainpage_hubbox {
		box-sizing: border-box;
		float: left;
	}
	.mainpage_row3 .mainpage_newscell {
		flex: 2 0 20em;
		margin-right:5px;
	}
	.mainpage_row3 .mainpage_aboutcell {
		flex: 1 2 15em;
		margin-left:5px;
	}
}
@media screen and (max-width: 45em) {
	.mainpage_row3 .mainpage_hubbox {
		box-sizing: border-box;
		flex: 1 0 100%;
		width: 100%;
		margin: 0.5em 0;
	}
}
@media screen and (max-width: 55em) {
	.mainpage_row3 .mainpage_newscell {
		order: -1;
		flex: 1 0 100%;
		width: 100%;
		margin: 0 0 0.5em 0;
	}
}

/* ===== Home hero (.mainpage_topbox) — dark "Marspedia subfooter" look (2026-07-05) =====
   Scoped under .mainpage_topbox so the featured/help/about boxes (which reuse
   .mainpage_boxcontents / .mainpage_sitelinks) are unaffected. Palette matches the
   site-info footer: bg #2b1710, coral #e07b4a title/links, peach #e9b491/#d8b6a1 text. */
.mainpage_topbox {
  background: #2b1710 !important;
  border: none !important;
  border-radius: 8px;
  padding: 26px 34px 22px !important;
  margin: 1em 0;
}
.mainpage_topbox .mainpage_pagetitle { color: #e07b4a; }
.mainpage_topbox .mainpage_pagetitle .mainpage_mwtitle { color: #e07b4a !important; }
.mainpage_topbox .mainpage_boxcontents,
.mainpage_topbox .mainpage_sitelinks {
  background: transparent !important;
  color: #d8b6a1;
}
.mainpage_topbox .mainpage_boxcontents .mainpage_mwtitle { color: #e9b491 !important; }
.mainpage_topbox .mainpage_boxcontents a,
.mainpage_topbox .mainpage_boxcontents a:visited { color: #e9b491 !important; }
.mainpage_topbox .mainpage_sitelinks { font-weight: bold; }
.mainpage_topbox .mainpage_sitelinks a,
.mainpage_topbox .mainpage_sitelinks a:visited { color: #e07b4a !important; }
.mainpage_topbox a:hover { color: #ffffff !important; }

/* =============================================================================
   MARSPEDIA SITE-INFO FOOTER  (v5 "concept", 2026-07-05)
   Dark chocolate brand-led footer (replaces the rust card). Sits above the Moon
   Society network band. Replaces the footer region of MediaWiki:Common.css (from
   the old pillbox comment to end); network-footer.css is appended after this.
   Layout (top -> bottom): [ #mp-custom-footer dark brand+columns, capped 1400 ]
                           [ .ms-network-footer band, full window width ]
   ============================================================================= */

/* Hide the native MW footer (and the old server-injected pillbox that lived in it) */
#footer { display: none !important; }

/* Guard for the full-bleed wrapper below (clip, not hidden, keeps Vector sticky header) */
body { overflow-x: clip; }

/* Close the white gap between the site-info footer and the Moon Society network band.
   Vector gives .mw-footer-container padding-bottom:82px; the site-info footer sits inside
   it and the network band is a <body> child below it, so that padding shows the white page
   background. Zero the bottom padding so the two dark sections meet flush. */
.mw-footer-container { padding-bottom: 0 !important; }
.mw-page-container { padding-bottom: 0 !important; }

/* Full-bleed wrapper — dark chocolate band spanning the window width */
#mp-custom-footer {
  box-sizing: border-box;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #2b1710;
  color: #e9b491;
  font-family: sans-serif;
}
#mp-custom-footer a { text-decoration: none; }

/* Centered content grid: wide brand column + three link columns */
/* max-width + horizontal padding mirror Vector's .mw-page-container so the footer
   content lines up left/right with the article content above (see the responsive
   padding block near the end). */
#mp-custom-footer .mp-si-inner {
  max-width: 99.75rem;
  margin: 0 auto;
  padding: 48px 1.5rem 34px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

/* ---- Brand column ---- */
#mp-custom-footer .mp-si-wordmark {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #e07b4a;
  margin: 0 0 14px 0;
  padding: 0;
  border: none;
}
#mp-custom-footer .mp-si-tagline {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #d8b6a1;
  margin: 0 0 20px 0;
  max-width: 34ch;
}
#mp-custom-footer .mp-si-cta {
  display: inline-block;
  color: #e07b4a !important;
  font-weight: 600;
  font-size: 0.875rem;
  transition: color 0.15s;
}
#mp-custom-footer .mp-si-cta:hover { color: #ee8d5b !important; }

/* ---- Site search ---- */
#mp-custom-footer .mp-footer-search {
  display: flex;
  gap: 8px;
  margin: 0 0 16px 0;
  max-width: 340px;
}
#mp-custom-footer .mp-footer-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(233, 180, 145, 0.28);
  border-radius: 6px;
  padding: 8px 11px;
  color: #ffffff;
  font-size: 0.8125rem;
}
#mp-custom-footer .mp-footer-search-input::placeholder { color: rgba(233, 180, 145, 0.6); }
#mp-custom-footer .mp-footer-search-input:focus {
  outline: none;
  border-color: #e07b4a;
  background: rgba(255, 255, 255, 0.10);
}
#mp-custom-footer .mp-footer-search-btn {
  flex: none;
  background: #e07b4a;
  color: #2b1710 !important;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
#mp-custom-footer .mp-footer-search-btn:hover { background: #ee8d5b; }

/* ---- Link columns ---- */
#mp-custom-footer .mp-si-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e07b4a;
  margin: 4px 0 16px 0;
}
#mp-custom-footer .mp-si-links { list-style: none; margin: 0; padding: 0; }
#mp-custom-footer .mp-si-links li { margin-bottom: 12px; }
#mp-custom-footer .mp-si-links li:last-child { margin-bottom: 0; }
#mp-custom-footer .mp-si-links a {
  color: #e9b491;
  font-size: 0.9375rem;
  transition: color 0.15s;
}
#mp-custom-footer .mp-si-links a:hover { color: #ffffff; }

/* ---- Bottom strip ---- */
#mp-custom-footer .mp-si-bottom {
  max-width: 99.75rem;
  margin: 0 auto;
  padding: 16px 1.5rem;
  border-top: 1px solid rgba(233, 180, 145, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
}
#mp-custom-footer .mp-si-bottom-timestamp { font-size: 0.75rem; color: rgba(233, 180, 145, 0.5); margin: 0; }
#mp-custom-footer .mp-si-bottom-links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
#mp-custom-footer .mp-si-bottom-links a { font-size: 0.75rem; color: rgba(233, 180, 145, 0.5); transition: color 0.15s; }
#mp-custom-footer .mp-si-bottom-links a:hover { color: #e9b491; }

/* ---- Horizontal padding mirrors Vector's .mw-page-container at each breakpoint,
       so the footer content stays aligned with the article content ---- */
@media ( min-width: 1120px ) {
  #mp-custom-footer .mp-si-inner,
  #mp-custom-footer .mp-si-bottom { padding-left: 2.75rem; padding-right: 2.75rem; }
}
@media ( min-width: 1680px ) {
  #mp-custom-footer .mp-si-inner,
  #mp-custom-footer .mp-si-bottom { padding-left: 3.25rem; padding-right: 3.25rem; }
}

/* ---- Responsive ---- */
@media ( max-width: 900px ) {
  #mp-custom-footer .mp-si-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  #mp-custom-footer .mp-si-brand { grid-column: 1 / -1; }
}
@media ( max-width: 560px ) {
  #mp-custom-footer .mp-si-inner { grid-template-columns: 1fr; padding: 32px 24px 24px; }
  #mp-custom-footer .mp-si-bottom { flex-direction: column; align-items: flex-start; padding: 16px 24px; }
}


/* ===================== BEGIN network-footer.css (Moon Society canonical, verbatim) ===================== */
/* =============================================================================
   Moon Society network footer  —  .ms-network-footer
   Shared, self-contained footer for moonsociety.org / Lunarpedia / Spacepedia,
   and nested as a sub-element inside Marspedia's Mars footer.

   Portable + namespaced: every rule is scoped under .ms-network-footer, so it is
   safe to drop into any MediaWiki:Common.css or any site stylesheet.
   Commits to a dark celestial band on purpose, so it renders identically across
   every property regardless of that page's own light/dark theme.
   ============================================================================= */
.ms-network-footer {
  --msf-ground-1: #0b1020;
  --msf-ground-2: #070a14;
  --msf-fg: #eef1fa;
  --msf-muted: #98a2bd;
  --msf-faint: #6b7594;
  --msf-line: rgba(255,255,255,.09);
  --msf-line-strong: rgba(255,255,255,.16);
  --msf-gold: #f0b542;
  --msf-gold-hi: #f8ca69;
  --msf-gold-ink: #201603;
  --msf-blue: #7db4e6;
  --msf-maxw: 1160px;

  all: revert;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--msf-fg);
  background:
    radial-gradient(1100px 300px at 50% -20%, rgba(125,180,230,.13), transparent 60%),
    linear-gradient(180deg, var(--msf-ground-1), var(--msf-ground-2));
  -webkit-font-smoothing: antialiased;

  /* an inline script moves this to the end of <body>, so its dark band spans the
     full window width. The native MediaWiki footer is hidden by that script. */
  display: block;
  width: 100%;
  margin: 0;
}

/* Page-info strip: the relocated last-edited line + Privacy/About/Disclaimers,
   above the network band inside the same dark footer. Empty (hidden) until the
   script fills it, so no-JS users just keep the native footer. */
.ms-network-footer__pageinfo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--msf-line);
  font-size: 12.5px; color: var(--msf-faint);
}
.ms-network-footer__pageinfo:empty { display: none; }
.ms-network-footer__pageinfo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ms-network-footer__pageinfo li { margin: 0; }
.ms-network-footer__pageinfo a { color: var(--msf-muted); text-decoration: none; }
.ms-network-footer__pageinfo a:hover { color: var(--msf-fg); }
.ms-network-footer *, .ms-network-footer *::before, .ms-network-footer *::after { box-sizing: border-box; }
/* full-bleed inner; the script sets padding-left/right to line up with the article column */
.ms-network-footer__inner { max-width: none; margin: 0; padding: 20px 26px 18px; }

/* ---- property bar: three worlds fused into one slim bar ---- */
.ms-network-footer__bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--msf-line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
}
.msf-seg {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; min-width: 0;
  text-decoration: none; color: #fff; isolation: isolate;
  transition: filter .16s ease;
}
.msf-seg + .msf-seg { box-shadow: inset 1px 0 0 rgba(0,0,0,.4), inset 2px 0 0 rgba(255,255,255,.05); }
.msf-seg::before { content: ""; position: absolute; inset: 0; z-index: -2; }        /* texture */
.msf-seg::after  { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34)); }
/* hover/focus: a gold border around the whole third + gold text, no underline */
.msf-seg:hover, .msf-seg:focus-visible {
  outline: none;
  text-decoration: none;
  filter: brightness(1.05);
  box-shadow: inset 0 0 0 2px var(--msf-gold);
}
.msf-seg:hover .msf-seg__name, .msf-seg:focus-visible .msf-seg__name,
.msf-seg:hover .msf-seg__tag, .msf-seg:focus-visible .msf-seg__tag,
.msf-seg:hover .msf-seg__arrow, .msf-seg:focus-visible .msf-seg__arrow { color: var(--msf-gold-hi); }

.msf-seg__icon { width: 22px; height: 22px; flex: none; }
/* colour set directly on the spans so they never inherit the host wiki's link blue */
.msf-seg__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: #fff; }
.msf-seg__name b { font-weight: 400; opacity: .6; }
.msf-seg__tag {
  font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msf-seg__tag::before { content: "\00b7 "; opacity: .6; }
.msf-seg__arrow { margin-left: auto; font-size: 14px; opacity: .45; flex: none; color: #fff;
  transition: transform .16s ease, opacity .16s ease; }
.msf-seg:hover .msf-seg__arrow, .msf-seg:focus-visible .msf-seg__arrow { opacity: .95; transform: translateX(3px); }
.msf-seg__here {
  display: none; margin-left: auto; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff;
  transition: background .16s ease, color .16s ease;
}

/* Lunarpedia — lunar regolith, cool silver-grey */
.msf-seg--luna::before {
  background:
    radial-gradient(circle at 82% 34%, rgba(255,255,255,.16) 0 4px, transparent 5px),
    radial-gradient(circle at 24% 66%, rgba(0,0,0,.26) 0 6px, transparent 7px),
    radial-gradient(circle at 55% 78%, rgba(255,255,255,.08) 0 3px, transparent 4px),
    linear-gradient(158deg, #4a5162 0%, #2b303d 100%);
}
.msf-seg--luna .msf-seg__icon { color: #dbe2f0; }
/* Spacepedia — cosmic indigo starfield */
.msf-seg--space::before {
  background:
    radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 64% 22%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 62%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 44% 74%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(130% 130% at 88% 0%, rgba(150,120,255,.34), transparent 55%),
    linear-gradient(160deg, #251a57 0%, #0c0926 100%);
}
.msf-seg--space .msf-seg__icon { color: #b8abff; }
/* Marspedia — rust dust */
.msf-seg--mars::before {
  background:
    radial-gradient(circle at 72% 30%, rgba(255,190,140,.22) 0 2px, transparent 4px),
    repeating-linear-gradient(122deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px),
    linear-gradient(158deg, #9a3a1b 0%, #571d0e 100%);
}
.msf-seg--mars .msf-seg__icon { color: #ffb583; }

/* current property: marked "you are here" — hoverable (to brighten the badge) but
   not a gold navigation target. */
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars { cursor: default; }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna .msf-seg__arrow,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space .msf-seg__arrow,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars .msf-seg__arrow { display: none; }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna .msf-seg__here,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space .msf-seg__here,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars .msf-seg__here { display: inline-block; }
/* hovering the current tile: no gold border/text — brighten the "You are here" badge */
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover,
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:focus-visible,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:focus-visible,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:focus-visible { box-shadow: none; filter: brightness(1.03); }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__name,
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__tag,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__name,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__tag,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__name,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__tag { color: #fff; }
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:hover .msf-seg__here,
.ms-network-footer[data-network-current="lunarpedia"] .msf-seg--luna:focus-visible .msf-seg__here,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:hover .msf-seg__here,
.ms-network-footer[data-network-current="spacepedia"] .msf-seg--space:focus-visible .msf-seg__here,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:hover .msf-seg__here,
.ms-network-footer[data-network-current="marspedia"] .msf-seg--mars:focus-visible .msf-seg__here { background: var(--msf-gold); color: var(--msf-gold-ink); }

/* ---- Moon Society row: mission + CTAs on one compact line ---- */
.ms-network-footer__society {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.msf-org { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 340px; }
.msf-org__moon { width: 30px; height: 30px; flex: none; color: #eaeefb; }
.msf-org__name { font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1px; }
.msf-org__mission {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif;
  font-size: 13.5px; line-height: 1.4; margin: 0; color: var(--msf-muted); max-width: 52ch;
}
.msf-org__mission em { color: var(--msf-fg); font-style: italic; }

.msf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 9px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.msf-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--msf-ground-2), 0 0 0 4px var(--msf-blue); }
.msf-btn--primary { background: var(--msf-gold); color: var(--msf-gold-ink); }
.msf-btn--primary:hover { background: var(--msf-gold-hi); transform: translateY(-1px); }
.msf-btn--outline { border: 1px solid var(--msf-line-strong); color: var(--msf-fg); }
.msf-btn--outline:hover { border-color: var(--msf-gold); color: var(--msf-gold-hi); transform: translateY(-1px); }
.msf-btn--ghost { color: var(--msf-fg); padding-left: 4px; padding-right: 4px; }
.msf-btn--ghost:hover { color: var(--msf-blue); }

/* ---- legal / social row ---- */
.ms-network-footer__meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--msf-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  font-size: 12px; color: var(--msf-faint);
}
.ms-network-footer__meta a { color: var(--msf-muted); text-decoration: none; }
.ms-network-footer__meta a:hover { color: var(--msf-fg); }
.msf-meta__spring { flex: 1 1 auto; }
.msf-social { display: flex; gap: 5px; }
.msf-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; color: var(--msf-muted);
  border: 1px solid var(--msf-line);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.msf-social a:hover { color: #fff; border-color: var(--msf-line-strong); background: rgba(255,255,255,.05); }
.msf-social svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .ms-network-footer__bar { grid-template-columns: 1fr; }
  .msf-seg + .msf-seg { box-shadow: inset 0 1px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.05); }
  .msf-org { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ms-network-footer * { transition: none !important; } }
/* ====================== END network-footer.css (Moon Society canonical, verbatim) ====================== */
/* =============================================================================
   MARSPEDIA-ONLY tweak to the Moon Society network footer (appended AFTER
   network-footer.css). We embed via Common.js (no extension), so the extension's
   column-align JS does not run. Mirror Vector's .mw-page-container geometry
   (max-width + responsive horizontal padding) so the band's content lines up
   left/right with the article content and the site-info footer above. The dark
   band itself stays full window width.
   ============================================================================= */
.ms-network-footer .ms-network-footer__inner {
  max-width: 99.75rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media ( min-width: 1120px ) {
  .ms-network-footer .ms-network-footer__inner { padding-left: 2.75rem; padding-right: 2.75rem; }
}
@media ( min-width: 1680px ) {
  .ms-network-footer .ms-network-footer__inner { padding-left: 3.25rem; padding-right: 3.25rem; }
}
Retrieved from "https://marspedia.org/index.php?title=MediaWiki:Common.css&oldid=143031"