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.
/* ScotMesh: status strip and wide screenshots */
.sm-status { margin: 0.5em 0 1em; }
.mw-parser-output .wikitable { font-size: 0.95em; }

/* Front page */
.sm-welcome { font-size: 1.08em; max-width: 72ch; margin-bottom: 1em; }
.sm-cards { display: flex; flex-wrap: wrap; gap: 1em; margin: 1em 0 1.5em; }
.sm-card { flex: 1 1 240px; padding: 0.2em 1.1em 0.6em; border: 1px solid var(--border-color-base, rgba(128,128,128,0.35)); border-radius: 6px; background: var(--color-surface-2, rgba(128,128,128,0.06)); }
.sm-card h3 { margin-top: 0.8em; border: 0; }
.sm-card .mw-headline { font-size: 1.05em; }

/* Front-page banner */
.sm-hero { position: relative; overflow: hidden; margin: 0.4em 0 1.4em; padding: 2.2em 2.2em 2em; border-radius: 8px; border: 1px solid #22324D;
  background: #0A1424 url("/images/scotmesh-brand/header-mesh.svg") right -90px center / auto 100% no-repeat; color: #fff; }
.sm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0A1424 38%, rgba(10,20,36,.55) 62%, rgba(10,20,36,0) 85%); pointer-events: none; }
.sm-hero > * { position: relative; z-index: 1; }
.sm-hero-eyebrow { display: flex; align-items: center; gap: 0.55em; font-size: 0.8em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #C9D6E8; font-family: "IBM Plex Mono", monospace; }
.sm-hero-eyebrow .sm-saltire { display: inline-block; width: 1.7em; height: 1.7em; border-radius: 3px;
  background: url("/images/scotmesh-brand/mark.svg") center / 100% 100% no-repeat;
  box-shadow: none; }
.sm-hero-title { font-size: 2.3em; font-weight: 600; font-family: "IBM Plex Mono", monospace; letter-spacing: -0.02em; line-height: 1.12; margin: 0.35em 0 0.3em; max-width: 16em; text-wrap: balance; color: #fff; }
.sm-hero-sub { font-size: 1.12em; line-height: 1.5; max-width: 34em; color: #C9D6E8; }
.sm-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7em; margin-top: 1.4em; }
.sm-btn a { display: inline-block; padding: 0.62em 1.15em; border-radius: 4px; font-weight: 600; font-family: "IBM Plex Mono", monospace; font-size: 0.95em; text-decoration: none !important; }
.sm-btn-primary a { background: #B199F4; color: #0A1424 !important; }
.sm-btn-primary a:hover { background: #C4B3F7; }
.sm-btn-secondary a { color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(177,153,244,.75); }
.sm-btn-secondary a:hover { background: rgba(177,153,244,.14); }
.sm-btn a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sm-hero-facts { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin-top: 1.5em; font-size: 0.9em; color: #C9D6E8; }
.sm-hero-facts span::before { content: "✓ "; color: #B199F4; font-weight: 700; }
@media (max-width: 640px) {
  .sm-hero { padding: 1.5em 1.3em 1.4em; }
  .sm-hero { background-size: auto 60%; background-position: right bottom; } .sm-hero::after { background: rgba(10,20,36,.8); }
  .sm-hero-title { font-size: 1.75em; }
}

/* Site header on every page: the scotmesh/reticulum lockup and the wiki's name */
#siteNotice { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 0.6em !important; text-align: left !important; font-size: 1rem !important; }
.sm-header { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 32px 0.9rem; }
.sm-header a { text-decoration: none !important; }
.sm-flag { display: block; width: 208px; height: 58px; flex: none; background: url("/images/scotmesh-brand/lockup-stacked-on-dark.svg") left center / contain no-repeat; }
:root.skin-theme-clientpref-day .sm-flag { background-image: url("/images/scotmesh-brand/lockup-stacked-on-light.svg"); }
@media (prefers-color-scheme: light) { :root.skin-theme-clientpref-os .sm-flag { background-image: url("/images/scotmesh-brand/lockup-stacked-on-light.svg"); } }
.sm-header-text { border-left: 1px solid var(--border-color-base, #22324D); padding-left: 1rem; }
.sm-header-title { font-size: 1.75em; font-weight: 600; font-family: "IBM Plex Mono", monospace; letter-spacing: -0.02em; line-height: 1.15; }
.sm-header-title a { color: var(--color-emphasized, inherit) !important; }
.sm-header-sub { color: var(--color-subtle, #9ca3af); font-size: 0.98em; margin-top: 0.15em; }
@media (max-width: 640px) { .sm-header { padding: 0.8rem 16px; gap: 0.75rem; } .sm-flag { width: 150px; height: 42px; } .sm-header-text { padding-left: 0.75rem; } .sm-header-title { font-size: 1.35em; } .sm-header-sub { font-size: 0.88em; } }
/* Pointer to the MeshCore / Meshtastic wiki (Main Page, above the hero) */
.sm-otherwiki { margin: 0.2em 0 1em; padding: 0.6em 1em; border: 1px solid #22324D; border-radius: 6px; background: #0A1424; color: #fff; font-size: 0.95em; display: flex; align-items: center; gap: 0.5em 0.85em; flex-wrap: wrap; line-height: 1.45; overflow-wrap: anywhere; }
.sm-otherwiki b { color: #fff; }
.sm-otherwiki a, .sm-otherwiki a.external, .sm-otherwiki a:visited { color: #fff !important; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; background-image: none; padding-right: 0; }
.sm-otherwiki a:hover, .sm-otherwiki a:focus-visible { color: #65C281 !important; }
.sm-ow-logos { display: inline-flex; align-items: center; gap: 0.6em; flex: none; padding: 0.3em 0.65em; border-radius: 4px; background: #101C30; }
.sm-ow-logo { display: block; background: center / contain no-repeat; }
.sm-ow-mt { width: 26px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 100 55%22 xmlns=%22http://www.w3.org/2000/svg%22 style=%22fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;%22%3E%3Cg transform=%22matrix(0.802386,0,0,0.460028,-421.748,-122.127)%22%3E%3Cg transform=%22matrix(0.579082,0,0,1.01004,460.975,-39.6867)%22%3E%3Cpath d=%22M250.908,330.267L193.126,415.005L180.938,406.694L244.802,313.037C246.174,311.024 248.453,309.819 250.889,309.816C253.326,309.814 255.606,311.015 256.982,313.026L320.994,406.536L308.821,414.869L250.908,330.267Z%22 style=%22fill:white;%22/%3E%3C/g%3E%3Cg transform=%22matrix(0.582378,0,0,1.01579,485.019,-211.182)%22%3E%3Cpath d=%22M87.642,581.398L154.757,482.977L142.638,474.713L75.523,573.134L87.642,581.398Z%22 style=%22fill:white;%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.sm-ow-mc { width: 19px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-250 -205 500 410%22%3E%3Ccircle r=%2250%22 fill=%22white%22/%3E%3Cpath d=%22M63.6 -101.8A120 120 0 0 1 63.6 101.8M-63.6 -101.8A120 120 0 0 0 -63.6 101.8%22 fill=%22none%22 stroke=%22white%22 stroke-width=%2244%22/%3E%3Cpath d=%22M136.7 -174.9A222 222 0 0 1 136.7 174.9M-136.7 -174.9A222 222 0 0 0 -136.7 174.9%22 fill=%22none%22 stroke=%22white%22 stroke-width=%2252%22/%3E%3C/svg%3E"); }
.sm-ow-text { flex: 1 1 16em; min-width: 0; }
.sm-otherwiki + .sm-hero { margin-top: 0; }
@media (max-width: 640px) { .sm-otherwiki { font-size: 0.9em; padding: 0.5em 0.8em; } }