MediaWiki:Common.css: Difference between revisions

From HADES
Jump to navigationJump to search
Possession (talk | contribs)
Bureaucrats, Interface administrators, Administrators
6 edits
Created page with "/* * ╔══════════════════════════════════════════════════════════════════╗ * ║ HADES WIKI — MediaWiki Theme CSS ║ * ║ The Free Encyclopedia of the Underworld ║ * ║ Based on: Hades (2026) by Melanie Martinez ║ * ║ Install in: MediaWiki:C..."
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*
/* ================================================================
  * ╔══════════════════════════════════════════════════════════════════╗
  H A D E S — MediaWiki:Common.css
  * ║          HADES WIKI — MediaWiki Theme CSS                      ║
  Based on the 2026 album "Hades"
* ║    The Free Encyclopedia of the Underworld                      ║
  Baroque gothic  ·  candlelit mahogany · rose-gold shrine
* ║    Based on: Hades (2026) by Melanie Martinez                  ║
  ================================================================ */
  * ║    Install in: MediaWiki:Common.css                            ║
  * ╚══════════════════════════════════════════════════════════════════╝
*/


/* ═══════════════════════════════════════════
/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
  IMPORT FONTS
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=UnifrakturMaguntia&family=Playfair+Display+SC:wght@400;700&family=Petit+Formal+Script&display=swap');
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=IM+Fell+English:ital@0;1&display=swap');


/* ═══════════════════════════════════════════
/* ── ONLINEWEBFONTS ───────────────────────────────────────────── */
  CSS CUSTOM PROPERTIES (Variables)
/* Rothenburg Decorative — ornate gothic caps */
═══════════════════════════════════════════ */
@font-face {
:root {
   font-family: 'RothenburgDecorative';
   --hades-bg-deep:       #080200;
   src: url('https://db.onlinewebfonts.com/t/a2a1ffe66c3aa67e462ccd5a66c56b62.woff2') format('woff2'),
   --hades-bg-dark:       #0d0500;
       url('https://db.onlinewebfonts.com/t/a2a1ffe66c3aa67e462ccd5a66c56b62.woff') format('woff');
  --hades-bg-mid:       #150700;
   font-display: swap;
  --hades-bg-warm:      #1c0900;
  --hades-gold-bright:  #c8922a;
  --hades-gold-mid:      #a07828;
  --hades-gold-muted:    #8b6914;
  --hades-gold-dim:      #5a3e18;
  --hades-text-bright:  #d4c4a0;
  --hades-text-mid:      #c4b480;
  --hades-text-dim:      #8b7a50;
  --hades-red-accent:    #6b1a1a;
  --hades-border:       rgba(200, 146, 42, 0.25);
  --hades-border-strong: rgba(200, 146, 42, 0.6);
   --hades-shadow:       rgba(0, 0, 0, 0.7);
}
}
 
/* MedievalSharp — blackletter decorative */
/* ═══════════════════════════════════════════
@font-face {
  KEYFRAME ANIMATIONS
   font-family: 'MedievalSharp';
═══════════════════════════════════════════ */
   src: url('https://db.onlinewebfonts.com/t/1e5a1c6a58aed05f7c23d8b6c4d22b1d.woff2') format('woff2'),
@keyframes hadesCandle {
      url('https://db.onlinewebfonts.com/t/1e5a1c6a58aed05f7c23d8b6c4d22b1d.woff') format('woff');
   0%, 100% { opacity: 1; transform: scaleY(1) scaleX(1); filter: brightness(1); }
   font-display: swap;
   15%      { opacity: 0.88; transform: scaleY(0.94) scaleX(1.04) skewX(2deg); filter: brightness(0.9); }
  30%      { opacity: 1; transform: scaleY(1.06) scaleX(0.96); filter: brightness(1.08); }
  45%      { opacity: 0.92; transform: scaleY(0.97) scaleX(1.02) skewX(-1deg); filter: brightness(0.95); }
  60%      { opacity: 1; transform: scaleY(1.03) scaleX(0.98); filter: brightness(1.04); }
   80%      { opacity: 0.9; transform: scaleY(0.95) scaleX(1.03) skewX(1deg); filter: brightness(0.92); }
}
}
 
/* GothicUltraOT — heavy gothic */
@keyframes hadesGlow {
@font-face {
   0%, 100% {
   font-family: 'GothicUltra';
    text-shadow: 0 0 15px rgba(200,146,42,0.3),
   src: url('https://db.onlinewebfonts.com/t/ec70a8b001c29e3f95b6f1b97049ef5e.woff2') format('woff2'),
                0 0 30px rgba(180,100,20,0.15),
      url('https://db.onlinewebfonts.com/t/ec70a8b001c29e3f95b6f1b97049ef5e.woff') format('woff');
                0 0 2px rgba(255,220,120,0.5);
   font-display: swap;
   }
  50% {
    text-shadow: 0 0 25px rgba(200,146,42,0.6),
                0 0 50px rgba(180,100,20,0.3),
                0 0 80px rgba(150,70,10,0.15),
                0 0 3px rgba(255,230,140,0.8);
   }
}
}
 
/* Cantique — baroque script serif */
@keyframes hadesBorderPulse {
@font-face {
   0%, 100% { border-color: rgba(200,146,42,0.2); }
   font-family: 'Cantique';
   50%      { border-color: rgba(200,146,42,0.7); box-shadow: 0 0 12px rgba(200,146,42,0.15); }
   src: url('https://db.onlinewebfonts.com/t/c8a7fd3c8c2ab2c21f7e7a44e3a12bfe.woff2') format('woff2'),
      url('https://db.onlinewebfonts.com/t/c8a7fd3c8c2ab2c21f7e7a44e3a12bfe.woff') format('woff');
  font-display: swap;
}
}


@keyframes hadesShimmer {
/* ── DESIGN TOKENS ───────────────────────────────────────────── */
   0%   { background-position: -200% center; }
:root {
   100% { background-position: 200% center; }
   /* ── backgrounds */
}
  --h-bg:        #0b0704;
   --h-bg2:       #150e08;
  --h-bg3:        #1e1208;
   --h-panel:     #0f0905;
  --h-mirror:    #100808;


@keyframes hadesFloat {
  /* ── borders */
   0%, 100% { transform: translateY(0px) rotate(0deg); }
   --h-border:     #3a1e0c;
   33%      { transform: translateY(-8px) rotate(1deg); }
   --h-border2:   #6b3a18;
   66%      { transform: translateY(-4px) rotate(-0.5deg); }
   --h-border3:    #8a5a28;
}


@keyframes hadesParticle {
  /* ── gold palette */
   0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
   --h-gold:      #c8860a;
   50%  { transform: translateY(-200px) translateX(20px) scale(0.6); opacity: 0.4; }
   --h-gold2:     #e8b030;
   100% { transform: translateY(-400px) translateX(-10px) scale(0.2); opacity: 0; }
  --h-gold3:     #f8d060;
}
   --h-gold-dim:   #7a4e10;
   --h-gold-deep: #3e2408;


@keyframes hadesFadeIn {
  /* ── rose / candle palette */
   from { opacity: 0; transform: translateY(20px); }
   --h-rose:       #a84858;
   to   { opacity: 1; transform: translateY(0); }
  --h-rose2:     #d08090;
}
   --h-rose3:      #f0b0c0;
   --h-candle:     #f8c840;
  --h-flame:     #ff7010;
  --h-wax:        #f2ede0;
  --h-wax2:      #d8d0c0;


@keyframes hadesSlideIn {
   /* ── blue-lavender (hair accent) */
   from { opacity: 0; transform: translateX(-20px); }
   --h-blue:       #6878a8;
   to  { opacity: 1; transform: translateX(0); }
  --h-blue2:     #90a0c8;
}


@keyframes hadesWaxDrip {
  /* ── text */
   0%  { height: 0px; opacity: 0.8; }
   --h-text:       #e0ceb0;
   100% { height: 24px; opacity: 0.3; }
  --h-text-dim:   #9a7a50;
}
   --h-text-muted: #5a3e28;
  --h-cream:     #f0e8d0;


@keyframes hadesOrnamentSpin {
  /* ── glows */
   from { transform: rotate(0deg); }
   --h-glow-gold: 0 0 20px rgba(200, 134, 10, 0.55), 0 0 40px rgba(200, 134, 10, 0.2);
   to   { transform: rotate(360deg); }
   --h-glow-rose:  0 0 16px rgba(208, 128, 144, 0.45);
}
   --h-glow-candle:0 0 24px rgba(248, 200, 64, 0.5), 0 0 50px rgba(248, 200, 64, 0.15);


@keyframes hadesNavUnderline {
  /* ── fonts */
   from { width: 0; left: 50%; }
   --h-font-title:   'UnifrakturMaguntia', 'RothenburgDecorative', cursive;
   to   { width: 100%; left: 0; }
  --h-font-head:    'Cinzel Decorative', 'GothicUltra', serif;
  --h-font-subhead: 'Cinzel', 'Playfair Display SC', serif;
   --h-font-body:    'IM Fell English', 'Cormorant Garamond', serif;
   --h-font-label:   'Playfair Display SC', 'Cinzel', serif;
  --h-font-script: 'Petit Formal Script', 'Cantique', cursive;
}
}


@keyframes hadesSearchPulse {
/* ── SCROLLBAR ──────────────────────────────────────────────── */
   0%, 100% { box-shadow: 0 0 0 0 rgba(200,146,42,0); }
html {
   50%      { box-shadow: 0 0 0 3px rgba(200,146,42,0.15); }
   scrollbar-color: var(--h-border2) var(--h-bg2);
   scrollbar-width: thin;
}
}
 
::-webkit-scrollbar { width: 8px; }
@keyframes hadesRipple {
::-webkit-scrollbar-track { background: var(--h-bg2); }
  0%  { transform: scale(1); opacity: 0.6; }
::-webkit-scrollbar-thumb {
   100% { transform: scale(2.5); opacity: 0; }
   background: linear-gradient(to bottom, var(--h-gold-dim), var(--h-border2));
  border-radius: 1px;
}
}


/* ═══════════════════════════════════════════
/* ── BODY & BASE ────────────────────────────────────────────── */
  GLOBAL BODY & BACKGROUND
body {
═══════════════════════════════════════════ */
   background-color: var(--h-bg) !important;
body,
  color: var(--h-text) !important;
html {
  font-family: var(--h-font-body) !important;
   background-color: var(--hades-bg-deep) !important;
  font-size: 16px;
  line-height: 1.8;
  /* Damask background pattern + radial warm glow */
   background-image:
   background-image:
     radial-gradient(ellipse at 50% 0%, rgba(40,15,0,0.9) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill:none;stroke:%23c8860a;stroke-width:0.4;opacity:0.07%7D%3C/style%3E%3C/defs%3E%3Cellipse class='d' cx='60' cy='30' rx='10' ry='18'/%3E%3Cellipse class='d' cx='60' cy='90' rx='10' ry='18'/%3E%3Cellipse class='d' cx='30' cy='60' rx='18' ry='10'/%3E%3Cellipse class='d' cx='90' cy='60' rx='18' ry='10'/%3E%3Cpath class='d' d='M60,12 Q72,30 60,48 Q48,30 60,12Z'/%3E%3Cpath class='d' d='M60,72 Q72,90 60,108 Q48,90 60,72Z'/%3E%3Cpath class='d' d='M12,60 Q30,72 48,60 Q30,48 12,60Z'/%3E%3Cpath class='d' d='M72,60 Q90,72 108,60 Q90,48 72,60Z'/%3E%3Ccircle class='d' cx='60' cy='60' r='6'/%3E%3Ccircle class='d' cx='30' cy='30' r='3'/%3E%3Ccircle class='d' cx='90' cy='30' r='3'/%3E%3Ccircle class='d' cx='30' cy='90' r='3'/%3E%3Ccircle class='d' cx='90' cy='90' r='3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 L44 32 L68 32 L49 47 L56 71 L40 56 L24 71 L31 47 L12 32 L36 32Z' fill='none' stroke='%23c8922a' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E") !important;
     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,134,10,0.08) 0%, transparent 65%),
  color: var(--hades-text-mid) !important;
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(168,72,88,0.06) 0%, transparent 60%);
  font-family: 'IM Fell English', Georgia, serif !important;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,2 L14,9 L21,9 L15.5,13.5 L17.5,21 L12,16.5 L6.5,21 L8.5,13.5 L3,9 L10,9Z' fill='%23c8860a' opacity='0.7' stroke='%23e8b030' stroke-width='0.5'/%3E%3C/svg%3E") 12 12, auto;
  min-height: 100vh;
}
}


/* Floating ember particles */
/* Grain texture overlay */
body::before {
body::before {
   content: '';
   content: '';
   position: fixed;
   position: fixed;
   inset: 0;
   inset: 0;
   background-image:
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.028'/%3E%3C/svg%3E");
    radial-gradient(circle, rgba(200,146,42,0.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,100,20,0.4) 1px, transparent 1px);
  background-size: 300px 300px, 200px 200px;
  background-position: 0 0, 150px 100px;
  animation: hadesParticle 12s linear infinite;
   pointer-events: none;
   pointer-events: none;
   z-index: 0;
   z-index: 9997;
  opacity: 0.15;
}
}


/* ═══════════════════════════════════════════
/* Vignette */
  VECTOR SKIN — PAGE WRAPPER
body::after {
═══════════════════════════════════════════ */
  content: '';
#mw-page-base,
  position: fixed;
#mw-head-base,
  inset: 0;
.mw-body,
  background: radial-gradient(
.page-Main_Page .mw-body,
    ellipse 110% 110% at 50% 50%,
#content,
    transparent 40%,
.vector-body,
    rgba(5, 2, 0, 0.65) 100%
.skin-vector-2022 .vector-body-container {
  );
  background: transparent !important;
  pointer-events: none;
  z-index: 9996;
  animation: h-breathe 8s ease-in-out infinite;
}
}


.mw-body {
/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
   border: none !important;
h1, h2, h3, h4, h5, h6,
   padding: 1.5em 2em !important;
.firstHeading, #firstHeading, .mw-headline {
   animation: hadesFadeIn 0.8s ease forwards;
   font-family: var(--h-font-head) !important;
  color: var(--h-gold2) !important;
   text-shadow: var(--h-glow-gold) !important;
   letter-spacing: 0.05em;
  line-height: 1.3;
}
}


/* ═══════════════════════════════════════════
/* Page title — gothic grandeur */
  TOP NAVIGATION BAR (Article/Discussion tabs)
h1, .firstHeading, #firstHeading {
═══════════════════════════════════════════ */
   font-family: var(--h-font-title) !important;
#p-namespaces,
   font-size: 2.6em !important;
#p-views,
   color: var(--h-gold3) !important;
.vector-menu-tabs,
   text-shadow:
#left-navigation,
    0 0 30px rgba(248,200,64,0.6),
#right-navigation {
    0 0 60px rgba(200,134,10,0.3),
   background: linear-gradient(to bottom, #0f0600, #120800) !important;
    2px 4px 8px rgba(0,0,0,0.9) !important;
  border: none !important;
   border-bottom: none !important;
}
   padding-bottom: 0.4em !important;
 
/* Tab links */
#p-namespaces ul li a,
#p-views ul li a,
.vector-menu-tabs .vector-menu-content ul li a {
  background: none !important;
   border: none !important;
  border-bottom: 2px solid transparent !important;
   color: var(--hades-gold-muted) !important;
   font-family: 'Cinzel', serif !important;
  font-size: 10.5px !important;
  letter-spacing: 2.5px !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
  padding: 10px 16px !important;
  transition: all 0.25s ease !important;
   position: relative;
   position: relative;
  /* Ornamental border under title */
  background-image:
    linear-gradient(to right, transparent, var(--h-gold-dim), var(--h-gold), var(--h-gold-dim), transparent);
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  animation: h-title-flicker 6s ease-in-out infinite;
}
}


#p-namespaces ul li a:hover,
/* Ornamental crown before/after title */
#p-views ul li a:hover,
h1::before, #firstHeading::before {
.vector-menu-tabs .vector-menu-content ul li a:hover {
  content: '✦';
   color: var(--hades-gold-bright) !important;
   color: var(--h-gold);
   background: rgba(200,146,42,0.06) !important;
  font-family: serif;
   border-bottom-color: rgba(200,146,42,0.5) !important;
  margin-right: 0.4em;
   opacity: 0.8;
   animation: h-flicker 4s infinite;
  font-size: 0.55em;
  vertical-align: middle;
}
}
 
h1::after, #firstHeading::after {
/* Active tab */
  content: '✦';
#p-namespaces ul li.selected a,
   color: var(--h-gold);
#p-views ul li.selected a,
   font-family: serif;
.vector-menu-tabs ul li.selected a {
  margin-left: 0.4em;
   color: var(--hades-gold-bright) !important;
  opacity: 0.8;
   border-bottom: 2px solid var(--hades-gold-bright) !important;
  animation: h-flicker 4s 0.5s infinite;
   background: none !important;
  font-size: 0.55em;
   vertical-align: middle;
}
}


/* ═══════════════════════════════════════════
h2 {
  SITE HEADER / LOGO AREA
   font-size: 1.6em !important;
═══════════════════════════════════════════ */
   border-bottom: 1px solid var(--h-border2) !important;
#mw-head,
   padding-bottom: 0.25em !important;
#vector-page-toolbar,
.mw-header,
.vector-header {
   background: linear-gradient(135deg, #1c0900 0%, #150700 30%, #1a0a00 60%, #0f0500 100%) !important;
   border-bottom: 1px solid #2a1505 !important;
   box-shadow: 0 4px 30px rgba(0,0,0,0.6), 0 2px 0 rgba(200,146,42,0.15) !important;
   position: relative;
   position: relative;
}
}
 
h2::after {
#mw-head::after {
   content: '';
   content: '';
   position: absolute;
   position: absolute;
   bottom: -1px;
   bottom: -1px; left: 0;
  left: 0;
   width: 60px; height: 1px;
   right: 0;
   background: var(--h-gold);
  height: 1px;
  box-shadow: 0 0 8px var(--h-gold);
   background: linear-gradient(to right, transparent, var(--hades-gold-bright), transparent);
}
}
h3 { font-size: 1.3em !important; color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose) !important; }
h4 { font-size: 1.1em !important; color: var(--h-gold) !important; font-family: var(--h-font-subhead) !important; }


/* Logo */
p {
#p-logo a,
   font-family: var(--h-font-body);
.mw-logo {
   color: var(--h-text);
   background-image: none !important;
   line-height: 1.85;
   width: auto !important;
  margin-bottom: 1em;
   height: auto !important;
}
}


#p-logo a::before,
/* First letter drop cap */
.mw-logo::before {
.mw-parser-output > p:first-of-type::first-letter {
   content: '♛';
   font-family: var(--h-font-title);
   display: block;
   font-size: 3.8em;
   font-size: 32px;
   float: left;
   color: var(--hades-gold-bright);
   line-height: 0.75;
   filter: drop-shadow(0 0 10px rgba(200,146,42,0.7));
   margin: 0.08em 0.1em 0 0;
   animation: hadesFloat 3.5s ease-in-out infinite;
   color: var(--h-gold2);
   text-align: center;
   text-shadow: var(--h-glow-gold);
}
}


/* Site name */
/* ── LINKS ──────────────────────────────────────────────────── */
#p-logo a[title]::after {
a, a:visited {
   content: attr(title);
   color: var(--h-gold2) !important;
   display: block;
   text-decoration: none !important;
   font-family: 'Cinzel Decorative', serif;
   transition: color 0.25s, text-shadow 0.25s;
  font-size: 18px;
}
  font-weight: 900;
a:hover {
  letter-spacing: 5px;
   color: var(--h-gold3) !important;
   background: linear-gradient(135deg, #8b5e1a 0%, #c8922a 35%, #f0d060 50%, #c8922a 65%, #8b5e1a 100%);
   text-shadow: 0 0 12px rgba(248,200,64,0.6) !important;
  background-size: 200% auto;
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hadesShimmer 4s linear infinite;
}
}
a.new, a.new:visited { color: var(--h-rose) !important; }
a.new:hover          { color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose) !important; }


/* ═══════════════════════════════════════════
/* Remove underline pseudo-element from previous theme if inherited */
  SECONDARY NAVIGATION (Main page nav)
a::after { display: none !important; }
═══════════════════════════════════════════ */
#mw-panel,
.vector-sidebar,
.mw-sidebar {
  background: linear-gradient(to bottom, rgba(20,8,0,0.95), rgba(10,4,0,0.98)) !important;
  border-right: 1px solid #2a1505 !important;
  padding-top: 16px !important;
}


/* Sidebar headings */
/* ── LAYOUT WRAPPER ────────────────────────────────────────── */
.portal h3,
#mw-page-base, #mw-head-base { background: var(--h-bg) !important; }
.mw-portlet h3,
#mw-wrapper, #content-wrapper { background: transparent !important; }
.vector-menu-heading {
  background: linear-gradient(to right, rgba(200,146,42,0.15), transparent) !important;
  border-left: 3px solid var(--hades-gold-bright) !important;
  border-bottom: 1px solid rgba(200,146,42,0.2) !important;
  color: var(--hades-gold-bright) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}


/* Sidebar links */
/* ── HEADER — safe; only colours, no structural changes ──── */
.portal ul li a,
#mw-head,
.mw-portlet ul li a,
.mw-header,
.vector-menu-content ul li a {
header#mw-header {
   color: var(--hades-gold-mid) !important;
   background: var(--h-panel) !important;
   font-family: 'IM Fell English', serif !important;
   border-bottom: 1px solid var(--h-border2) !important;
  font-size: 13px !important;
   box-shadow: 0 3px 24px rgba(0,0,0,0.7), 0 1px 0 rgba(200,134,10,0.15) !important;
  text-decoration: none !important;
   /* NO position/display/flex changes */
  padding: 4px 8px !important;
  display: block !important;
   border-radius: 2px !important;
  transition: all 0.2s ease !important;
   border-left: 2px solid transparent !important;
}
}


.portal ul li a:hover,
/* Site title */
.mw-portlet ul li a:hover,
#p-wiki-name a,
.vector-menu-content ul li a:hover {
.mw-wiki-title,
   color: var(--hades-gold-bright) !important;
.sitetitle,
   background: rgba(200,146,42,0.08) !important;
#site-navigation .wiki-title {
   border-left-color: var(--hades-gold-bright) !important;
   font-family: var(--h-font-title) !important;
   padding-left: 12px !important;
   color: var(--h-gold2) !important;
   font-size: 1.5em !important;
  text-shadow: var(--h-glow-gold) !important;
   letter-spacing: 0.06em !important;
}
}


/* ═══════════════════════════════════════════
/* ── SEARCH BAR — colour only, preserve structure ─────────── */
  SEARCH BAR
═══════════════════════════════════════════ */
#searchInput,
#searchInput,
#searchform input[type="search"],
input[name="search"],
.vector-search-box input {
.cdx-text-input__input,
   background: rgba(255,255,255,0.93) !important;
.mw-search-input {
   border: 1px solid #d4c4a0 !important;
   background: var(--h-bg3) !important;
  border-radius: 3px !important;
   border: 1px solid var(--h-border2) !important;
   color: #1a0800 !important;
   color: var(--h-text) !important;
   font-family: 'IM Fell English', serif !important;
   font-family: var(--h-font-body) !important;
   font-size: 13px !important;
   font-size: 0.95em !important;
   padding: 9px 14px 9px 38px !important;
   /* NO width/height/position changes */
   transition: all 0.3s ease !important;
   transition: border-color 0.2s, box-shadow 0.2s;
  animation: hadesSearchPulse 4s ease-in-out infinite !important;
}
}
#searchInput:focus,
#searchInput:focus,
.vector-search-box input:focus {
.cdx-text-input__input:focus {
   border-color: var(--hades-gold-bright) !important;
   border-color: var(--h-gold) !important;
   box-shadow: 0 0 0 3px rgba(200,146,42,0.2), 0 4px 20px rgba(0,0,0,0.4) !important;
   box-shadow: 0 0 10px rgba(200,134,10,0.4) !important;
   outline: none !important;
   outline: none !important;
}
}
/* Search button */
/* Search button */
#searchButton,
#searchButton,
.searchButton,
.cdx-button,
.vector-search-box button[type="submit"] {
.mw-search-button {
   background: linear-gradient(135deg, var(--hades-gold-bright), #8b5e1a) !important;
   background: var(--h-bg3) !important;
   border: none !important;
   border: 1px solid var(--h-border2) !important;
   color: #fff !important;
   color: var(--h-gold) !important;
   cursor: pointer !important;
   font-family: var(--h-font-label) !important;
   border-radius: 0 3px 3px 0 !important;
   font-size: 0.8em !important;
   transition: all 0.2s ease !important;
  letter-spacing: 0.05em;
  cursor: pointer;
   transition: all 0.2s;
}
}
#searchButton:hover,
#searchButton:hover,
.vector-search-box button[type="submit"]:hover {
.cdx-button:hover {
   background: linear-gradient(135deg, #f0d060, var(--hades-gold-bright)) !important;
   border-color: var(--h-gold) !important;
   box-shadow: 0 0 15px rgba(200,146,42,0.4) !important;
   box-shadow: var(--h-glow-gold) !important;
}
}


/* ═══════════════════════════════════════════
/* ── TOOLBAR (page tabs) — colour only ─────────────────────── */
  CANDLE DECORATION (Header pseudo-elements)
#p-views .mw-list-item a,
═══════════════════════════════════════════ */
.mw-portlet-views a,
#mw-head::before {
#p-cactions a,
  content: '🕯 🕯 🕯 🕯';
.vector-tab-noicon a {
  position: absolute;
   background: transparent !important;
   right: 20px;
   color: var(--h-text-dim) !important;
   top: 50%;
   font-family: var(--h-font-label) !important;
   transform: translateY(-50%);
   font-size: 0.78em !important;
   font-size: 24px;
   text-transform: uppercase;
   filter: drop-shadow(0 0 8px rgba(255,160,50,0.8));
  letter-spacing: 0.12em;
   animation: hadesCandle 1.8s ease-in-out infinite;
   border: 1px solid transparent !important;
   pointer-events: none;
   padding: 0.3em 0.7em !important;
   z-index: 10;
   transition: all 0.2s;
   letter-spacing: 4px;
   /* NO position/display changes */
}
}
 
#p-views .mw-list-item a:hover,
/* ═══════════════════════════════════════════
.mw-portlet-views a:hover {
  PAGE HEADINGS (h1, h2, h3, h4)
   background: rgba(200,134,10,0.08) !important;
═══════════════════════════════════════════ */
   border-color: var(--h-border2) !important;
/* Page title (h1) */
   color: var(--h-gold2) !important;
#firstHeading,
h1.firstHeading,
.page-header h1 {
  font-family: 'Cinzel Decorative', serif !important;
   font-size: clamp(24px, 5vw, 42px) !important;
   font-weight: 900 !important;
  color: var(--hades-gold-bright) !important;
   letter-spacing: 4px !important;
  animation: hadesGlow 4s ease-in-out infinite !important;
  border-bottom: 1px solid #3a2008 !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  position: relative;
}
}
 
#p-views .selected a,
#firstHeading::after {
.mw-portlet-views .selected a {
  content: '';
   background: rgba(200,134,10,0.12) !important;
  position: absolute;
   border-color: var(--h-gold-dim) !important;
  bottom: -1px;
   color: var(--h-gold2) !important;
   left: 0;
   width: 80px;
   height: 2px;
  background: linear-gradient(to right, var(--hades-gold-bright), transparent);
}
}


/* Section headings h2 */
/* ── SIDEBAR — colour only, NO dimension changes ───────────── */
h2 {
#mw-panel,
  font-family: 'Cinzel', serif !important;
.mw-sidebar,
   color: var(--hades-gold-bright) !important;
#sidebar,
  font-size: 18px !important;
#mw-navigation,
  font-weight: 700 !important;
.sidebar-inner {
  letter-spacing: 2px !important;
   background: var(--h-panel) !important;
   border-bottom: 1px solid #3a2008 !important;
   border-right: 1px solid var(--h-border) !important;
  padding-bottom: 8px !important;
   /* NO width/height/position changes */
  margin: 28px 0 14px !important;
   position: relative;
  transition: color 0.3s ease;
}
}


h2::before {
.mw-portlet,
   content: '⚜';
.portal,
   margin-right: 10px;
div.portal {
   opacity: 0.7;
  background: rgba(255,255,255,0.015) !important;
   font-size: 14px;
   border: 1px solid var(--h-border) !important;
   border-radius: 1px !important;
   margin-bottom: 0.8em !important;
   padding: 0.4em 0.5em !important;
}
}


h2:hover {
.mw-portlet h3, .portal h3, .mw-portlet-heading {
   color: #f0d060 !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.72em !important;
   color: var(--h-gold-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  text-shadow: none !important;
  border-bottom: 1px solid var(--h-border) !important;
  padding-bottom: 0.35em !important;
  margin-bottom: 0.35em !important;
}
}


h3 {
.mw-portlet ul li a,
   font-family: 'Cinzel', serif !important;
.portal ul li a {
  color: var(--hades-gold-mid) !important;
   font-family: var(--h-font-body) !important;
   font-size: 15px !important;
   font-size: 0.9em !important;
   font-weight: 600 !important;
   color: var(--h-text-dim) !important;
   letter-spacing: 1.5px !important;
   display: block;
   margin: 20px 0 10px !important;
   padding: 0.12em 0.4em !important;
   border-left: 3px solid rgba(200,146,42,0.4);
   transition: all 0.2s;
   padding-left: 10px;
   border-radius: 1px;
}
}
 
.mw-portlet ul li a:hover,
h4, h5, h6 {
.portal ul li a:hover {
   font-family: 'Cinzel', serif !important;
   background: rgba(200,134,10,0.07) !important;
   color: var(--hades-text-dim) !important;
   color: var(--h-gold) !important;
   letter-spacing: 1px !important;
  padding-left: 0.8em !important;
   text-shadow: 0 0 8px rgba(200,134,10,0.3) !important;
}
}
.mw-portlet ul li a::after { display: none !important; }


/* ═══════════════════════════════════════════
/* ── MAIN CONTENT AREA ──────────────────────────────────────── */
  BODY TEXT & PARAGRAPHS
#mw-content-text,
═══════════════════════════════════════════ */
.mw-body,
p, .mw-body p {
#content,
   font-family: 'IM Fell English', Georgia, serif !important;
.page-content {
   color: var(--hades-text-mid) !important;
   background: rgba(21, 14, 8, 0.9) !important;
   font-size: 14px !important;
   border: 1px solid var(--h-border) !important;
   line-height: 1.9 !important;
   box-shadow:
   margin-bottom: 14px !important;
    0 0 60px rgba(0,0,0,0.5),
    inset 0 0 80px rgba(0,0,0,0.3),
    0 0 0 3px rgba(200,134,10,0.04) !important;
   padding: 2em 2.2em !important;
   position: relative;
}
}


/* Lead paragraph */
/* Gothic arch corner ornaments */
.mw-body p:first-of-type {
#mw-content-text::before, #content::before {
   font-size: 14.5px !important;
   content: '';
   color: var(--hades-text-bright) !important;
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  border-top: 1px solid var(--h-gold-dim);
   border-left: 1px solid var(--h-gold-dim);
  pointer-events: none;
  opacity: 0.6;
}
}
 
#mw-content-text::after, #content::after {
/* Bold text */
   content: '';
b, strong {
  position: absolute;
   color: var(--hades-gold-bright) !important;
  bottom: 0; right: 0;
   font-family: 'Cinzel', serif !important;
  width: 48px; height: 48px;
   font-size: 0.95em;
  border-bottom: 1px solid var(--h-rose);
   letter-spacing: 0.5px;
   border-right: 1px solid var(--h-rose);
   pointer-events: none;
   opacity: 0.4;
}
}


/* Italic text */
/* ── TABLES ─────────────────────────────────────────────────── */
i, em {
table.wikitable,
   color: var(--hades-text-dim) !important;
table.wikitable > * > tr > th,
   font-style: italic !important;
table.wikitable > * > tr > td {
   background: rgba(21,14,8,0.92) !important;
  border-color: var(--h-border2) !important;
   color: var(--h-text) !important;
}
}
 
table.wikitable > * > tr > th {
/* ═══════════════════════════════════════════
  background: rgba(62,36,8,0.6) !important;
  LINKS
   font-family: var(--h-font-label) !important;
═══════════════════════════════════════════ */
   color: var(--h-gold2) !important;
a, a:visited {
   letter-spacing: 0.06em;
   color: var(--hades-gold-bright) !important;
   font-size: 0.88em;
   text-decoration: none !important;
   border-bottom: 1px dotted rgba(200,146,42,0.4) !important;
   transition: all 0.2s ease !important;
}
}
 
table.wikitable > * > tr:nth-child(even) > td {
a:hover {
   background: rgba(255,255,255,0.02) !important;
   color: #f0d060 !important;
  border-bottom-color: #f0d060 !important;
  text-shadow: 0 0 10px rgba(200,146,42,0.4) !important;
}
}
 
table.wikitable > * > tr:hover > td {
a.new, a.new:visited {
   background: rgba(200,134,10,0.05) !important;
   color: #a04040 !important;
  border-bottom-color: rgba(160,64,64,0.4) !important;
}
}


a.new:hover {
/* ── INFOBOXES ──────────────────────────────────────────────── */
   color: #d06060 !important;
.portable-infobox,
aside.portable-infobox,
table.infobox,
.infobox {
  background: var(--h-bg2) !important;
  border: 1px solid var(--h-border2) !important;
  font-family: var(--h-font-body) !important;
   color: var(--h-text) !important;
  box-shadow:
    0 0 40px rgba(0,0,0,0.5),
    inset 0 0 30px rgba(0,0,0,0.2),
    0 0 0 1px rgba(200,134,10,0.08) !important;
  position: relative;
  overflow: hidden;
}
}
 
/* Warm candle glow at top of infobox */
/* External links */
.portable-infobox::before,
a.external {
table.infobox::before {
   background: none !important;
  content: '';
   padding-right: 0 !important;
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 80px;
   background: radial-gradient(ellipse, rgba(248,200,64,0.12) 0%, transparent 70%);
  pointer-events: none;
   animation: h-candle-glow 3s ease-in-out infinite;
}
}
 
.pi-title, .pi-header,
a.external::after {
.infobox caption, .infobox th[colspan] {
   content: ' ↗';
  background: rgba(62,36,8,0.7) !important;
   font-size: 0.75em;
  font-family: var(--h-font-head) !important;
   opacity: 0.6;
  color: var(--h-gold3) !important;
   text-shadow: var(--h-glow-candle) !important;
   font-size: 1em !important;
  text-align: center !important;
  padding: 0.7em !important;
   letter-spacing: 0.08em;
  border-bottom: 1px solid var(--h-border2) !important;
}
}
 
.pi-data-label, .infobox th {
/* ═══════════════════════════════════════════
   color: var(--h-gold) !important;
  TABLE OF CONTENTS
   font-family: var(--h-font-label) !important;
═══════════════════════════════════════════ */
   font-size: 0.78em !important;
#toc, .toc {
   text-transform: uppercase;
   background: linear-gradient(135deg, rgba(25,10,0,0.85), rgba(15,6,0,0.95)) !important;
   letter-spacing: 0.08em;
   border: 1px solid rgba(200,146,42,0.25) !important;
   background: rgba(0,0,0,0.2) !important;
   border-radius: 4px !important;
   padding: 16px !important;
   font-family: 'IM Fell English', serif !important;
   animation: hadesFloat 6s ease-in-out infinite !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}
}
 
.pi-data-value, .infobox td {
#toc h2, .toc h2,
   color: var(--h-text) !important;
#toctitle {
   border-color: var(--h-border) !important;
  font-family: 'Cinzel', serif !important;
   background: transparent !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
   color: var(--hades-gold-bright) !important;
   border-bottom: 1px solid rgba(200,146,42,0.3) !important;
  text-align: center !important;
  padding-bottom: 8px !important;
   margin-bottom: 10px !important;
}
}
.pi-image { border-bottom: 1px solid var(--h-border) !important; }


#toc h2::before,
/* ── TOC ─────────────────────────────────────────────────────── */
#toctitle::before {
#toc, .toc {
   content: '✦ ';
  background: rgba(21,14,8,0.95) !important;
  border: 1px solid var(--h-border2) !important;
  padding: 1em 1.4em !important;
   position: relative;
}
}
 
#toc::before, .toc::before {
#toc h2::after,
   content: '';
#toctitle::after {
  position: absolute;
   content: ' ✦';
  inset: 4px;
  border: 1px solid rgba(200,134,10,0.1);
  pointer-events: none;
}
}
 
.toctitle, #toc .toctitle {
.toc ul {
   font-family: var(--h-font-label) !important;
   list-style: none !important;
   color: var(--h-gold2) !important;
   padding-left: 8px !important;
   font-size: 0.82em !important;
   margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
}
.toc a { color: var(--h-text-dim) !important; font-family: var(--h-font-body) !important; }
.toc a:hover { color: var(--h-gold2) !important; }
.tocnumber { color: var(--h-text-muted) !important; }


.toc ul li a {
/* ── CATEGORIES ─────────────────────────────────────────────── */
   color: var(--hades-gold-mid) !important;
#catlinks, .catlinks {
   font-size: 13px !important;
   background: var(--h-bg2) !important;
   padding: 3px 6px !important;
  border-top: 1px solid var(--h-border) !important;
   display: block !important;
  font-family: var(--h-font-label) !important;
   border-radius: 2px !important;
   font-size: 0.78em !important;
   color: var(--h-text-muted) !important;
   margin-top: 2em !important;
   padding: 0.5em 1em !important;
  letter-spacing: 0.04em;
}
}
.catlinks a { color: var(--h-rose2) !important; }
.catlinks a:hover { color: var(--h-rose3) !important; }


.toc ul li a:hover {
/* ── EDIT INTERFACE ────────────────────────────────────────── */
   color: var(--hades-gold-bright) !important;
#toolbar, .wikiEditor-ui-toolbar {
   background: rgba(200,146,42,0.1) !important;
   background: var(--h-bg3) !important;
  border-bottom: none !important;
   border-color: var(--h-border) !important;
}
}
 
#wpTextbox1, textarea.mw-editTextarea {
.toc ul li .tocnumber {
   background: var(--h-mirror) !important;
   color: var(--hades-gold-dim) !important;
   color: var(--h-text) !important;
   margin-right: 6px;
   border: 1px solid var(--h-border2) !important;
}
 
/* ═══════════════════════════════════════════
  INFOBOXES & TABLES
═══════════════════════════════════════════ */
.infobox,
table.wikitable,
.wikitable {
  background: linear-gradient(135deg, rgba(20,8,0,0.9) 0%, rgba(12,5,0,0.95) 100%) !important;
   border: 1px solid rgba(200,146,42,0.3) !important;
  border-radius: 4px !important;
  color: var(--hades-text-mid) !important;
   font-family: 'IM Fell English', serif !important;
   font-family: 'IM Fell English', serif !important;
   font-size: 13px !important;
   font-size: 1em !important;
   box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
   caret-color: var(--h-gold);
   animation: hadesBorderPulse 5s ease-in-out infinite !important;
   line-height: 1.7;
  overflow: hidden !important;
}
}
#wpTextbox1:focus { border-color: var(--h-gold-dim) !important; outline: none !important; }
.wikiEditor-ui { background: var(--h-bg2) !important; }


.infobox caption,
/* ── BUTTONS ────────────────────────────────────────────────── */
.wikitable caption {
.mw-ui-button,
   font-family: 'Cinzel Decorative', serif !important;
input[type="submit"],
   font-size: 14px !important;
input[type="button"],
   font-weight: 700 !important;
button.mw-ui-button {
   color: var(--hades-gold-bright) !important;
   background: var(--h-bg3) !important;
   letter-spacing: 3px !important;
   color: var(--h-gold2) !important;
   padding: 12px 16px !important;
   border: 1px solid var(--h-border2) !important;
   background: linear-gradient(to right, rgba(200,146,42,0.15), rgba(200,146,42,0.05)) !important;
   font-family: var(--h-font-label) !important;
   border-bottom: 1px solid rgba(200,146,42,0.25) !important;
  font-size: 0.82em !important;
   letter-spacing: 0.1em;
  text-transform: uppercase;
   cursor: pointer;
   transition: all 0.25s;
  text-shadow: none !important;
   box-shadow: none !important;
}
}
 
.mw-ui-button:hover,
.infobox th, .wikitable th,
input[type="submit"]:hover {
.infobox td.infobox-label {
   background: rgba(200,134,10,0.12) !important;
   background: rgba(200,146,42,0.1) !important;
   border-color: var(--h-gold) !important;
   color: var(--hades-gold-muted) !important;
   box-shadow: var(--h-glow-gold) !important;
   font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(200,146,42,0.15) !important;
}
}
 
.mw-ui-button.mw-ui-primary {
.infobox td, .wikitable td,
   background: linear-gradient(135deg, rgba(62,36,8,0.8), rgba(100,58,18,0.6)) !important;
.infobox td.infobox-data {
   border-color: var(--h-gold) !important;
   color: var(--hades-text-mid) !important;
  padding: 8px 12px !important;
   border-bottom: 1px solid rgba(200,146,42,0.08) !important;
}
}


.wikitable tr:hover td {
/* ── MESSAGES / NOTICES ─────────────────────────────────────── */
   background: rgba(200,146,42,0.06) !important;
.mw-message-box, .warningbox, .ambox, .mbox-small {
   color: var(--hades-text-bright) !important;
   background: rgba(21,14,8,0.85) !important;
  border-left: 3px solid var(--h-gold-dim) !important;
   color: var(--h-text) !important;
  font-family: var(--h-font-body) !important;
}
}
.successbox { border-left-color: var(--h-rose) !important; }
.errorbox  { border-left-color: #6a1a1a !important; }


/* ═══════════════════════════════════════════
/* ── CODE ───────────────────────────────────────────────────── */
  INFOBOX IMAGE
code, pre, .mw-code {
═══════════════════════════════════════════ */
   background: rgba(0,0,0,0.55) !important;
.infobox-image,
   border: 1px solid var(--h-border) !important;
.infobox td:has(img) {
   font-family: 'Courier New', monospace !important;
  text-align: center !important;
   font-size: 0.9em !important;
  padding: 0 !important;
   color: var(--h-gold) !important;
   background: rgba(10,4,0,0.8) !important;
}
 
.infobox-image img {
   border-radius: 0 !important;
   box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
   transition: transform 0.4s ease, box-shadow 0.4s ease !important;
   max-width: 100% !important;
}
 
.infobox-image img:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 40px rgba(200,146,42,0.2), 0 4px 20px rgba(0,0,0,0.8) !important;
}
}
pre { padding: 1em !important; overflow-x: auto; }


/* ═══════════════════════════════════════════
/* ── DIFF ───────────────────────────────────────────────────── */
  MEDIA / IMAGES
table.diff td.diff-addedline  { background: rgba(168,72,88,0.08) !important; border-color: var(--h-rose) !important; }
═══════════════════════════════════════════ */
table.diff td.diff-deletedline { background: rgba(80,30,10,0.12) !important; border-color: var(--h-gold-dim) !important; }
.thumb {
ins { background: rgba(168,72,88,0.12) !important; color: var(--h-rose2) !important; }
  background: rgba(20,8,0,0.6) !important;
del { background: rgba(80,30,10,0.15) !important; color: var(--h-text-muted) !important; }
  border: 1px solid rgba(200,146,42,0.2) !important;
  padding: 6px !important;
  border-radius: 3px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}


.thumb:hover {
/* ── BLOCKQUOTE ─────────────────────────────────────────────── */
  border-color: rgba(200,146,42,0.6) !important;
  box-shadow: 0 0 20px rgba(200,146,42,0.15) !important;
}
 
.thumbcaption {
  color: var(--hades-text-dim) !important;
  font-family: 'IM Fell English', serif !important;
  font-style: italic !important;
  font-size: 12px !important;
  text-align: center !important;
  margin-top: 6px !important;
}
 
/* ═══════════════════════════════════════════
  BLOCKQUOTES & QUOTES
═══════════════════════════════════════════ */
blockquote {
blockquote {
  background: linear-gradient(135deg, rgba(30,12,0,0.6), rgba(20,8,0,0.4)) !important;
   border-left: 2px solid var(--h-gold-dim) !important;
  border: 1px solid rgba(200,146,42,0.2) !important;
   margin: 1.2em 0 !important;
   border-left: 3px solid var(--hades-gold-bright) !important;
   padding: 0.6em 1.2em !important;
  padding: 14px 18px !important;
   background: rgba(200,134,10,0.03) !important;
   margin: 20px 0 !important;
   color: var(--h-text-dim) !important;
   border-radius: 0 4px 4px 0 !important;
   font-style: italic;
   font-style: italic !important;
   font-family: var(--h-font-script) !important;
   color: var(--hades-text-bright) !important;
   font-size: 1.05em;
  animation: hadesBorderPulse 4s ease-in-out infinite !important;
  position: relative;
}
 
blockquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 12px;
   font-size: 48px;
  color: var(--hades-gold-bright);
  opacity: 0.3;
   font-family: 'Cinzel Decorative', serif;
  line-height: 1;
}
 
/* ═══════════════════════════════════════════
  LISTS
═══════════════════════════════════════════ */
ul li, ol li {
  color: var(--hades-text-mid) !important;
  font-family: 'IM Fell English', serif !important;
   font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 4px !important;
}
 
ul li::marker {
  color: var(--hades-gold-bright) !important;
  content: '✦  ';
}
 
ol li::marker {
  color: var(--hades-gold-muted) !important;
  font-family: 'Cinzel', serif;
  font-size: 11px;
}
}


/* ═══════════════════════════════════════════
/* ── HORIZONTAL RULES ───────────────────────────────────────── */
  HORIZONTAL RULES
═══════════════════════════════════════════ */
hr {
hr {
   border: none !important;
   border: none !important;
   height: 1px !important;
   height: 20px !important;
   background: linear-gradient(to right, transparent, var(--hades-gold-bright), transparent) !important;
  margin: 1.5em 0 !important;
  margin: 24px 0 !important;
   background:
   opacity: 0.5;
    linear-gradient(to right, transparent, var(--h-gold-dim), var(--h-gold), var(--h-gold-dim), transparent)
    center/100% 1px no-repeat,
    radial-gradient(circle, var(--h-gold) 0%, transparent 60%)
    center/12px 12px no-repeat !important;
   position: relative;
}
}
 
hr::after {
/* ═══════════════════════════════════════════
  content: '✦';
  EDIT SECTION BUTTONS
  position: absolute;
═══════════════════════════════════════════ */
  left: 50%; top: 50%;
.mw-editsection,
  transform: translate(-50%, -50%);
.editsection {
  color: var(--h-gold);
   font-family: 'Cinzel', serif !important;
   font-size: 0.8em;
   font-size: 10px !important;
   background: var(--h-bg2);
   letter-spacing: 1px !important;
  padding: 0 0.5em;
   text-shadow: var(--h-glow-gold);
  animation: h-flicker 5s infinite;
}
}


.mw-editsection a,
/* ── IMAGES ─────────────────────────────────────────────────── */
.editsection a {
.thumb, figure.mw-halign-right, figure.mw-halign-left {
   color: var(--hades-gold-dim) !important;
   background: var(--h-bg2) !important;
   border: 1px solid rgba(200,146,42,0.2) !important;
   border: 1px solid var(--h-border2) !important;
  border-radius: 2px !important;
   padding: 5px !important;
   padding: 1px 6px !important;
   box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
   font-size: 9px !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid rgba(200,146,42,0.2) !important;
  transition: all 0.2s ease !important;
}
}
 
.thumbcaption, figcaption {
.mw-editsection a:hover,
   color: var(--h-text-dim) !important;
.editsection a:hover {
   font-family: var(--h-font-script) !important;
   color: var(--hades-gold-bright) !important;
   font-size: 0.88em !important;
   border-color: rgba(200,146,42,0.6) !important;
  font-style: italic;
   background: rgba(200,146,42,0.08) !important;
  text-align: center;
}
}
 
img {
/* ═══════════════════════════════════════════
   filter: sepia(0.15) contrast(1.05);
  CATEGORIES
   transition: filter 0.4s;
═══════════════════════════════════════════ */
#catlinks, .catlinks {
   background: linear-gradient(135deg, rgba(20,8,0,0.8), rgba(12,5,0,0.9)) !important;
   border: 1px solid rgba(200,146,42,0.2) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  margin-top: 24px !important;
  font-family: 'IM Fell English', serif !important;
}
}
 
img:hover {
#catlinks a, .catlinks a {
   filter: sepia(0.0) contrast(1.08) brightness(1.05);
   color: var(--hades-gold-mid) !important;
  font-size: 12px !important;
}
}


#catlinks a:hover, .catlinks a:hover {
/* ── FOOTER ─────────────────────────────────────────────────── */
   color: var(--hades-gold-bright) !important;
#footer, .mw-footer {
  background: var(--h-panel) !important;
  border-top: 1px solid var(--h-border) !important;
   color: var(--h-text-muted) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.75em !important;
  letter-spacing: 0.06em;
  padding: 1em !important;
}
}
#footer a, .mw-footer a { color: var(--h-text-dim) !important; }
#footer a:hover { color: var(--h-gold) !important; }
#footer li { list-style: none !important; }


/* Category label */
/* ── AMBIENT DECO LAYER ─────────────────────────────────────── */
#catlinks > div::before,
.h-ambient {
.catlinks > div::before {
   position: fixed;
   content: '⚜ Categories: ';
   inset: 0;
   font-family: 'Cinzel', serif;
   pointer-events: none;
   font-size: 9px;
   z-index: 0;
   letter-spacing: 2px;
   overflow: hidden;
   color: var(--hades-gold-bright);
  text-transform: uppercase;
}
}
 
.h-candle-el {
/* ═══════════════════════════════════════════
   position: absolute;
  FOOTER
   pointer-events: none;
═══════════════════════════════════════════ */
   animation: h-float 8s ease-in-out infinite, h-flicker-opacity 3s ease-in-out infinite;
#footer, .mw-footer {
   background: linear-gradient(to top, #060200, #0d0500) !important;
   border-top: 1px solid #2a1505 !important;
   color: #4a3010 !important;
  font-family: 'IM Fell English', serif !important;
  padding: 24px 40px !important;
  text-align: center !important;
  position: relative !important;
}
}
 
.h-arch-el {
#footer::before {
  content: '';
   position: absolute;
   position: absolute;
   top: 0;
   pointer-events: none;
  left: 0;
   animation: h-arch-glow 6s ease-in-out infinite;
  right: 0;
   height: 1px;
  background: linear-gradient(to right, transparent, var(--hades-gold-bright), transparent);
}
}
 
.h-petal {
#footer a, .mw-footer a {
   position: absolute;
   color: #5a3e18 !important;
   pointer-events: none;
   font-family: 'Cinzel', serif !important;
   animation: h-petal-fall linear infinite;
   font-size: 10px !important;
  letter-spacing: 1px !important;
  border-bottom: 1px dotted #3a2508 !important;
}
}
 
.h-mote {
#footer a:hover, .mw-footer a:hover {
  position: absolute;
   color: var(--hades-gold-bright) !important;
  pointer-events: none;
   border-bottom-color: var(--hades-gold-bright) !important;
  width: 3px; height: 3px;
  border-radius: 50%;
   background: var(--h-gold3);
   animation: h-mote-drift ease-in-out infinite;
}
}
 
.h-damask-el {
#footer-icons { display: none !important; }
   position: absolute;
 
   pointer-events: none;
/* ═══════════════════════════════════════════
   animation: h-damask-spin 40s linear infinite;
  NOTIFICATION MESSAGES
   opacity: 0.06;
═══════════════════════════════════════════ */
.mw-message-box,
.successbox, .errorbox, .warningbox {
   border-radius: 4px !important;
   font-family: 'IM Fell English', serif !important;
   padding: 12px 16px !important;
   border-left: 3px solid !important;
}
}


.successbox {
/* ── ANIMATIONS ─────────────────────────────────────────────── */
   background: rgba(20,50,20,0.4) !important;
@keyframes h-float {
   border-color: #4a8a4a !important;
   0%, 100% { transform: translateY(0px) rotate(0deg); }
   color: #a0d0a0 !important;
   33%      { transform: translateY(-10px) rotate(1.5deg); }
   66%      { transform: translateY(-6px) rotate(-1deg); }
}
}


.errorbox {
@keyframes h-flicker {
   background: rgba(50,10,10,0.5) !important;
  0%, 85%, 100% { opacity: 0.8; }
   border-color: #8a2020 !important;
  87%            { opacity: 0.3; }
   color: #d08080 !important;
   89%            { opacity: 0.8; }
   91%            { opacity: 0.1; }
   93%            { opacity: 0.9; }
}
}


.warningbox {
@keyframes h-flicker-opacity {
   background: rgba(50,30,5,0.5) !important;
   0%, 100% { opacity: 0.12; }
   border-color: var(--hades-gold-muted) !important;
   40%      { opacity: 0.22; }
   color: var(--hades-text-mid) !important;
   60%      { opacity: 0.08; }
}
}


/* ═══════════════════════════════════════════
@keyframes h-title-flicker {
  DIFF PAGES (Editing)
  0%, 90%, 100% {
═══════════════════════════════════════════ */
    text-shadow: 0 0 30px rgba(248,200,64,0.6), 0 0 60px rgba(200,134,10,0.3), 2px 4px 8px rgba(0,0,0,0.9);
.diff-addedline {
  }
  background: rgba(30,60,30,0.3) !important;
  92% {
   color: #a0c080 !important;
    text-shadow: 0 0 15px rgba(248,200,64,0.3), 0 0 30px rgba(200,134,10,0.1), 2px 4px 8px rgba(0,0,0,0.9);
   }
  94% {
    text-shadow: 0 0 40px rgba(248,200,64,0.8), 0 0 80px rgba(200,134,10,0.4), 2px 4px 8px rgba(0,0,0,0.9);
  }
}
}


.diff-deletedline {
@keyframes h-candle-glow {
   background: rgba(60,15,15,0.4) !important;
   0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
   color: #c08080 !important;
   50%      { opacity: 0.5; transform: translateX(-50%) scale(1.15); }
}
}


.diff-context {
@keyframes h-breathe {
   background: rgba(20,8,0,0.4) !important;
   0%, 100% { opacity: 0.85; }
   color: var(--hades-text-dim) !important;
   50%      { opacity: 0.65; }
}
}


/* ═══════════════════════════════════════════
@keyframes h-arch-glow {
  EDIT TEXTAREA
   0%, 100% { filter: drop-shadow(0 0 8px rgba(200,134,10,0.15)); }
═══════════════════════════════════════════ */
   50%      { filter: drop-shadow(0 0 16px rgba(200,134,10,0.3)); }
#wpTextbox1, textarea.mw-editfont-monospace {
   background: rgba(15,6,0,0.95) !important;
   color: var(--hades-text-bright) !important;
  border: 1px solid rgba(200,146,42,0.3) !important;
  border-radius: 3px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  padding: 12px !important;
}
}


#wpTextbox1:focus {
@keyframes h-petal-fall {
   border-color: var(--hades-gold-bright) !important;
   0%  { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
   box-shadow: 0 0 0 3px rgba(200,146,42,0.15) !important;
   10%  { opacity: 0.6; }
  outline: none !important;
  90%  { opacity: 0.3; }
  100% { transform: translate(var(--drift, 30px), 110vh) rotate(var(--rot, 360deg)); opacity: 0; }
}
}


/* ═══════════════════════════════════════════
@keyframes h-mote-drift {
  BUTTONS
   0%  { transform: translate(0, 0); opacity: 0; }
═══════════════════════════════════════════ */
   10%  { opacity: 0.7; }
.mw-ui-button, .mw-htmlform-submit,
   90%  { opacity: 0.3; }
input[type="submit"], input[type="button"],
   100% { transform: translate(var(--mx, 20px), var(--my, -80px)); opacity: 0; }
button {
   background: linear-gradient(135deg, var(--hades-gold-bright), #8b5e1a) !important;
  border: 1px solid var(--hades-gold-bright) !important;
   color: #fff !important;
   font-family: 'Cinzel', serif !important;
   font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
}


.mw-ui-button:hover, input[type="submit"]:hover {
@keyframes h-damask-spin {
   background: linear-gradient(135deg, #f0d060, var(--hades-gold-bright)) !important;
   from { transform: rotate(0deg); }
   box-shadow: 0 0 20px rgba(200,146,42,0.4), 0 4px 12px rgba(0,0,0,0.4) !important;
   to   { transform: rotate(360deg); }
   transform: translateY(-1px) !important;
}
}


.mw-ui-button:active, input[type="submit"]:active {
@keyframes h-wax-drip {
   transform: translateY(0) !important;
  0%    { transform: scaleY(0); transform-origin: top; opacity: 1; }
  80%  { transform: scaleY(1); opacity: 1; }
   100%  { transform: scaleY(1); opacity: 0; }
}
}


/* Ripple on button click */
@keyframes h-flame-dance {
.mw-ui-button::after {
   0%, 100% { transform: scaleX(1) scaleY(1) rotate(-1deg); }
   content: '';
   25%      { transform: scaleX(0.9) scaleY(1.1) rotate(2deg); }
   position: absolute;
   50%       { transform: scaleX(1.1) scaleY(0.95) rotate(-2deg); }
  width: 20px;
   75%      { transform: scaleX(0.95) scaleY(1.05) rotate(1deg); }
  height: 20px;
  background: rgba(255,255,255,0.3);
   border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
   transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
}


.mw-ui-button:active::after {
@keyframes h-spin-slow {
   animation: hadesRipple 0.5s ease forwards;
   from { transform: rotate(0deg); }
}
   to  { transform: rotate(360deg); }
 
/* ═══════════════════════════════════════════
  SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d0500; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--hades-gold-bright), #4a2a08);
  border-radius: 4px;
  border: 1px solid #2a1005;
}
::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(to bottom, #f0d060, var(--hades-gold-bright));
}
 
/* ═══════════════════════════════════════════
  TEXT SELECTION
═══════════════════════════════════════════ */
::selection {
  background: rgba(200,146,42,0.35) !important;
   color: #fff !important;
}
 
/* ═══════════════════════════════════════════
  SPECIAL ARTICLE CLASSES (Main page)
═══════════════════════════════════════════ */
.hades-banner {
  background: linear-gradient(135deg, rgba(30,12,0,0.9), rgba(15,6,0,0.95));
  border: 1px solid rgba(200,146,42,0.3);
  border-radius: 4px;
  padding: 24px;
  text-align: center;
  margin-bottom: 28px;
  animation: hadesBorderPulse 4s ease-in-out infinite;
}
 
.hades-divider {
  text-align: center;
  color: var(--hades-gold-bright);
  font-size: 18px;
  letter-spacing: 12px;
  margin: 20px 0;
  opacity: 0.6;
}
}


.hades-quote {
@keyframes h-pulse-rose {
   font-family: 'IM Fell English', serif;
   0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(168,72,88,0.4)); }
  font-style: italic;
   50%      { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(208,128,144,0.6)); }
  font-size: 15px;
   color: var(--hades-text-dim);
  text-align: center;
  padding: 12px;
  position: relative;
}
}


/* ═══════════════════════════════════════════
/* ── UTILITY CLASSES ────────────────────────────────────────── */
  RESPONSIVE
.h-gold      { color: var(--h-gold2) !important; text-shadow: var(--h-glow-gold); }
═══════════════════════════════════════════ */
.h-rose      { color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose); }
@media (max-width: 768px) {
.h-cream      { color: var(--h-cream) !important; }
  #mw-head::before { display: none; }
.h-script    { font-family: var(--h-font-script) !important; }
  .mw-body { padding: 1em !important; }
.h-cinzel    { font-family: var(--h-font-head) !important; }
  #firstHeading { font-size: 24px !important; letter-spacing: 2px !important; }
.h-fraktur    { font-family: var(--h-font-title) !important; }
  h2 { font-size: 15px !important; }
.h-label      { font-family: var(--h-font-label) !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85em; }
  .infobox { float: none !important; width: 100% !important; }
.h-float      { animation: h-float 5s ease-in-out infinite !important; }
  #mw-panel, .vector-sidebar { display: none !important; }
.h-flicker    { animation: h-flicker 4s infinite !important; }
}
.h-glow-gold  { text-shadow: var(--h-glow-gold) !important; }
 
.h-glow-candle{ text-shadow: var(--h-glow-candle) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Latest revision as of 01:19, 15 April 2026

/* ================================================================
   H A D E S  —  MediaWiki:Common.css
   Based on the 2026 album "Hades"
   Baroque gothic  ·  candlelit mahogany  ·  rose-gold shrine
   ================================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=UnifrakturMaguntia&family=Playfair+Display+SC:wght@400;700&family=Petit+Formal+Script&display=swap');

/* ── ONLINEWEBFONTS ───────────────────────────────────────────── */
/* Rothenburg Decorative — ornate gothic caps */
@font-face {
  font-family: 'RothenburgDecorative';
  src: url('https://db.onlinewebfonts.com/t/a2a1ffe66c3aa67e462ccd5a66c56b62.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/a2a1ffe66c3aa67e462ccd5a66c56b62.woff') format('woff');
  font-display: swap;
}
/* MedievalSharp — blackletter decorative */
@font-face {
  font-family: 'MedievalSharp';
  src: url('https://db.onlinewebfonts.com/t/1e5a1c6a58aed05f7c23d8b6c4d22b1d.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/1e5a1c6a58aed05f7c23d8b6c4d22b1d.woff') format('woff');
  font-display: swap;
}
/* GothicUltraOT — heavy gothic */
@font-face {
  font-family: 'GothicUltra';
  src: url('https://db.onlinewebfonts.com/t/ec70a8b001c29e3f95b6f1b97049ef5e.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/ec70a8b001c29e3f95b6f1b97049ef5e.woff') format('woff');
  font-display: swap;
}
/* Cantique — baroque script serif */
@font-face {
  font-family: 'Cantique';
  src: url('https://db.onlinewebfonts.com/t/c8a7fd3c8c2ab2c21f7e7a44e3a12bfe.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/c8a7fd3c8c2ab2c21f7e7a44e3a12bfe.woff') format('woff');
  font-display: swap;
}

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* ── backgrounds */
  --h-bg:         #0b0704;
  --h-bg2:        #150e08;
  --h-bg3:        #1e1208;
  --h-panel:      #0f0905;
  --h-mirror:     #100808;

  /* ── borders */
  --h-border:     #3a1e0c;
  --h-border2:    #6b3a18;
  --h-border3:    #8a5a28;

  /* ── gold palette */
  --h-gold:       #c8860a;
  --h-gold2:      #e8b030;
  --h-gold3:      #f8d060;
  --h-gold-dim:   #7a4e10;
  --h-gold-deep:  #3e2408;

  /* ── rose / candle palette */
  --h-rose:       #a84858;
  --h-rose2:      #d08090;
  --h-rose3:      #f0b0c0;
  --h-candle:     #f8c840;
  --h-flame:      #ff7010;
  --h-wax:        #f2ede0;
  --h-wax2:       #d8d0c0;

  /* ── blue-lavender (hair accent) */
  --h-blue:       #6878a8;
  --h-blue2:      #90a0c8;

  /* ── text */
  --h-text:       #e0ceb0;
  --h-text-dim:   #9a7a50;
  --h-text-muted: #5a3e28;
  --h-cream:      #f0e8d0;

  /* ── glows */
  --h-glow-gold:  0 0 20px rgba(200, 134, 10, 0.55), 0 0 40px rgba(200, 134, 10, 0.2);
  --h-glow-rose:  0 0 16px rgba(208, 128, 144, 0.45);
  --h-glow-candle:0 0 24px rgba(248, 200, 64, 0.5), 0 0 50px rgba(248, 200, 64, 0.15);

  /* ── fonts */
  --h-font-title:   'UnifrakturMaguntia', 'RothenburgDecorative', cursive;
  --h-font-head:    'Cinzel Decorative', 'GothicUltra', serif;
  --h-font-subhead: 'Cinzel', 'Playfair Display SC', serif;
  --h-font-body:    'IM Fell English', 'Cormorant Garamond', serif;
  --h-font-label:   'Playfair Display SC', 'Cinzel', serif;
  --h-font-script:  'Petit Formal Script', 'Cantique', cursive;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
html {
  scrollbar-color: var(--h-border2) var(--h-bg2);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--h-bg2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--h-gold-dim), var(--h-border2));
  border-radius: 1px;
}

/* ── BODY & BASE ────────────────────────────────────────────── */
body {
  background-color: var(--h-bg) !important;
  color: var(--h-text) !important;
  font-family: var(--h-font-body) !important;
  font-size: 16px;
  line-height: 1.8;
  /* Damask background pattern + radial warm glow */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill:none;stroke:%23c8860a;stroke-width:0.4;opacity:0.07%7D%3C/style%3E%3C/defs%3E%3Cellipse class='d' cx='60' cy='30' rx='10' ry='18'/%3E%3Cellipse class='d' cx='60' cy='90' rx='10' ry='18'/%3E%3Cellipse class='d' cx='30' cy='60' rx='18' ry='10'/%3E%3Cellipse class='d' cx='90' cy='60' rx='18' ry='10'/%3E%3Cpath class='d' d='M60,12 Q72,30 60,48 Q48,30 60,12Z'/%3E%3Cpath class='d' d='M60,72 Q72,90 60,108 Q48,90 60,72Z'/%3E%3Cpath class='d' d='M12,60 Q30,72 48,60 Q30,48 12,60Z'/%3E%3Cpath class='d' d='M72,60 Q90,72 108,60 Q90,48 72,60Z'/%3E%3Ccircle class='d' cx='60' cy='60' r='6'/%3E%3Ccircle class='d' cx='30' cy='30' r='3'/%3E%3Ccircle class='d' cx='90' cy='30' r='3'/%3E%3Ccircle class='d' cx='30' cy='90' r='3'/%3E%3Ccircle class='d' cx='90' cy='90' r='3'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,134,10,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(168,72,88,0.06) 0%, transparent 60%);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,2 L14,9 L21,9 L15.5,13.5 L17.5,21 L12,16.5 L6.5,21 L8.5,13.5 L3,9 L10,9Z' fill='%23c8860a' opacity='0.7' stroke='%23e8b030' stroke-width='0.5'/%3E%3C/svg%3E") 12 12, auto;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9997;
}

/* Vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 110% 110% at 50% 50%,
    transparent 40%,
    rgba(5, 2, 0, 0.65) 100%
  );
  pointer-events: none;
  z-index: 9996;
  animation: h-breathe 8s ease-in-out infinite;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.firstHeading, #firstHeading, .mw-headline {
  font-family: var(--h-font-head) !important;
  color: var(--h-gold2) !important;
  text-shadow: var(--h-glow-gold) !important;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Page title — gothic grandeur */
h1, .firstHeading, #firstHeading {
  font-family: var(--h-font-title) !important;
  font-size: 2.6em !important;
  color: var(--h-gold3) !important;
  text-shadow:
    0 0 30px rgba(248,200,64,0.6),
    0 0 60px rgba(200,134,10,0.3),
    2px 4px 8px rgba(0,0,0,0.9) !important;
  border-bottom: none !important;
  padding-bottom: 0.4em !important;
  position: relative;
  /* Ornamental border under title */
  background-image:
    linear-gradient(to right, transparent, var(--h-gold-dim), var(--h-gold), var(--h-gold-dim), transparent);
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  animation: h-title-flicker 6s ease-in-out infinite;
}

/* Ornamental crown before/after title */
h1::before, #firstHeading::before {
  content: '✦';
  color: var(--h-gold);
  font-family: serif;
  margin-right: 0.4em;
  opacity: 0.8;
  animation: h-flicker 4s infinite;
  font-size: 0.55em;
  vertical-align: middle;
}
h1::after, #firstHeading::after {
  content: '✦';
  color: var(--h-gold);
  font-family: serif;
  margin-left: 0.4em;
  opacity: 0.8;
  animation: h-flicker 4s 0.5s infinite;
  font-size: 0.55em;
  vertical-align: middle;
}

h2 {
  font-size: 1.6em !important;
  border-bottom: 1px solid var(--h-border2) !important;
  padding-bottom: 0.25em !important;
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 60px; height: 1px;
  background: var(--h-gold);
  box-shadow: 0 0 8px var(--h-gold);
}
h3 { font-size: 1.3em !important; color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose) !important; }
h4 { font-size: 1.1em !important; color: var(--h-gold) !important; font-family: var(--h-font-subhead) !important; }

p {
  font-family: var(--h-font-body);
  color: var(--h-text);
  line-height: 1.85;
  margin-bottom: 1em;
}

/* First letter drop cap */
.mw-parser-output > p:first-of-type::first-letter {
  font-family: var(--h-font-title);
  font-size: 3.8em;
  float: left;
  line-height: 0.75;
  margin: 0.08em 0.1em 0 0;
  color: var(--h-gold2);
  text-shadow: var(--h-glow-gold);
}

/* ── LINKS ──────────────────────────────────────────────────── */
a, a:visited {
  color: var(--h-gold2) !important;
  text-decoration: none !important;
  transition: color 0.25s, text-shadow 0.25s;
}
a:hover {
  color: var(--h-gold3) !important;
  text-shadow: 0 0 12px rgba(248,200,64,0.6) !important;
}
a.new, a.new:visited { color: var(--h-rose) !important; }
a.new:hover          { color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose) !important; }

/* Remove underline pseudo-element from previous theme if inherited */
a::after { display: none !important; }

/* ── LAYOUT WRAPPER ────────────────────────────────────────── */
#mw-page-base, #mw-head-base { background: var(--h-bg) !important; }
#mw-wrapper, #content-wrapper { background: transparent !important; }

/* ── HEADER — safe; only colours, no structural changes ──── */
#mw-head,
.mw-header,
header#mw-header {
  background: var(--h-panel) !important;
  border-bottom: 1px solid var(--h-border2) !important;
  box-shadow: 0 3px 24px rgba(0,0,0,0.7), 0 1px 0 rgba(200,134,10,0.15) !important;
  /* NO position/display/flex changes */
}

/* Site title */
#p-wiki-name a,
.mw-wiki-title,
.sitetitle,
#site-navigation .wiki-title {
  font-family: var(--h-font-title) !important;
  color: var(--h-gold2) !important;
  font-size: 1.5em !important;
  text-shadow: var(--h-glow-gold) !important;
  letter-spacing: 0.06em !important;
}

/* ── SEARCH BAR — colour only, preserve structure ─────────── */
#searchInput,
input[name="search"],
.cdx-text-input__input,
.mw-search-input {
  background: var(--h-bg3) !important;
  border: 1px solid var(--h-border2) !important;
  color: var(--h-text) !important;
  font-family: var(--h-font-body) !important;
  font-size: 0.95em !important;
  /* NO width/height/position changes */
  transition: border-color 0.2s, box-shadow 0.2s;
}
#searchInput:focus,
.cdx-text-input__input:focus {
  border-color: var(--h-gold) !important;
  box-shadow: 0 0 10px rgba(200,134,10,0.4) !important;
  outline: none !important;
}
/* Search button */
#searchButton,
.cdx-button,
.mw-search-button {
  background: var(--h-bg3) !important;
  border: 1px solid var(--h-border2) !important;
  color: var(--h-gold) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.8em !important;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}
#searchButton:hover,
.cdx-button:hover {
  border-color: var(--h-gold) !important;
  box-shadow: var(--h-glow-gold) !important;
}

/* ── TOOLBAR (page tabs) — colour only ─────────────────────── */
#p-views .mw-list-item a,
.mw-portlet-views a,
#p-cactions a,
.vector-tab-noicon a {
  background: transparent !important;
  color: var(--h-text-dim) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.78em !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid transparent !important;
  padding: 0.3em 0.7em !important;
  transition: all 0.2s;
  /* NO position/display changes */
}
#p-views .mw-list-item a:hover,
.mw-portlet-views a:hover {
  background: rgba(200,134,10,0.08) !important;
  border-color: var(--h-border2) !important;
  color: var(--h-gold2) !important;
}
#p-views .selected a,
.mw-portlet-views .selected a {
  background: rgba(200,134,10,0.12) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-gold2) !important;
}

/* ── SIDEBAR — colour only, NO dimension changes ───────────── */
#mw-panel,
.mw-sidebar,
#sidebar,
#mw-navigation,
.sidebar-inner {
  background: var(--h-panel) !important;
  border-right: 1px solid var(--h-border) !important;
  /* NO width/height/position changes */
}

.mw-portlet,
.portal,
div.portal {
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: 1px !important;
  margin-bottom: 0.8em !important;
  padding: 0.4em 0.5em !important;
}

.mw-portlet h3, .portal h3, .mw-portlet-heading {
  font-family: var(--h-font-label) !important;
  font-size: 0.72em !important;
  color: var(--h-gold-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  text-shadow: none !important;
  border-bottom: 1px solid var(--h-border) !important;
  padding-bottom: 0.35em !important;
  margin-bottom: 0.35em !important;
}

.mw-portlet ul li a,
.portal ul li a {
  font-family: var(--h-font-body) !important;
  font-size: 0.9em !important;
  color: var(--h-text-dim) !important;
  display: block;
  padding: 0.12em 0.4em !important;
  transition: all 0.2s;
  border-radius: 1px;
}
.mw-portlet ul li a:hover,
.portal ul li a:hover {
  background: rgba(200,134,10,0.07) !important;
  color: var(--h-gold) !important;
  padding-left: 0.8em !important;
  text-shadow: 0 0 8px rgba(200,134,10,0.3) !important;
}
.mw-portlet ul li a::after { display: none !important; }

/* ── MAIN CONTENT AREA ──────────────────────────────────────── */
#mw-content-text,
.mw-body,
#content,
.page-content {
  background: rgba(21, 14, 8, 0.9) !important;
  border: 1px solid var(--h-border) !important;
  box-shadow:
    0 0 60px rgba(0,0,0,0.5),
    inset 0 0 80px rgba(0,0,0,0.3),
    0 0 0 3px rgba(200,134,10,0.04) !important;
  padding: 2em 2.2em !important;
  position: relative;
}

/* Gothic arch corner ornaments */
#mw-content-text::before, #content::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  border-top: 1px solid var(--h-gold-dim);
  border-left: 1px solid var(--h-gold-dim);
  pointer-events: none;
  opacity: 0.6;
}
#mw-content-text::after, #content::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 48px; height: 48px;
  border-bottom: 1px solid var(--h-rose);
  border-right: 1px solid var(--h-rose);
  pointer-events: none;
  opacity: 0.4;
}

/* ── TABLES ─────────────────────────────────────────────────── */
table.wikitable,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
  background: rgba(21,14,8,0.92) !important;
  border-color: var(--h-border2) !important;
  color: var(--h-text) !important;
}
table.wikitable > * > tr > th {
  background: rgba(62,36,8,0.6) !important;
  font-family: var(--h-font-label) !important;
  color: var(--h-gold2) !important;
  letter-spacing: 0.06em;
  font-size: 0.88em;
}
table.wikitable > * > tr:nth-child(even) > td {
  background: rgba(255,255,255,0.02) !important;
}
table.wikitable > * > tr:hover > td {
  background: rgba(200,134,10,0.05) !important;
}

/* ── INFOBOXES ──────────────────────────────────────────────── */
.portable-infobox,
aside.portable-infobox,
table.infobox,
.infobox {
  background: var(--h-bg2) !important;
  border: 1px solid var(--h-border2) !important;
  font-family: var(--h-font-body) !important;
  color: var(--h-text) !important;
  box-shadow:
    0 0 40px rgba(0,0,0,0.5),
    inset 0 0 30px rgba(0,0,0,0.2),
    0 0 0 1px rgba(200,134,10,0.08) !important;
  position: relative;
  overflow: hidden;
}
/* Warm candle glow at top of infobox */
.portable-infobox::before,
table.infobox::before {
  content: '';
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 80px;
  background: radial-gradient(ellipse, rgba(248,200,64,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: h-candle-glow 3s ease-in-out infinite;
}
.pi-title, .pi-header,
.infobox caption, .infobox th[colspan] {
  background: rgba(62,36,8,0.7) !important;
  font-family: var(--h-font-head) !important;
  color: var(--h-gold3) !important;
  text-shadow: var(--h-glow-candle) !important;
  font-size: 1em !important;
  text-align: center !important;
  padding: 0.7em !important;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--h-border2) !important;
}
.pi-data-label, .infobox th {
  color: var(--h-gold) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.78em !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0,0,0,0.2) !important;
}
.pi-data-value, .infobox td {
  color: var(--h-text) !important;
  border-color: var(--h-border) !important;
  background: transparent !important;
}
.pi-image { border-bottom: 1px solid var(--h-border) !important; }

/* ── TOC ─────────────────────────────────────────────────────── */
#toc, .toc {
  background: rgba(21,14,8,0.95) !important;
  border: 1px solid var(--h-border2) !important;
  padding: 1em 1.4em !important;
  position: relative;
}
#toc::before, .toc::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(200,134,10,0.1);
  pointer-events: none;
}
.toctitle, #toc .toctitle {
  font-family: var(--h-font-label) !important;
  color: var(--h-gold2) !important;
  font-size: 0.82em !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.toc a { color: var(--h-text-dim) !important; font-family: var(--h-font-body) !important; }
.toc a:hover { color: var(--h-gold2) !important; }
.tocnumber { color: var(--h-text-muted) !important; }

/* ── CATEGORIES ─────────────────────────────────────────────── */
#catlinks, .catlinks {
  background: var(--h-bg2) !important;
  border-top: 1px solid var(--h-border) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.78em !important;
  color: var(--h-text-muted) !important;
  margin-top: 2em !important;
  padding: 0.5em 1em !important;
  letter-spacing: 0.04em;
}
.catlinks a { color: var(--h-rose2) !important; }
.catlinks a:hover { color: var(--h-rose3) !important; }

/* ── EDIT INTERFACE ────────────────────────────────────────── */
#toolbar, .wikiEditor-ui-toolbar {
  background: var(--h-bg3) !important;
  border-color: var(--h-border) !important;
}
#wpTextbox1, textarea.mw-editTextarea {
  background: var(--h-mirror) !important;
  color: var(--h-text) !important;
  border: 1px solid var(--h-border2) !important;
  font-family: 'IM Fell English', serif !important;
  font-size: 1em !important;
  caret-color: var(--h-gold);
  line-height: 1.7;
}
#wpTextbox1:focus { border-color: var(--h-gold-dim) !important; outline: none !important; }
.wikiEditor-ui { background: var(--h-bg2) !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button.mw-ui-button {
  background: var(--h-bg3) !important;
  color: var(--h-gold2) !important;
  border: 1px solid var(--h-border2) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.82em !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  text-shadow: none !important;
  box-shadow: none !important;
}
.mw-ui-button:hover,
input[type="submit"]:hover {
  background: rgba(200,134,10,0.12) !important;
  border-color: var(--h-gold) !important;
  box-shadow: var(--h-glow-gold) !important;
}
.mw-ui-button.mw-ui-primary {
  background: linear-gradient(135deg, rgba(62,36,8,0.8), rgba(100,58,18,0.6)) !important;
  border-color: var(--h-gold) !important;
}

/* ── MESSAGES / NOTICES ─────────────────────────────────────── */
.mw-message-box, .warningbox, .ambox, .mbox-small {
  background: rgba(21,14,8,0.85) !important;
  border-left: 3px solid var(--h-gold-dim) !important;
  color: var(--h-text) !important;
  font-family: var(--h-font-body) !important;
}
.successbox { border-left-color: var(--h-rose) !important; }
.errorbox   { border-left-color: #6a1a1a !important; }

/* ── CODE ───────────────────────────────────────────────────── */
code, pre, .mw-code {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid var(--h-border) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.9em !important;
  color: var(--h-gold) !important;
}
pre { padding: 1em !important; overflow-x: auto; }

/* ── DIFF ───────────────────────────────────────────────────── */
table.diff td.diff-addedline   { background: rgba(168,72,88,0.08) !important; border-color: var(--h-rose) !important; }
table.diff td.diff-deletedline { background: rgba(80,30,10,0.12) !important; border-color: var(--h-gold-dim) !important; }
ins { background: rgba(168,72,88,0.12) !important; color: var(--h-rose2) !important; }
del { background: rgba(80,30,10,0.15) !important; color: var(--h-text-muted) !important; }

/* ── BLOCKQUOTE ─────────────────────────────────────────────── */
blockquote {
  border-left: 2px solid var(--h-gold-dim) !important;
  margin: 1.2em 0 !important;
  padding: 0.6em 1.2em !important;
  background: rgba(200,134,10,0.03) !important;
  color: var(--h-text-dim) !important;
  font-style: italic;
  font-family: var(--h-font-script) !important;
  font-size: 1.05em;
}

/* ── HORIZONTAL RULES ───────────────────────────────────────── */
hr {
  border: none !important;
  height: 20px !important;
  margin: 1.5em 0 !important;
  background:
    linear-gradient(to right, transparent, var(--h-gold-dim), var(--h-gold), var(--h-gold-dim), transparent)
    center/100% 1px no-repeat,
    radial-gradient(circle, var(--h-gold) 0%, transparent 60%)
    center/12px 12px no-repeat !important;
  position: relative;
}
hr::after {
  content: '✦';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--h-gold);
  font-size: 0.8em;
  background: var(--h-bg2);
  padding: 0 0.5em;
  text-shadow: var(--h-glow-gold);
  animation: h-flicker 5s infinite;
}

/* ── IMAGES ─────────────────────────────────────────────────── */
.thumb, figure.mw-halign-right, figure.mw-halign-left {
  background: var(--h-bg2) !important;
  border: 1px solid var(--h-border2) !important;
  padding: 5px !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
}
.thumbcaption, figcaption {
  color: var(--h-text-dim) !important;
  font-family: var(--h-font-script) !important;
  font-size: 0.88em !important;
  font-style: italic;
  text-align: center;
}
img {
  filter: sepia(0.15) contrast(1.05);
  transition: filter 0.4s;
}
img:hover {
  filter: sepia(0.0) contrast(1.08) brightness(1.05);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
#footer, .mw-footer {
  background: var(--h-panel) !important;
  border-top: 1px solid var(--h-border) !important;
  color: var(--h-text-muted) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.75em !important;
  letter-spacing: 0.06em;
  padding: 1em !important;
}
#footer a, .mw-footer a { color: var(--h-text-dim) !important; }
#footer a:hover { color: var(--h-gold) !important; }
#footer li { list-style: none !important; }

/* ── AMBIENT DECO LAYER ─────────────────────────────────────── */
.h-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.h-candle-el {
  position: absolute;
  pointer-events: none;
  animation: h-float 8s ease-in-out infinite, h-flicker-opacity 3s ease-in-out infinite;
}
.h-arch-el {
  position: absolute;
  pointer-events: none;
  animation: h-arch-glow 6s ease-in-out infinite;
}
.h-petal {
  position: absolute;
  pointer-events: none;
  animation: h-petal-fall linear infinite;
}
.h-mote {
  position: absolute;
  pointer-events: none;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--h-gold3);
  animation: h-mote-drift ease-in-out infinite;
}
.h-damask-el {
  position: absolute;
  pointer-events: none;
  animation: h-damask-spin 40s linear infinite;
  opacity: 0.06;
}

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes h-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1.5deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes h-flicker {
  0%, 85%, 100% { opacity: 0.8; }
  87%            { opacity: 0.3; }
  89%            { opacity: 0.8; }
  91%            { opacity: 0.1; }
  93%            { opacity: 0.9; }
}

@keyframes h-flicker-opacity {
  0%, 100% { opacity: 0.12; }
  40%       { opacity: 0.22; }
  60%       { opacity: 0.08; }
}

@keyframes h-title-flicker {
  0%, 90%, 100% {
    text-shadow: 0 0 30px rgba(248,200,64,0.6), 0 0 60px rgba(200,134,10,0.3), 2px 4px 8px rgba(0,0,0,0.9);
  }
  92% {
    text-shadow: 0 0 15px rgba(248,200,64,0.3), 0 0 30px rgba(200,134,10,0.1), 2px 4px 8px rgba(0,0,0,0.9);
  }
  94% {
    text-shadow: 0 0 40px rgba(248,200,64,0.8), 0 0 80px rgba(200,134,10,0.4), 2px 4px 8px rgba(0,0,0,0.9);
  }
}

@keyframes h-candle-glow {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.5; transform: translateX(-50%) scale(1.15); }
}

@keyframes h-breathe {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 0.65; }
}

@keyframes h-arch-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(200,134,10,0.15)); }
  50%       { filter: drop-shadow(0 0 16px rgba(200,134,10,0.3)); }
}

@keyframes h-petal-fall {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translate(var(--drift, 30px), 110vh) rotate(var(--rot, 360deg)); opacity: 0; }
}

@keyframes h-mote-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.3; }
  100% { transform: translate(var(--mx, 20px), var(--my, -80px)); opacity: 0; }
}

@keyframes h-damask-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes h-wax-drip {
  0%    { transform: scaleY(0); transform-origin: top; opacity: 1; }
  80%   { transform: scaleY(1); opacity: 1; }
  100%  { transform: scaleY(1); opacity: 0; }
}

@keyframes h-flame-dance {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(-1deg); }
  25%       { transform: scaleX(0.9) scaleY(1.1) rotate(2deg); }
  50%       { transform: scaleX(1.1) scaleY(0.95) rotate(-2deg); }
  75%       { transform: scaleX(0.95) scaleY(1.05) rotate(1deg); }
}

@keyframes h-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes h-pulse-rose {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(168,72,88,0.4)); }
  50%       { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(208,128,144,0.6)); }
}

/* ── UTILITY CLASSES ────────────────────────────────────────── */
.h-gold       { color: var(--h-gold2) !important; text-shadow: var(--h-glow-gold); }
.h-rose       { color: var(--h-rose2) !important; text-shadow: var(--h-glow-rose); }
.h-cream      { color: var(--h-cream) !important; }
.h-script     { font-family: var(--h-font-script) !important; }
.h-cinzel     { font-family: var(--h-font-head) !important; }
.h-fraktur    { font-family: var(--h-font-title) !important; }
.h-label      { font-family: var(--h-font-label) !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85em; }
.h-float      { animation: h-float 5s ease-in-out infinite !important; }
.h-flicker    { animation: h-flicker 4s infinite !important; }
.h-glow-gold  { text-shadow: var(--h-glow-gold) !important; }
.h-glow-candle{ text-shadow: var(--h-glow-candle) !important; }
Retrieved from "https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php?title=MediaWiki:Common.css&oldid=6"