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.

/* ============================================================
   SKY BLUE WIKI THEME — MediaWiki:Common.css
   Drop-in replacement for the Circus Wiki pink theme.
   Paste into Special:EditPage/MediaWiki:Common.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

/* --- Global --- */
body,
#content,
#mw-content-text {
  background-color: #f0f8ff !important;
  font-family: 'Nunito', sans-serif !important;
  color: #1a3a5a !important;
}

/* ============================================================
   STRIPE BANNER
   ============================================================ */
.circus-banner {
  width: 100%;
  height: 80px;
  background-image: repeating-linear-gradient(
    90deg,
    #29b6f6 0px,
    #29b6f6 44px,
    #ffffff 44px,
    #ffffff 88px
  );
}

/* Page-wide stripe banner via pseudo-element */
body::before {
  content: '';
  display: block;
  width: 100%;
  height: 80px;
  background-image: repeating-linear-gradient(
    90deg,
    #29b6f6 0px,
    #29b6f6 44px,
    #ffffff 44px,
    #ffffff 88px
  );
}

/* Page title bar stripes */
#firstHeading,
.mw-first-heading {
  background-image: repeating-linear-gradient(
    90deg,
    #29b6f6 0px,
    #29b6f6 44px,
    #ffffff 44px,
    #ffffff 88px
  ) !important;
  padding: 16px 20px !important;
  border-bottom: none !important;
  color: #0277bd !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.circus-hero {
  text-align: center;
  padding: 40px 20px 20px;
  position: relative;
}

.circus-logo-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #b3e5fc;
  padding: 8px;
  margin-bottom: 24px;
}

.circus-logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, #4fc3f7, #0288d1);
  font-size: 52px;
  line-height: 1;
}

.circus-title {
  font-family: 'Nunito', sans-serif !important;
  font-size: 3.6em !important;
  font-weight: 900 !important;
  color: #0288d1 !important;
  margin: 0 0 8px !important;
  line-height: 1.1 !important;
  border: none !important;
}

.circus-subtitle {
  font-size: 1.35em;
  color: #4a7a9e;
  font-weight: 400;
  margin: 0 0 40px;
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.circus-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 20px 50px;
  max-width: 900px;
  margin: 0 auto;
}

.circus-card {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  border: 2px solid #b3e5fc;
  border-radius: 20px;
  background: #f0f8ff;
  padding: 32px 20px 28px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}

.circus-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(2, 136, 209, 0.15);
  text-decoration: none !important;
}

.circus-card-icon {
  font-size: 38px;
  margin-bottom: 14px;
  color: #0288d1;
  display: block;
}

.circus-card-title {
  font-size: 1.15em;
  font-weight: 700;
  color: #1a3a5a;
  margin: 0 0 8px;
}

.circus-card-desc {
  font-size: 0.95em;
  color: #4a7a9e;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#mw-panel,
#mw-navigation {
  background-color: #f0f8ff !important;
  border-right: 2px solid #b3e5fc !important;
  box-shadow: none !important;
}

#mw-panel .portal h3 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: #0288d1 !important;
  border-bottom: 2px solid #b3e5fc !important;
}

#mw-panel .portal li a {
  font-family: 'Nunito', sans-serif !important;
  color: #4a7a9e !important;
  font-weight: 600 !important;
}

#mw-panel .portal li a:hover {
  color: #0288d1 !important;
  text-decoration: none !important;
}

/* Vector 2022 sidebar */
.vector-menu-portal,
.mw-sidebar {
  background-color: #f0f8ff !important;
}

.vector-menu-portal .vector-menu-heading {
  color: #0288d1 !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}

.vector-menu-portal .vector-menu-content a {
  color: #4a7a9e !important;
  font-family: 'Nunito', sans-serif !important;
}

.vector-menu-portal .vector-menu-content a:hover {
  color: #0288d1 !important;
}

/* ============================================================
   FULL PAGE BACKGROUND
   ============================================================ */
html, body {
  background-color: #f0f8ff !important;
}

#content,
#mw-content-container,
.mw-body,
.mw-body-content,
.mw-page-container,
.mw-page-container-inner {
  background-color: #f0f8ff !important;
  border: none !important;
  box-shadow: none !important;
}

#mw-head,
.mw-header,
#vector-page-toolbar {
  background-color: #f0f8ff !important;
  border-bottom: 2px solid #b3e5fc !important;
  box-shadow: none !important;
}

/* Search bar */
#searchInput,
.vector-search-box input {
  background-color: #e1f5fe !important;
  border: 2px solid #b3e5fc !important;
  border-radius: 20px !important;
  font-family: 'Nunito', sans-serif !important;
  color: #1a3a5a !important;
}

/* Footer */
#footer,
.mw-footer {
  background-color: #f0f8ff !important;
  border-top: 2px solid #b3e5fc !important;
  color: #4a7a9e !important;
}

#footer a,
.mw-footer a {
  color: #0288d1 !important;
}

/* Infobox */
.infobox {
  border: 2px solid #b3e5fc !important;
  border-radius: 12px !important;
  background: #e1f5fe !important;
  font-family: 'Nunito', sans-serif !important;
}

.infobox th {
  background: #b3e5fc !important;
  color: #01579b !important;
  font-weight: 700 !important;
}

/* Category links */
#catlinks {
  border: 2px solid #b3e5fc !important;
  border-radius: 10px !important;
  background: #e1f5fe !important;
  font-family: 'Nunito', sans-serif !important;
}

/* Article headings */
#mw-content-text h1,
#mw-content-text h2,
#mw-content-text h3 {
  font-family: 'Nunito', sans-serif !important;
  color: #0288d1 !important;
}

#mw-content-text h2 {
  border-bottom: 2px solid #b3e5fc !important;
}