MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
+@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;600;700&display=swap');
 /* ========================================== */
 /* BigBro Orange Design System — BigBro Know   */
@@ Line 915: / Line 916: @@
    border-bottom: none !important;
 }
+/* BigBro logo size constraint */
+div[style*="max-width:280px"] .mw-file-element {
+    max-width: 280px !important;
+    width: 100% !important;
+    height: auto !important;
+}
+/* ===================================================================== */
+/* CATEGORY HERO - Homepage-style header for Category: landing pages     */
+/* Markup lives in Template:CategoryHero. Wiki chrome stays visible.     */
+/* ===================================================================== */
+.bb-cathero {
+  position: relative;
+  margin: 0 0 34px;
+  padding: 40px 40px 34px;
+  border-radius: 20px;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 150% at 50% 0%, rgba(255,121,0,.24) 0%, rgba(255,121,0,.07) 42%, rgba(13,13,13,0) 74%),
+    linear-gradient(180deg, #171717 0%, #0F0F0F 100%);
+  border: 1px solid #2E2E2E;
+  text-align: center;
+}
+.bb-cathero::before {
+  content: "";
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background-image:
+    linear-gradient(rgba(255,121,0,.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,121,0,.07) 1px, transparent 1px);
+  background-size: 46px 46px;
+  -webkit-mask-image: radial-gradient(75% 75% at 50% 0%, #000 0%, transparent 100%);
+  mask-image: radial-gradient(75% 75% at 50% 0%, #000 0%, transparent 100%);
+  pointer-events: none;
+}
+.bb-cathero > * { position: relative; z-index: 1; }
+.bb-cathero-logo { margin: 0 0 20px; }
+.bb-cathero-logo img { max-width: 200px; height: auto; }
+.bb-cathero-logo .thumb,
+.bb-cathero-logo figure,
+.bb-cathero-logo p { margin: 0 !important; padding: 0 !important; }
+.bb-cathero-eyebrow {
+  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 2.4px;
+  text-transform: uppercase;
+  color: #FF7900;
+  margin-bottom: 14px;
+}
+.bb-cathero-title {
+  font-family: 'Anton', 'Archivo', 'Arial Narrow', sans-serif;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1.04;
+  letter-spacing: .5px;
+  text-transform: uppercase;
+  color: #FFFFFF !important;
+  margin: 0 0 16px;
+}
+.bb-cathero-sub {
+  font-size: 17px;
+  line-height: 1.65;
+  color: #999999;
+  max-width: 740px;
+  margin: 0 auto;
+}
+.bb-cathero-meta {
+  margin-top: 24px;
+  padding-top: 18px;
+  border-top: 1px solid #2E2E2E;
+  font-size: 12px;
+  letter-spacing: 1.4px;
+  text-transform: uppercase;
+  color: #666666;
+}
+.bb-cathero-meta a,
+.bb-cathero-meta a:visited { color: #FF7900 !important; }
+.bb-cathero-meta .bb-sep { color: #2E2E2E; margin: 0 10px; }
+@media (max-width: 720px) {
+  .bb-cathero { padding: 28px 20px 24px; border-radius: 14px; }
+  .bb-cathero-title { font-size: 34px; }
+  .bb-cathero-sub { font-size: 15px; }
+  .bb-cathero-logo img { max-width: 150px; }
+}
+/* The hero carries the title on designed category landings */
+body.page-Category_Hosting h1.firstHeading,
+body.page-Category_Connections h1.firstHeading { display: none !important; }
+/* ===================================================================== */
+/* SIDEBAR LOGO FIX - the wordmark is wide, the Vector logo box is       */
+/* 160x160, so without background-size it overflows and crops.          */
+/* ===================================================================== */
+#p-logo,
+#p-logo a.mw-wiki-logo {
+  width: 160px !important;
+  height: 84px !important;
+  background-size: contain !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;
+}
+/* When a CategoryHero is present it carries the title, so the plain
+   bold title printed by Template:KinkipediaCategory is redundant. */
+.bb-cathero ~ .ka-category > .ka-title { display: none !important; }