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.

/* ===== SuperJoy minimal polish (safe, readable) ===== */

/* Typography */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  color: #1f2937;               /* slate-800 */
  background: #fafafa;
}

/* Headings */
#firstHeading { 
  font-weight: 800; 
  color: #0f172a;               /* slate-900 */
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .25rem;
}

/* Content width stays default; add a little breathing room */
.mw-body-content p { margin: .6rem 0 1rem; }

/* Links */
a { color: #2563eb; }           /* blue-600 */
a:visited { color: #4f46e5; }   /* indigo-600 */
a:hover { color: #1d4ed8; text-decoration: none; }

/* Subtle buttons (used on main-page links) */
.sj-btn {
  display:inline-block; 
  padding: 8px 14px; 
  border-radius: 10px;
  background:#1d4ed8; 
  color:#fff!important; 
  font-weight:700; 
  margin:4px; 
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.sj-btn:hover { background:#1844c6; }

/* ---- Main Page only (lightweight) ---- */
.page-Main_Page .sj-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  background:#111;
}
.page-Main_Page .sj-hero img {
  width:100%;
  max-height: 340px;
  object-fit: cover;
  filter: brightness(72%);
}
.page-Main_Page .sj-hero .sj-hero-text {
  position:absolute; inset:0; 
  display:grid; place-items:center; 
  text-align:center; color:#fff; 
  padding:24px;
}
.page-Main_Page .sj-hero h1 {
  margin:0 0 6px 0; 
  font-weight:900; 
  font-size: clamp(28px, 4.5vw, 44px);
}
.page-Main_Page .sj-hero p { margin:0; opacity:.95; }

/* Project cards grid */
.page-Main_Page .sj-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.page-Main_Page .sj-card {
  position:relative; 
  border-radius:12px; 
  overflow:hidden; 
  background:#0b1220; 
  color:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.page-Main_Page .sj-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
.page-Main_Page .sj-card img { 
  width:100%; height:200px; object-fit:cover; filter:brightness(78%);
}
.page-Main_Page .sj-card .sj-card-title {
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px; text-align:center;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  font-weight:800; font-size:18px;
}

/* Section title on Main Page */
.page-Main_Page h2.section-title {
  text-align:center; 
  margin: 26px 0 6px; 
  border:0; 
  color:#0f172a;
}