MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 124: / Line 124: @@
 }
 .toc a {
+  color: #FF6600 !important;
+}
+.toc .tocnumber {
    color: #FF6600 !important;
 }
@@ Line 387: / Line 390: @@
-/* Logo inversion for dark theme - makes AlphaX.Wiki text white */
-.mw-file-description .mw-file-element {
-   filter: invert(1) hue-rotate(180deg) brightness(1.5);
+/* ============================================
+   CATEGORY GRID COMPONENT - ax-cat-grid
+   Reusable 8-box responsive category grid
+   Matches Sexual Health card design exactly
+   ============================================ */
+/* Grid container: 4 columns desktop */
+.ax-cat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin: 0 0 32px 0;
+}
+/* Individual card */
+.ax-cat-card {
+  background: #1A1A1A;
+  border: 1px solid #2E2E2E;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+.ax-cat-card:hover {
+  border-color: rgba(255,102,0,0.5);
+  box-shadow: 0 0 20px rgba(255,102,0,0.08);
+}
+/* Image area - fixed height banner, full width */
+.ax-cat-img {
+  width: 100%;
+  height: 140px;
+  background-color: #111;
+  background-size: cover;
+  background-position: center center;
+  border-radius: 15px 15px 0 0;
+  flex-shrink: 0;
+}
+/* Card body */
+.ax-cat-body {
+  padding: 16px 18px 18px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+/* Category title */
+.ax-cat-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #FFFFFF;
+  letter-spacing: 0.2px;
+  line-height: 1.3;
+}
+.ax-cat-title a {
+  color: #FF6600 !important;
+  text-decoration: none;
+}
+.ax-cat-title a:hover {
+  color: #FF8533 !important;
+  text-decoration: underline;
+}
+/* Short description */
+.ax-cat-desc {
+  font-size: 13px;
+  line-height: 1.55;
+  color: #999999;
+}
+/* Tablet: 2 columns */
+@media (max-width: 900px) {
+  .ax-cat-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+/* Mobile: 1 column */
+@media (max-width: 500px) {
+  .ax-cat-grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* Knowledge Areas grid on Main Page */
+#ax-knowledge-section {
+  margin: 0 0 32px 0;
+}
+#ax-knowledge-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+/* === Start Here page: scrolling tile animation === */
+@keyframes scrollUp {
+%   { transform: translateY(0); }
+% { transform: translateY(-50%); }
+}
+/* AlphaX Landing Page Styles */
+@keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
+@keyframes glowLine{0%,100%{box-shadow:0 0 18px 4px rgba(255,107,26,0.5)}50%{box-shadow:0 0 36px 10px rgba(255,107,26,0.9)}}
+.ax-path-card{border-radius:16px;overflow:hidden;position:relative;height:230px;border-left:4px solid #FF6B1A;border-top:1px solid #2a2a2a;border-right:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;transition:transform 0.25s ease,box-shadow 0.25s ease;cursor:pointer;display:block;}
+.ax-path-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px rgba(255,107,26,0.25);}
+.ax-section-card{display:flex;align-items:center;gap:14px;background:#141414;border:1px solid #252525;border-left:4px solid #FF6B1A;border-radius:12px;padding:16px 18px;transition:background 0.2s,transform 0.2s;margin-bottom:0;}
+.ax-section-card:hover{background:#1c1c1c;transform:translateX(4px);}
+.ax-pill{display:inline-block;background:rgba(255,107,26,0.12);border:1px solid rgba(255,107,26,0.3);color:#FF6B1A;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:10px;}
+.ax-glow-bar{height:2px;background:linear-gradient(90deg,transparent,#FF6B1A,transparent);animation:glowLine 3s ease-in-out infinite;}
+.ax-stat{text-align:center;padding:16px 10px;}
+.ax-stat-num{font-size:28px;font-weight:900;color:#FF6B1A;letter-spacing:-1px;}
+.ax-stat-label{font-size:10px;color:#666;letter-spacing:2px;text-transform:uppercase;margin-top:2px;}
+.ax-topic-tag{display:inline-block;background:#1a1a1a;border:1px solid #2d2d2d;color:#bbb;font-size:11px;padding:5px 12px;border-radius:20px;margin:3px;transition:all 0.2s;text-decoration:none;}
+.ax-topic-tag:hover{background:#FF6B1A !important;color:#000 !important;border-color:#FF6B1A;}
+.ax-feed-item{padding:8px 0;border-bottom:1px solid #1a1a1a;font-size:13px;color:#ccc;line-height:1.4;}
+.ax-feed-item a{color:#ccc;text-decoration:none;}
+.ax-feed-item a:hover{color:#FF6B1A;}
+.ax-feed-tag{color:#FF6B1A;font-size:10px;display:block;margin-top:2px;}
+.ax-section-card a{color:#fff;text-decoration:none;font-weight:700;font-size:13px;}
+.ax-section-card a:hover{color:#FF6B1A;}
+#mw-content-text .ax-path-card a{color:#fff;text-decoration:none;}
+/* Hide leaked template parameter labels in translated /de articles */
+.ka-article pre { display: none !important; }
+/* ============================================ */
+/* Alpha Orange — Button Text Color Fix         */
+/* Ensures white text on orange gradient btns  */
+/* ============================================ */
+.btn-primary,
+.btn-primary:visited,
+.btn-nav,
+.btn-nav:visited {
+  color: #ffffff !important;
+  -webkit-text-fill-color: #ffffff !important;
+}
+.btn-primary:hover,
+.btn-nav:hover {
+  color: #ffffff !important;
+  -webkit-text-fill-color: #ffffff !important;
 }