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.
/* ==========================================================================
   AKKA Game Studios — wiki theme
   Cosmic Editorial palette + Fraunces/Inter typography matching akkadev.games.
   Skin: Vector 2022. Edit in MediaWiki:Common.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');

:root {
  --akka-bg:           #060810;
  --akka-bg-deep:      #04050b;
  --akka-surface:      #11151f;
  --akka-surface-2:    #161b27;
  --akka-line:         #1d2334;
  --akka-line-bright:  #2d3548;
  --akka-text:         #f4eed7;
  --akka-text-mute:    #c8cee0;
  --akka-text-faint:   #8c92a6;
  --akka-accent:       #f6c91e;
  --akka-accent-blue:  #4d8cf5;
  --akka-cta-hi:       #2f7af5;
  --akka-cta-lo:       #1f5fcf;
  --akka-display:      'Fraunces', 'Bodoni Moda', Georgia, serif;
  --akka-smcp:         'Space Grotesk', sans-serif;
  --akka-body:         'Inter', system-ui, -apple-system, sans-serif;
}

/* Global body --------------------------------------------------------- */
html, body { background: var(--akka-bg); }
body {
  color: var(--akka-text);
  font-family: var(--akka-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.mw-page-container,
.mw-page-container-inner,
.skin-vector-2022 .mw-page-container { background: transparent; }

/* Header (top bar) ---------------------------------------------------- */
.vector-header-container,
.vector-header {
  background: var(--akka-bg-deep) !important;
  border-bottom: 1px solid var(--akka-line);
  color: var(--akka-text);
}
.vector-header .mw-logo .mw-logo-wordmark,
.mw-logo-wordmark {
  color: var(--akka-text);
  font-family: var(--akka-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.vector-header a, .vector-header-end a { color: var(--akka-text-mute); }
.vector-header a:hover { color: var(--akka-text); }
.vector-header .cdx-button, .vector-header .cdx-button--weight-quiet { color: var(--akka-text); }

/* Search input */
.cdx-text-input__input,
.vector-search-box input {
  background: var(--akka-surface);
  color: var(--akka-text);
  border-color: var(--akka-line-bright);
}
.cdx-text-input__input::placeholder { color: var(--akka-text-faint); }

/* Sidebar / main menu (vector-2022 left rail) ------------------------- */
.vector-main-menu-container,
.vector-main-menu,
.vector-pinnable-element { background: var(--akka-bg-deep); border-color: var(--akka-line); }
.vector-main-menu-link, .vector-menu a, .mw-portlet a { color: var(--akka-text-mute); }
.vector-main-menu-link:hover, .vector-menu a:hover, .mw-portlet a:hover { color: var(--akka-text); background: var(--akka-surface); }
.vector-main-menu h3,
.mw-portlet-label,
.vector-menu-heading {
  color: var(--akka-accent);
  font-family: var(--akka-smcp);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 700;
}

/* Main content card --------------------------------------------------- */
.mw-body,
.mw-body-content {
  background: var(--akka-surface);
  color: var(--akka-text);
  border-radius: 14px;
  border: 1px solid var(--akka-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mw-body-header { border-bottom: 1px solid var(--akka-line); padding-bottom: 0.75rem; margin-bottom: 1rem; }

/* Headings ------------------------------------------------------------ */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
#firstHeading {
  font-family: var(--akka-display);
  color: var(--akka-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  border-color: var(--akka-line);
}
#firstHeading { font-size: clamp(2rem, 4vw, 2.6rem); }
.mw-body h2 { font-size: 1.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--akka-line); }
.mw-body h3 { font-size: 1.25rem; }

/* Body text ----------------------------------------------------------- */
.mw-body p, .mw-body li { color: var(--akka-text); }
.mw-body p { margin: 0 0 1rem; }

/* Links --------------------------------------------------------------- */
.mw-body a, .mw-parser-output a { color: var(--akka-accent-blue); }
.mw-body a:hover, .mw-parser-output a:hover { color: var(--akka-accent); text-decoration: underline; }
.mw-body a.new, .mw-parser-output a.new { color: #f06a3a; }
.mw-body a.external::after { display: none; }

/* Tabs (Read/Edit/View history/Tools) -------------------------------- */
.vector-page-titlebar,
.vector-page-toolbar { background: transparent; }
#p-namespaces .vector-tab a,
#p-views .vector-tab a,
.vector-menu-tabs li a {
  color: var(--akka-text-mute);
  background: transparent;
}
.vector-menu-tabs .selected a,
.vector-menu-tabs li.selected a { color: var(--akka-text); border-bottom-color: var(--akka-accent); }

/* Buttons ------------------------------------------------------------- */
.cdx-button.cdx-button--action-progressive,
.cdx-button--action-progressive {
  background: linear-gradient(180deg, var(--akka-cta-hi) 0%, var(--akka-cta-lo) 100%);
  color: #fff;
  border-color: var(--akka-cta-lo);
}

/* Tables -------------------------------------------------------------- */
.mw-body table, .wikitable {
  background: var(--akka-surface-2);
  color: var(--akka-text);
  border-color: var(--akka-line-bright);
}
.wikitable th { background: var(--akka-bg-deep); color: var(--akka-accent); border-color: var(--akka-line-bright); }
.wikitable td, .wikitable th { border-color: var(--akka-line); }

/* Code blocks --------------------------------------------------------- */
code, pre {
  background: var(--akka-bg-deep);
  color: var(--akka-text);
  border: 1px solid var(--akka-line);
  border-radius: 6px;
  font-family: 'Space Grotesk', monospace;
}

/* TOC ----------------------------------------------------------------- */
.toc, .mw-pt-translate-header { background: var(--akka-surface-2); border: 1px solid var(--akka-line); border-radius: 10px; }

/* Footer -------------------------------------------------------------- */
.mw-footer-container,
#footer,
.mw-footer {
  background: var(--akka-bg-deep);
  color: var(--akka-text-mute);
  border-top: 1px solid var(--akka-line);
}
.mw-footer a { color: var(--akka-accent-blue); }
.mw-footer a:hover { color: var(--akka-accent); }

/* Edit mode form ------------------------------------------------------ */
#wpTextbox1 {
  background: var(--akka-bg-deep);
  color: var(--akka-text);
  border: 1px solid var(--akka-line-bright);
  font-family: 'Space Grotesk', monospace;
}
.editButtons input, .editOptions input { color: var(--akka-text); }

/* Misc ---------------------------------------------------------------- */
hr { border-color: var(--akka-line); }
.mw-indicators { color: var(--akka-text-mute); }
.mw-jump-link { color: var(--akka-accent-blue); }