MediaWiki:Common.css: Difference between revisions

Revision as of 09:15, 3 June 2026

:root {
  --anima-bg: #05070f;
  --anima-ink: #f7f3ea;
  --anima-muted: #b9c0d4;
  --anima-line: rgba(255, 255, 255, .12);
  --anima-panel: rgba(10, 14, 25, .82);
  --anima-cyan: #78f7ff;
  --anima-pink: #ff7cbe;
  --anima-gold: #ffd88a;
  --anima-violet: #b28cff;
}

html,
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 124, 190, .14), transparent 30rem),
    radial-gradient(circle at 78% 14%, rgba(120, 247, 255, .16), transparent 32rem),
    linear-gradient(180deg, #070a13 0%, #02040a 48%, #05070f 100%) !important;
  color: var(--anima-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(120,247,255,.45) 0 1px, transparent 1.5px);
  background-size: 92px 92px, 147px 147px;
  background-position: 0 0, 32px 18px;
  opacity: .16;
  z-index: 0;
}

.mw-page-container,
.mw-content-container,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-sticky-header,
.vector-header-container,
.vector-header-container .mw-header,
.vector-column-start,
.vector-column-end,
.vector-toc,
.vector-appearance,
.mw-footer {
  background: transparent !important;
}

.mw-page-container {
  max-width: none !important;
  position: relative;
  z-index: 1;
}

.vector-main-menu-landmark,
.vector-page-tools-landmark,
.vector-appearance,
.vector-toc-landmark,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-page-tools,
.vector-toc,
.vector-column-start,
.vector-column-end,
.vector-pinnable-header,
.vector-pinnable-element {
  display: none !important;
}

.mw-content-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  grid-column: 1 / -1 !important;
}

.mw-body,
.vector-body,
.mw-parser-output {
  color: var(--anima-ink) !important;
}

.mw-body {
  background: transparent !important;
  border: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.mw-body-content {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.firstHeading {
  display: none !important;
}

.mw-parser-output a {
  color: var(--anima-cyan) !important;
  text-decoration: none !important;
}

.mw-parser-output a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(120, 247, 255, .5);
}

.mw-parser-output h2 {
  border-bottom: 1px solid rgba(120, 247, 255, .22) !important;
  color: #ffffff !important;
  font-size: 1.55rem !important;
  letter-spacing: 0 !important;
  margin-top: 2.2rem !important;
}

.catlinks {
  border: 1px solid rgba(120, 247, 255, .18) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  color: var(--anima-muted) !important;
  padding: .8rem 1rem !important;
}

.anima-dossier {
  --accent: var(--anima-cyan);
  --accent-2: var(--anima-pink);
  --aura: rgba(120, 247, 255, .26);
  max-width: 1120px;
  margin: 2.25rem auto 4rem;
}

.anima-dossier.atma {
  --accent: #ff89c9;
  --accent-2: #8be7ff;
  --aura: rgba(255, 137, 201, .28);
}

.anima-dossier.maya {
  --accent: #b28cff;
  --accent-2: #ff83e6;
  --aura: rgba(178, 140, 255, .3);
}

.anima-dossier.veda {
  --accent: #93fff2;
  --accent-2: #ffd88a;
  --aura: rgba(147, 255, 242, .28);
}

.anima-dossier.raka {
  --accent: #ff8b4f;
  --accent-2: #ffd88a;
  --aura: rgba(255, 139, 79, .32);
}

.anima-hero {
  position: relative;
  overflow: hidden;
  min-height: 405px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 38%, var(--aura), transparent 21rem),
    radial-gradient(circle at 26% 10%, rgba(255,255,255,.08), transparent 24rem),
    linear-gradient(135deg, rgba(14, 18, 32, .96), rgba(4, 6, 14, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 2rem;
  padding: clamp(1.55rem, 3.4vw, 2.7rem);
}

.anima-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(from 140deg at 62% 42%, transparent, rgba(120,247,255,.14), transparent 28%, rgba(255,124,190,.12), transparent 48%),
    repeating-radial-gradient(circle at 66% 44%, rgba(255,255,255,.13) 0 1px, transparent 1px 34px);
  opacity: .78;
}

.anima-hero-copy,
.anima-visual {
  position: relative;
  z-index: 1;
}

.anima-kicker {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

.anima-hero h1 {
  color: #ffffff !important;
  font-size: clamp(3.4rem, 8vw, 6.6rem) !important;
  line-height: .88 !important;
  margin: 0 0 .45rem !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 34px var(--aura);
}

.anima-subtitle {
  color: var(--accent-2);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 1.25rem;
}

.anima-lead {
  max-width: 650px;
  color: rgba(247, 243, 234, .9);
  font-size: 1.08rem;
  margin-bottom: 1.45rem;
}

.anima-chiprow,
.anima-actions,
.anima-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.anima-chip,
.anima-actions a,
.anima-actions .external {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #fff !important;
  padding: .45rem .82rem;
  font-weight: 750;
  line-height: 1.15;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.anima-actions a:first-child {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071018 !important;
  border: 0;
  box-shadow: 0 12px 32px var(--aura);
}

.anima-visual {
  min-height: 340px;
  display: grid;
  place-items: center;
}

.anima-visual::before {
  content: "";
  position: absolute;
  width: min(330px, 78vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.22), transparent 34%),
    radial-gradient(circle, var(--aura), transparent 66%);
  filter: blur(8px);
  animation: animaPulse 5s ease-in-out infinite;
}

.anima-visual img {
  position: relative;
  z-index: 1;
  max-width: min(330px, 78vw);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.52)) drop-shadow(0 0 34px var(--aura));
  animation: animaFloat 5.6s ease-in-out infinite;
}

.anima-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1rem;
  margin-top: 1rem;
}

.anima-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 0%, var(--aura), transparent 18rem),
    rgba(9, 13, 24, .86);
  padding: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.anima-card h2,
.anima-card h3 {
  border: 0 !important;
  margin: 0 0 .75rem !important;
  color: #ffffff !important;
}

.anima-card p {
  color: rgba(247, 243, 234, .88);
}

.anima-fact-list {
  display: grid;
  gap: .65rem;
}

.anima-fact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: .65rem;
}

.anima-fact b {
  color: var(--accent);
}

.anima-quote {
  border-left: 3px solid var(--accent);
  padding: .7rem 1rem;
  color: #fff;
  background: rgba(255,255,255,.05);
  border-radius: 0 10px 10px 0;
}

.anima-orbit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.anima-orbit-item {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .9rem;
  background: rgba(255,255,255,.045);
}

.anima-orbit-item strong {
  display: block;
  color: var(--accent-2);
  margin-bottom: .25rem;
}

@keyframes animaFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.015); }
}

@keyframes animaPulse {
  0%, 100% { opacity: .76; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (max-width: 900px) {
  .mw-content-container {
    padding: 0 .9rem !important;
  }

  .anima-hero,
  .anima-grid {
    grid-template-columns: 1fr;
  }

  .anima-visual {
    min-height: 260px;
  }
}