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: var(--border-radius-large, 10px); 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: 16px;
  background: linear-gradient(135deg, #0b2447 0%, #0a3a7a 55%, #005EB8 100%); color: #fff; }
.sm-hero::after { content: ""; position: absolute; inset: 0 0 0 38%; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 520 300%22%3E%3Cline x1=%22375%22 y1=%2291%22 x2=%22448%22 y2=%2298%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22284%22 y1=%2228%22 x2=%22237%22 y2=%2294%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2272%22 y1=%2273%22 x2=%2240%22 y2=%2268%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22329%22 y1=%22114%22 x2=%22375%22 y2=%2291%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2239%22 y1=%22152%22 x2=%2229%22 y2=%22131%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22350%22 y1=%22130%22 x2=%22392%22 y2=%22170%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2245%22 y1=%2235%22 x2=%2272%22 y2=%2273%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22407%22 y1=%22206%22 x2=%22358%22 y2=%22176%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22100%22 y1=%22173%22 x2=%22167%22 y2=%22174%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22100%22 y1=%22173%22 x2=%22132%22 y2=%22171%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2239%22 y1=%22152%22 x2=%2230%22 y2=%22197%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22100%22 y1=%22173%22 x2=%2230%22 y2=%22197%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2229%22 y1=%22131%22 x2=%2286%22 y2=%22147%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22299%22 y1=%22121%22 x2=%22237%22 y2=%2294%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22498%22 y1=%2223%22 x2=%22500%22 y2=%2243%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22172%22 y1=%2252%22 x2=%22237%22 y2=%2294%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22335%22 y1=%2230%22 x2=%22329%22 y2=%22114%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22324%22 y1=%22275%22 x2=%22430%22 y2=%22275%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22299%22 y1=%22121%22 x2=%22300%22 y2=%22138%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22278%22 y1=%22112%22 x2=%22237%22 y2=%2294%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22498%22 y1=%2223%22 x2=%22448%22 y2=%2298%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22335%22 y1=%2230%22 x2=%22375%22 y2=%2291%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22164%22 y1=%22239%22 x2=%22219%22 y2=%22222%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22222%22 y1=%22242%22 x2=%22273%22 y2=%22255%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22278%22 y1=%22112%22 x2=%22300%22 y2=%22138%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22329%22 y1=%22114%22 x2=%22300%22 y2=%22138%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22222%22 y1=%22242%22 x2=%22219%22 y2=%22222%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22350%22 y1=%22130%22 x2=%22358%22 y2=%22176%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22392%22 y1=%22170%22 x2=%22358%22 y2=%22176%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2229%22 y1=%22131%22 x2=%2240%22 y2=%2268%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22407%22 y1=%22206%22 x2=%22430%22 y2=%22275%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2245%22 y1=%2235%22 x2=%2282%22 y2=%2243%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22172%22 y1=%2252%22 x2=%2272%22 y2=%2273%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22439%22 y1=%2291%22 x2=%22448%22 y2=%2298%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22498%22 y1=%2223%22 x2=%22439%22 y2=%2291%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2239%22 y1=%22152%22 x2=%2286%22 y2=%22147%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22100%22 y1=%22173%22 x2=%2286%22 y2=%22147%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22324%22 y1=%22275%22 x2=%22273%22 y2=%22255%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22278%22 y1=%22112%22 x2=%22284%22 y2=%2228%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22164%22 y1=%22239%22 x2=%22167%22 y2=%22174%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22222%22 y1=%22242%22 x2=%22164%22 y2=%22239%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22439%22 y1=%2291%22 x2=%22500%22 y2=%2243%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2272%22 y1=%2273%22 x2=%2282%22 y2=%2243%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22500%22 y1=%2243%22 x2=%22448%22 y2=%2298%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22350%22 y1=%22130%22 x2=%22375%22 y2=%2291%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2282%22 y1=%2243%22 x2=%2240%22 y2=%2268%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2239%22 y1=%22152%22 x2=%22100%22 y2=%22173%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22392%22 y1=%22170%22 x2=%22430%22 y2=%22275%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22132%22 y1=%22171%22 x2=%2286%22 y2=%22147%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22407%22 y1=%22206%22 x2=%22392%22 y2=%22170%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22273%22 y1=%22255%22 x2=%22219%22 y2=%22222%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2229%22 y1=%22131%22 x2=%2230%22 y2=%22197%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%2245%22 y1=%2235%22 x2=%2240%22 y2=%2268%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22299%22 y1=%22121%22 x2=%22329%22 y2=%22114%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22172%22 y1=%2252%22 x2=%2282%22 y2=%2243%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22278%22 y1=%22112%22 x2=%22299%22 y2=%22121%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22167%22 y1=%22174%22 x2=%22132%22 y2=%22171%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22335%22 y1=%2230%22 x2=%22284%22 y2=%2228%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22439%22 y1=%2291%22 x2=%22375%22 y2=%2291%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22324%22 y1=%22275%22 x2=%22358%22 y2=%22176%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Cline x1=%22329%22 y1=%22114%22 x2=%22350%22 y2=%22130%22 stroke=%22#fff%22 stroke-opacity=%22.16%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%22172%22 cy=%2252%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22335%22 cy=%2230%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22278%22 cy=%22112%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%2239%22 cy=%22152%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2229%22 cy=%22131%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%2245%22 cy=%2235%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22222%22 cy=%22242%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%2272%22 cy=%2273%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22324%22 cy=%22275%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22299%22 cy=%22121%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22498%22 cy=%2223%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22439%22 cy=%2291%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%2282%22 cy=%2243%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22164%22 cy=%22239%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22100%22 cy=%22173%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22329%22 cy=%22114%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22284%22 cy=%2228%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%2240%22 cy=%2268%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22350%22 cy=%22130%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22167%22 cy=%22174%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22237%22 cy=%2294%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22407%22 cy=%22206%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22132%22 cy=%22171%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22273%22 cy=%22255%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22375%22 cy=%2291%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22500%22 cy=%2243%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22219%22 cy=%22222%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%2286%22 cy=%22147%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%2230%22 cy=%22197%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22392%22 cy=%22170%22 r=%223.6%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22448%22 cy=%2298%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.5%22/%3E%3Ccircle cx=%22358%22 cy=%22176%22 r=%222.2%22 fill=%22#fff%22 fill-opacity=%220.35%22/%3E%3Ccircle cx=%22300%22 cy=%22138%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3Ccircle cx=%22430%22 cy=%22275%22 r=%222.8%22 fill=%22#fff%22 fill-opacity=%220.7%22/%3E%3C/svg%3E") right center / cover no-repeat; 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: #cfe3ff; }
.sm-hero-eyebrow .sm-saltire { display: inline-block; width: 1.9em; height: 1.15em; border-radius: 3px;
  background: #005EB8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Cpath d='M0 0L60 36M60 0L0 36' stroke='%23fff' stroke-width='7'/%3E%3C/svg%3E") center / 100% 100%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.sm-hero-title { font-size: 2.3em; font-weight: 750; 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: #e3ecfa; }
.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: 999px; font-weight: 650; text-decoration: none !important; }
.sm-btn-primary a { background: #fff; color: #0a3a7a !important; }
.sm-btn-primary a:hover { background: #e6f0ff; }
.sm-btn-secondary a { color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.sm-btn-secondary a:hover { background: rgba(255,255,255,.12); }
.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: #cfe3ff; }
.sm-hero-facts span::before { content: "✓ "; color: #8fd19e; font-weight: 700; }
@media (max-width: 640px) {
  .sm-hero { padding: 1.5em 1.3em 1.4em; }
  .sm-hero::after { inset: 45% 0 0 0; opacity: .6; }
  .sm-hero-title { font-size: 1.75em; }
}