MediaWiki:Common.css: Difference between revisions

From Skateboarding on the Pacific Ocean
King of the colours (talk | contribs)
Bureaucrats, Interface administrators, Administrators
4 edits
 
No edit summary
 
Line 1: Line 1:
/*
/*
=============================================================
* Willoughby Tucker, I'll Always Love You — MediaWiki Skin
  PREACHER'S DAUGHTER — MediaWiki Wiki Theme
* Ethel Cain, 2025
  Based on the 2022 album by Ethel Cain
* Compatible with: Timeless, Vector, MonoBook
  Southern Gothic · Dark Americana · Sacred & Profane
*
=============================================================
* Import fonts in your wiki's MediaWiki:Common.css or skin template:
  Install: Paste into MediaWiki:Common.css
* @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
  Pair with: MediaWiki:Common.js (see companion file)
*
=============================================================
* "the year everything changed forever"
*/
*/


/* ── 0. GOOGLE FONTS IMPORT ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel+Decorative:wght@400;700&display=swap');


/* ── 1. ROOT VARIABLES ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════
  WILLOUGHBY TUCKER, I'LL ALWAYS LOVE YOU
  MediaWiki Skin — Ethel Cain, 2025
  "the year everything changed forever"
  Palette: amber headlights, sepia dust, bone white,
  dried blood, fog-blue dusk, charcoal gospel
  ═══════════════════════════════════════════════════════ */
 
:root {
:root {
   --pd-bg:         #0e0a09;
   --amber:       #C8843A;
   --pd-bg-alt:     #150f0d;
   --amber-pale:   #E8C98A;
   --pd-bg-content: #1a1210;
   --amber-deep:   #7A4A1A;
   --pd-bg-sidebar: #110c0b;
   --amber-glow:   #F5DBA0;
   --pd-bg-header:   #0a0706;
   --sepia:       #8B6344;
 
   --sepia-dark:   #3E2A18;
   --pd-text:       #e8d9c0;
   --sepia-pale:   #D4B896;
   --pd-text-muted: #9e8b72;
   --bone:         #F2EDE0;
   --pd-text-faint: #5c4d3c;
   --bone-dark:   #DDD5C0;
 
   --dust:         #C4B49A;
   --pd-crimson:     #7a1c24;
   --parchment:   #FAF5EC;
   --pd-crimson-lt: #a82b37;
   --fog:         #B8C4CC;
   --pd-crimson-glow:#c0304050;
   --fog-deep:    #6A7D87;
   --pd-rose:       #b07080;
   --dusk:         #3A4A52;
   --pd-rose-lt:    #d09090;
   --ink:         #1A1410;
   --pd-gold:       #b08050;
   --dried-blood: #6B2A2A;
   --pd-gold-lt:     #d4a060;
   --dried-fade:   #9B4A3A;
   --pd-bone:       #f0e8d5;
   --gospel-dark: #2A1E12;
   --pd-ivory:       #fdf8f0;
   --vhs-flicker: rgba(200,132,58,0.06);
 
   --pd-border:     #3a2818;
   --pd-border-lt:   #5a3c22;


   --pd-font-display:  'Cinzel Decorative', 'Cinzel', serif;
   --font-title:  'IM Fell English', serif;
  --pd-font-heading:  'IM Fell English', 'Georgia', serif;
   --font-heading: 'Playfair Display', serif;
   --pd-font-body:     'EB Garamond', 'Georgia', serif;
   --font-body:    'Courier Prime', monospace;
   --pd-font-cinzel:    'Cinzel', serif;
   --font-ui:     'Special Elite', cursive;
   --pd-font-ui:       'EB Garamond', serif;


   --pd-shadow-deep:    0 8px 32px rgba(0,0,0,0.8);
   --sidebar-w:    260px;
   --pd-shadow-crimson: 0 0 18px rgba(122,28,36,0.35);
   --border-grain: 1px solid rgba(139,99,68,0.3);
   --pd-glow-link:     0 0 8px rgba(160,43,55,0.5);
   --border-amber: 1px solid rgba(200,132,58,0.5);
  --pd-transition:    0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
}


/* ── 2. BASE RESET & BODY ────────────────────────────────── */
/* ── Grain texture overlay ── */
html, body {
html::before {
   background-color: var(--pd-bg) !important;
   content: '';
   color: var(--pd-text) !important;
  position: fixed;
   font-family: var(--pd-font-body) !important;
   inset: 0;
   font-size: 18px !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
   line-height: 1.75 !important;
   pointer-events: none;
   -webkit-font-smoothing: antialiased;
   z-index: 9999;
   opacity: 0.6;
}
}


/* Aged parchment texture using CSS alone — horizontal grain */
/* ── VHS scanline ── */
body::before {
html::after {
   content: '';
   content: '';
   position: fixed;
   position: fixed;
   inset: 0;
   inset: 0;
   background-image:
   background: repeating-linear-gradient(
    repeating-linear-gradient(
    0deg,
      0deg,
    transparent,
      transparent,
    transparent 2px,
      transparent 2px,
    rgba(0,0,0,0.015) 2px,
      rgba(255,240,200,0.012) 2px,
    rgba(0,0,0,0.015) 4px
      rgba(255,240,200,0.012) 4px
  );
    );
   pointer-events: none;
   pointer-events: none;
   z-index: 9998;
   z-index: 9998;
}
}


/* ── 3. PAGE LAYOUT WRAPPERS ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
body {
  font-family: var(--font-body);
  background-color: var(--gospel-dark);
  color: var(--bone);
  min-height: 100vh;
  overflow-x: hidden;
}
 
/* ─────────────────────────────────────────────
  AMBIENT BACKGROUND — dusk gradient + fog
───────────────────────────────────────────── */
#mw-page-base {
#mw-page-base {
   background-color: var(--pd-bg-header) !important;
   position: fixed;
   background-image: linear-gradient(180deg, #050303 0%, var(--pd-bg-alt) 100%) !important;
  inset: 0;
  z-index: -2;
   background:
    radial-gradient(ellipse 80% 60% at 30% 80%, rgba(122,74,26,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(58,74,82,0.3) 0%, transparent 50%),
    linear-gradient(175deg, #0D0B08 0%, #1A1410 40%, #2A1E12 100%);
}
}


#mw-head-base {
/* ─────────────────────────────────────────────
   background-color: var(--pd-bg-header) !important;
  LAYOUT
───────────────────────────────────────────── */
#mw-wrapper {
   display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
}


#content,
/* ─────────────────────────────────────────────
.mw-body {
  HEADER — masthead
   background-color: var(--pd-bg-content) !important;
───────────────────────────────────────────── */
   color: var(--pd-text) !important;
#mw-head {
   border: 1px solid var(--pd-border) !important;
   grid-column: 1 / -1;
   border-top: 2px solid var(--pd-crimson) !important;
   position: relative;
   box-shadow: var(--pd-shadow-deep) !important;
   padding: 0;
   padding: 2rem 2.5rem !important;
   border-bottom: 1px solid rgba(200,132,58,0.25);
   overflow: hidden;
   background: linear-gradient(180deg, rgba(10,8,6,0.95) 0%, rgba(26,20,16,0.9) 100%);
}
}


/* Vignette border — gives content depth */
/* Amber horizon glow behind header */
.mw-body::after {
#mw-head::before {
   content: '';
   content: '';
   position: absolute;
   position: absolute;
   inset: 0;
   bottom: -1px;
   pointer-events: none;
  left: 0; right: 0;
   box-shadow: inset 0 0 80px rgba(0,0,0,0.45);
   height: 2px;
   background: linear-gradient(90deg,
    transparent 0%,
    var(--amber-deep) 20%,
    var(--amber) 50%,
    var(--amber-deep) 80%,
    transparent 100%
  );
  animation: horizon-pulse 4s ease-in-out infinite;
}
}


/* ── 4. SIDEBAR ──────────────────────────────────────────── */
@keyframes horizon-pulse {
#mw-panel,
  0%, 100% { opacity: 0.5; }
.vector-sidebar,
   50%      { opacity: 1; }
.mw-sidebar,
#mw-navigation,
.collapsible-nav {
  background-color: var(--pd-bg-sidebar) !important;
   border-right: 1px solid var(--pd-border) !important;
}
}


/* ── 5. LOGO ─────────────────────────────────────────────── */
.mw-head-inner {
#p-logo a {
   display: flex;
   display: block;
   align-items: center;
   filter: drop-shadow(0 0 12px rgba(122,28,36,0.6));
   justify-content: space-between;
   transition: filter var(--pd-transition);
  padding: 14px 28px;
}
  position: relative;
#p-logo a:hover {
   z-index: 1;
   filter: drop-shadow(0 0 22px rgba(160,43,55,0.85));
}
}


/* ── 6. SITE TITLE & HEADER ──────────────────────────────── */
/* Wiki wordmark */
#firstHeading,
#p-logo {
.mw-first-heading,
   display: flex;
.page-header h1 {
   flex-direction: column;
   font-family: var(--pd-font-display) !important;
   gap: 2px;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--pd-bone) !important;
   letter-spacing: 0.06em !important;
   text-shadow:
    0 0 30px rgba(160,43,55,0.4),
    0 2px 4px rgba(0,0,0,0.8) !important;
  border-bottom: 1px solid var(--pd-border) !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1.4rem !important;
  animation: pd-fadein 1.2s ease forwards;
}
}


/* ── 7. HEADINGS ─────────────────────────────────────────── */
#p-logo .site-name {
.mw-body-content h1,
  font-family: var(--font-title);
.mw-body-content h2,
  font-size: 22px;
.mw-body-content h3,
   color: var(--amber-pale);
.mw-body-content h4,
  letter-spacing: 0.04em;
.mw-body-content h5,
  line-height: 1;
.mw-body-content h6 {
   font-family: var(--pd-font-heading) !important;
   font-style: italic;
   font-style: italic;
  color: var(--pd-bone) !important;
   text-shadow: 0 0 30px rgba(200,132,58,0.4);
  letter-spacing: 0.03em;
   animation: amber-breathe 6s ease-in-out infinite;
   text-shadow: 0 1px 6px rgba(0,0,0,0.6);
   margin-top: 1.8em !important;
  margin-bottom: 0.5em !important;
}
}


.mw-body-content h2 {
@keyframes amber-breathe {
   font-size: 1.6rem !important;
   0%, 100% { text-shadow: 0 0 20px rgba(200,132,58,0.3); }
   border-bottom: 1px solid var(--pd-border-lt) !important;
   50%      { text-shadow: 0 0 40px rgba(200,132,58,0.6), 0 0 80px rgba(200,132,58,0.2); }
  padding-bottom: 0.3rem !important;
  position: relative;
}
}


/* Cross ornament before h2 */
#p-logo .site-tagline {
.mw-body-content h2 .mw-headline::before {
   font-family: var(--font-ui);
   content: '✝';
   font-size: 10px;
  font-style: normal;
   color: var(--sepia);
   font-family: serif;
   letter-spacing: 0.25em;
   color: var(--pd-crimson-lt);
   text-transform: uppercase;
   margin-right: 0.5em;
  font-size: 0.75em;
   vertical-align: middle;
  opacity: 0.75;
}
}


.mw-body-content h3 {
/* ── Top navigation tabs ── */
   font-size: 1.28rem !important;
#p-namespaces {
   color: var(--pd-text) !important;
   display: flex;
   gap: 0;
}
}


.mw-body-content h4,
#p-namespaces li {
.mw-body-content h5,
   list-style: none;
.mw-body-content h6 {
   font-family: var(--pd-font-cinzel) !important;
  font-style: normal !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pd-text-muted) !important;
}
}


/* ── 8. BODY TEXT ────────────────────────────────────────── */
#p-namespaces a {
.mw-body-content p,
  display: block;
.mw-body-content li,
   font-family: var(--font-ui);
.mw-body-content dd,
   font-size: 12px;
.mw-body-content dt {
   color: var(--dust);
   font-family: var(--pd-font-body) !important;
  text-decoration: none;
   font-size: 1rem !important;
  padding: 6px 14px;
   line-height: 1.8 !important;
  letter-spacing: 0.12em;
   color: var(--pd-text) !important;
   text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
}


/* Opening paragraph drop-cap */
#p-namespaces a:hover,
.mw-body-content > p:first-of-type::first-letter {
#p-namespaces li.selected a {
   font-family: var(--pd-font-cinzel) !important;
   color: var(--amber-pale);
   font-size: 4.2em !important;
   border-bottom-color: var(--amber);
  line-height: 0.75;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--pd-crimson-lt);
  text-shadow: 0 0 20px rgba(160,43,55,0.5);
  font-weight: 700;
}
}


/* ── 9. LINKS ────────────────────────────────────────────── */
/* ── Search bar ── */
a,
#p-search {
a:visited {
   position: relative;
   color: var(--pd-rose) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition:
    color var(--pd-transition),
    border-color var(--pd-transition),
    text-shadow var(--pd-transition) !important;
}
}


a:hover {
#searchInput {
   color: var(--pd-rose-lt) !important;
   font-family: var(--font-body);
   border-bottom-color: var(--pd-crimson-lt) !important;
  font-size: 13px;
   text-shadow: var(--pd-glow-link) !important;
  background: rgba(255,255,255,0.04);
   border: var(--border-grain);
  border-radius: 2px;
  color: var(--bone);
  padding: 7px 36px 7px 12px;
  width: 220px;
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
   caret-color: var(--amber);
}
}


a.new,
#searchInput::placeholder { color: var(--sepia); font-style: italic; }
a.new:visited {
 
  color: var(--pd-crimson-lt) !important;
#searchInput:focus {
  border-color: rgba(200,132,58,0.6);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(200,132,58,0.1), inset 0 0 20px rgba(200,132,58,0.05);
}
}


/* ── 10. NAVIGATION MENUS ────────────────────────────────── */
.search-btn {
/* Sidebar nav links */
  position: absolute;
#mw-panel .portal,
  right: 8px; top: 50%;
.vector-menu-content,
  transform: translateY(-50%);
.sidebar-toc {
  background: none; border: none;
   border: none !important;
  color: var(--amber);
   background: transparent !important;
  cursor: pointer;
  font-size: 14px;
   opacity: 0.7;
   transition: opacity 0.2s;
}
}
.search-btn:hover { opacity: 1; }


#mw-panel .portal h3,
/* ─────────────────────────────────────────────
.vector-menu-heading {
  SIDEBAR
   font-family: var(--pd-font-cinzel) !important;
───────────────────────────────────────────── */
  font-size: 0.72rem !important;
#mw-panel {
  font-weight: 600 !important;
   background: linear-gradient(180deg, rgba(16,11,7,0.98) 0%, rgba(26,20,12,0.95) 100%);
  letter-spacing: 0.18em !important;
   border-right: var(--border-grain);
   text-transform: uppercase !important;
   padding: 24px 0 40px;
  color: var(--pd-crimson-lt) !important;
   position: relative;
   border-bottom: 1px solid var(--pd-border) !important;
   overflow: hidden;
   padding-bottom: 0.3rem !important;
   margin: 1rem 0 0.4rem !important;
}
}


#mw-panel .portal ul li a,
/* Vertical amber strip */
.vector-menu-content li a {
#mw-panel::after {
   font-family: var(--pd-font-body) !important;
  content: '';
   font-size: 0.9rem !important;
   position: absolute;
   color: var(--pd-text-muted) !important;
   top: 0; right: 0;
   padding: 0.15rem 0 !important;
   width: 1px;
   transition: color var(--pd-transition), padding-left var(--pd-transition) !important;
   height: 100%;
   display: block !important;
   background: linear-gradient(180deg,
    transparent 0%,
    var(--amber-deep) 20%,
    var(--amber) 50%,
    var(--amber-deep) 80%,
    transparent 100%
  );
   opacity: 0.4;
  animation: sidebar-stripe 8s ease-in-out infinite;
}
}


#mw-panel .portal ul li a:hover,
@keyframes sidebar-stripe {
.vector-menu-content li a:hover {
   0%, 100% { opacity: 0.2; }
   color: var(--pd-rose-lt) !important;
   50%      { opacity: 0.6; }
   padding-left: 0.5rem !important;
  border-bottom: none !important;
  text-shadow: none !important;
}
}


/* ── 11. TOP NAVIGATION BAR ──────────────────────────────── */
/* Sidebar section */
#mw-head,
.portal {
.vector-header,
   margin: 0 0 24px;
#vector-page-toolbar,
   padding: 0 20px;
.vector-page-toolbar {
   background-color: var(--pd-bg-header) !important;
  border-bottom: 1px solid var(--pd-border) !important;
   box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}
}


/* Tabs (read/edit/history) */
.portal h3 {
#p-views .selected a,
   font-family: var(--font-ui);
#p-views li.selected a {
  font-size: 10px;
   background-color: var(--pd-bg-content) !important;
  letter-spacing: 0.28em;
   color: var(--pd-bone) !important;
  text-transform: uppercase;
   border-color: var(--pd-border-lt) var(--pd-border-lt) transparent !important;
   color: var(--amber);
   margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: var(--border-amber);
  position: relative;
}
}


#p-views li a {
/* Decorative cross on section headers */
  background-color: var(--pd-bg-sidebar) !important;
.portal h3::before {
  color: var(--pd-text-muted) !important;
   content: '✦';
   border: 1px solid var(--pd-border) !important;
   margin-right: 6px;
   font-family: var(--pd-font-cinzel) !important;
   font-size: 8px;
   font-size: 0.78rem !important;
   opacity: 0.7;
   letter-spacing: 0.08em !important;
  transition: background-color var(--pd-transition), color var(--pd-transition) !important;
}
}


#p-views li a:hover {
.portal ul { list-style: none; }
  background-color: var(--pd-crimson) !important;
 
  color: var(--pd-bone) !important;
.portal li {
  border-color: var(--pd-crimson) !important;
   margin: 2px 0;
  border-bottom: none !important;
   text-shadow: none !important;
}
}


/* Search box */
.portal a {
#searchInput,
   display: block;
#searchform input[type="search"],
   font-family: var(--font-body);
input#searchInput {
   font-size: 13px;
   background-color: #100b0a !important;
   color: var(--sepia-pale);
   color: var(--pd-text) !important;
   text-decoration: none;
   border: 1px solid var(--pd-border-lt) !important;
   padding: 5px 8px;
   font-family: var(--pd-font-body) !important;
   border-radius: 1px;
   font-size: 0.95rem !important;
   transition: color 0.25s, background 0.25s, padding-left 0.25s;
   padding: 0.35rem 0.7rem !important;
  border-left: 2px solid transparent;
   border-radius: 2px !important;
  position: relative;
   transition: border-color var(--pd-transition), box-shadow var(--pd-transition) !important;
}
}


#searchInput:focus {
.portal a::before {
   border-color: var(--pd-crimson-lt) !important;
   content: '';
   box-shadow: 0 0 0 2px rgba(122,28,36,0.3) !important;
  position: absolute;
   outline: none !important;
   left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(200,132,58,0.08);
   transition: width 0.3s ease;
}
}


#searchButton, button.searchButton {
.portal a:hover {
   background-color: var(--pd-crimson) !important;
   color: var(--amber-pale);
   color: var(--pd-bone) !important;
   padding-left: 14px;
   border: 1px solid var(--pd-crimson-lt) !important;
   border-left-color: var(--amber);
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  transition: background-color var(--pd-transition) !important;
}
}


#searchButton:hover {
.portal a:hover::before { width: 100%; }
   background-color: var(--pd-crimson-lt) !important;
 
/* Track list in sidebar — special styling */
.portal.tracklist li {
   counter-increment: track;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
}


/* ── 12. TABLE OF CONTENTS ───────────────────────────────── */
.portal.tracklist li::before {
#toc,
   content: counter(track, decimal-leading-zero);
.toc {
   font-family: var(--font-ui);
   background-color: rgba(14,10,9,0.7) !important;
   font-size: 10px;
   border: 1px solid var(--pd-border-lt) !important;
  color: var(--amber-deep);
   border-top: 2px solid var(--pd-crimson) !important;
   min-width: 20px;
   padding: 1rem 1.4rem !important;
   flex-shrink: 0;
   font-family: var(--pd-font-body) !important;
   counter-reset: none;
   box-shadow: var(--pd-shadow-deep) !important;
}
}


#toc .toctitle h2,
.portal.tracklist { counter-reset: track; }
.toc .toctitle h2 {
 
  font-family: var(--pd-font-cinzel) !important;
/* ─────────────────────────────────────────────
  font-size: 0.8rem !important;
  MAIN CONTENT AREA
  font-style: normal !important;
───────────────────────────────────────────── */
  letter-spacing: 0.15em !important;
#content {
  text-transform: uppercase !important;
   padding: 36px 48px 60px 40px;
   color: var(--pd-crimson-lt) !important;
   position: relative;
   border-bottom: none !important;
}
}


#toc .toctitle h2::before { content: '' !important; }
/* ── Page title ── */
#firstHeading {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  font-style: italic;
  color: var(--amber-pale);
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 40px rgba(200,132,58,0.3);
  animation: title-appear 1.2s ease both;
  position: relative;
}


.toc ul { margin: 0 !important; }
@keyframes title-appear {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.08em; }
  to  { opacity: 1; transform: translateY(0);  letter-spacing: 0.02em; }
}


.toc li a {
/* Decorative rule under title */
   color: var(--pd-text-muted) !important;
.mw-body-content > .page-header {
   font-size: 0.9rem !important;
   margin-bottom: 28px;
   border-bottom: none !important;
  padding-bottom: 20px;
   border-bottom: 1px solid rgba(139,99,68,0.3);
   position: relative;
}
}


.toc li a:hover {
.mw-body-content > .page-header::after {
   color: var(--pd-rose) !important;
   content: '';
   text-shadow: none !important;
  position: absolute;
  bottom: -1px; left: 0;
  width: 120px;
  height: 1px;
  background: var(--amber);
   animation: underline-grow 1s 0.5s ease both;
}
}


.toc .tocnumber {
@keyframes underline-grow {
   color: var(--pd-crimson-lt) !important;
   from { width: 0; opacity: 0; }
   font-family: var(--pd-font-cinzel) !important;
   to  { width: 120px; opacity: 1; }
  font-size: 0.8rem !important;
}
}


/* ── 13. TABLES ──────────────────────────────────────────── */
.page-subtitle {
.wikitable,
   font-family: var(--font-ui);
.mw-body-content table.wikitable {
   font-size: 11px;
   background-color: var(--pd-bg-alt) !important;
   color: var(--sepia);
   border: 1px solid var(--pd-border-lt) !important;
   letter-spacing: 0.2em;
  border-collapse: collapse !important;
  text-transform: uppercase;
   color: var(--pd-text) !important;
   margin-top: 4px;
   box-shadow: var(--pd-shadow-deep) !important;
   font-family: var(--pd-font-body) !important;
}
}


.wikitable th {
/* ── Body text ── */
  background-color: #1e1210 !important;
.mw-body-content p {
  color: var(--pd-bone) !important;
   font-family: var(--font-body);
   font-family: var(--pd-font-cinzel) !important;
   font-size: 15px;
   font-size: 0.8rem !important;
   line-height: 1.85;
   letter-spacing: 0.1em !important;
   color: var(--bone-dark);
   text-transform: uppercase !important;
   margin-bottom: 1.2em;
  border: 1px solid var(--pd-border-lt) !important;
   animation: para-fade 0.6s ease both;
   padding: 0.6rem 1rem !important;
   border-top: 2px solid var(--pd-crimson) !important;
}
}


.wikitable td {
@keyframes para-fade {
   border: 1px solid var(--pd-border) !important;
   from { opacity: 0; transform: translateY(4px); }
   padding: 0.5rem 0.9rem !important;
   to  { opacity: 1; transform: translateY(0); }
}
}


.wikitable tr:hover td {
/* Stagger paragraphs */
  background-color: rgba(122,28,36,0.08) !important;
.mw-body-content p:nth-child(2) { animation-delay: 0.05s; }
  transition: background-color 0.2s ease !important;
.mw-body-content p:nth-child(3) { animation-delay: 0.1s; }
}
.mw-body-content p:nth-child(4) { animation-delay: 0.15s; }
.mw-body-content p:nth-child(5) { animation-delay: 0.2s; }


/* ── 14. BLOCKQUOTES ─────────────────────────────────────── */
/* ── Headings ── */
blockquote,
.mw-body-content h2 {
.mw-body-content blockquote {
   font-family: var(--font-heading);
   border-left: 3px solid var(--pd-crimson-lt) !important;
   font-size: 22px;
   background-color: rgba(10,7,6,0.6) !important;
   font-weight: 600;
   color: var(--pd-text-muted) !important;
   color: var(--amber-pale);
   font-family: var(--pd-font-heading) !important;
   margin: 2.2em 0 0.7em;
   font-style: italic !important;
   padding-bottom: 8px;
  font-size: 1.1rem !important;
   border-bottom: var(--border-grain);
   padding: 0.8rem 1.5rem !important;
   margin: 1.5rem 0 !important;
   position: relative;
   position: relative;
}
}


blockquote::before {
.mw-body-content h2::before {
   content: '\201C';
   content: '§';
  font-family: var(--pd-font-display) !important;
   color: var(--amber-deep);
  font-size: 4rem;
   margin-right: 8px;
   color: var(--pd-crimson);
   font-style: italic;
   position: absolute;
  top: -0.5rem;
  left: 0.5rem;
   line-height: 1;
  opacity: 0.4;
}
}


/* ── 15. CATEGORIES ──────────────────────────────────────── */
.mw-body-content h3 {
#catlinks {
   font-family: var(--font-heading);
   background-color: var(--pd-bg-sidebar) !important;
   font-size: 17px;
   border: 1px solid var(--pd-border) !important;
   font-weight: 400;
   border-top: 1px solid var(--pd-border-lt) !important;
   font-style: italic;
   color: var(--pd-text-muted) !important;
   color: var(--sepia-pale);
   font-family: var(--pd-font-cinzel) !important;
   margin: 1.8em 0 0.5em;
   font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  padding: 0.5rem 1rem !important;
  margin-top: 1.5rem !important;
}
}


#catlinks a {
.mw-body-content h4 {
   color: var(--pd-text-muted) !important;
   font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 1.5em 0 0.4em;
}
}


#catlinks a:hover {
/* ── Links ── */
   color: var(--pd-rose) !important;
.mw-body-content a {
   color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,132,58,0.3);
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}
}


/* ── 16. FOOTER ──────────────────────────────────────────── */
.mw-body-content a:hover {
#footer {
   color: var(--amber-pale);
   background-color: var(--pd-bg) !important;
   border-bottom-color: var(--amber-pale);
   border-top: 1px solid var(--pd-border) !important;
   text-shadow: 0 0 20px rgba(200,132,58,0.4);
  color: var(--pd-text-faint) !important;
   font-family: var(--pd-font-cinzel) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1.2rem 2rem !important;
}
}


#footer a {
/* ── Infobox / article sidebar ── */
   color: var(--pd-text-faint) !important;
.infobox {
   border-bottom: none !important;
   float: right;
  clear: right;
  margin: 0 0 24px 28px;
  width: 240px;
  background: rgba(26,20,12,0.9);
  border: var(--border-grain);
  border-top: 2px solid var(--amber);
   font-size: 13px;
  animation: infobox-in 0.8s 0.3s ease both;
  position: relative;
  overflow: hidden;
}
}


#footer a:hover {
@keyframes infobox-in {
   color: var(--pd-text-muted) !important;
   from { opacity: 0; transform: translateX(12px); }
   text-shadow: none !important;
   to  { opacity: 1; transform: translateX(0); }
}
}


#footer-icons { opacity: 0.4; filter: grayscale(1); }
/* Subtle amber corner accent */
 
.infobox::after {
/* ── 17. EDIT BUTTONS & SECTION EDIT ────────────────────── */
   content: '';
.mw-editsection a,
   position: absolute;
.mw-editsection-bracket {
   top: 0; right: 0;
   color: var(--pd-text-faint) !important;
   border-left: 16px solid transparent;
   font-family: var(--pd-font-cinzel) !important;
   border-top: 16px solid var(--amber);
   font-size: 0.65rem !important;
  opacity: 0.5;
   letter-spacing: 0.1em !important;
   border-bottom: none !important;
}
}


.mw-editsection a:hover {
.infobox-title {
   color: var(--pd-rose) !important;
  font-family: var(--font-heading);
   text-shadow: none !important;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  background: rgba(200,132,58,0.12);
   color: var(--amber-pale);
   padding: 10px 12px;
  border-bottom: var(--border-grain);
}
}


/* ── 18. INFOBOXES ───────────────────────────────────────── */
.infobox table { width: 100%; border-collapse: collapse; }
.infobox,
.infobox td {
table.infobox {
   padding: 6px 12px;
  background-color: #120e0c !important;
   vertical-align: top;
  border: 1px solid var(--pd-border-lt) !important;
   border-bottom: 1px solid rgba(139,99,68,0.15);
  border-top: 3px solid var(--pd-crimson) !important;
   color: var(--pd-text) !important;
   font-family: var(--pd-font-body) !important;
   box-shadow: var(--pd-shadow-deep) !important;
}
}


.infobox th,
.infobox td:first-child {
table.infobox th {
   font-family: var(--font-ui);
  background-color: #1a1010 !important;
   font-size: 10px;
  color: var(--pd-rose-lt) !important;
   letter-spacing: 0.1em;
   font-family: var(--pd-font-cinzel) !important;
   text-transform: uppercase;
   font-size: 0.78rem !important;
  color: var(--amber-deep);
   letter-spacing: 0.08em !important;
  white-space: nowrap;
   text-transform: uppercase !important;
  padding-right: 8px;
}
}


.infobox caption,
.infobox td:last-child {
table.infobox caption {
   color: var(--bone-dark);
  font-family: var(--pd-font-display) !important;
   font-size: 13px;
   color: var(--pd-bone) !important;
   font-size: 1.05rem !important;
  padding: 0.5rem !important;
}
}


/* ── 19. MESSAGE BOXES (warning, notice, etc.) ───────────── */
/* ── Hatnotes / notices ── */
.mbox-text,
.hatnote {
.ambox td,
   font-family: var(--font-body);
.tmbox td {
  font-size: 13px;
   font-family: var(--pd-font-body) !important;
  font-style: italic;
   color: var(--pd-text-muted) !important;
   color: var(--fog);
  background: rgba(106,125,135,0.08);
  border-left: 3px solid var(--fog-deep);
  padding: 10px 16px;
  margin-bottom: 20px;
  border-radius: 0 2px 2px 0;
}
}


.ambox,
/* ── Blockquote / pull quote ── */
.tmbox,
.mw-body-content blockquote {
.cmbox {
   border-left: 3px solid var(--amber);
   background-color: #0f0b0a !important;
   padding: 12px 20px;
  border: 1px solid var(--pd-border-lt) !important;
  margin: 24px 0;
   border-left: 4px solid var(--pd-crimson) !important;
  background: rgba(200,132,58,0.05);
  position: relative;
}
}


/* ── 20. CODE & PRE ──────────────────────────────────────── */
.mw-body-content blockquote::before {
code, pre, .mw-code {
   content: '\201C';
   background-color: #0a0706 !important;
   font-family: var(--font-title);
   color: var(--pd-rose-lt) !important;
  font-size: 48px;
   border: 1px solid var(--pd-border) !important;
   color: var(--amber-deep);
   font-family: 'Courier New', monospace !important;
   position: absolute;
   font-size: 0.85rem !important;
  top: -8px; left: 12px;
   border-radius: 2px !important;
   line-height: 1;
   opacity: 0.6;
}
}


/* ── 21. SCROLLBAR ───────────────────────────────────────── */
.mw-body-content blockquote p {
::-webkit-scrollbar {
   font-style: italic;
   width: 8px;
  color: var(--sepia-pale);
   height: 8px;
   padding-left: 20px;
}
}


::-webkit-scrollbar-track {
/* ── Tables ── */
   background: var(--pd-bg);
.wikitable {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 13px;
   background: rgba(26,20,12,0.6);
  border: var(--border-grain);
  animation: table-in 0.6s ease both;
}
}


::-webkit-scrollbar-thumb {
@keyframes table-in {
   background: var(--pd-border-lt);
   from { opacity: 0; }
   border-radius: 0;
   to  { opacity: 1; }
}
}


::-webkit-scrollbar-thumb:hover {
.wikitable th {
   background: var(--pd-crimson);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(200,132,58,0.12);
  color: var(--amber);
  padding: 10px 14px;
   border: var(--border-grain);
  text-align: left;
}
}


/* ── 22. TEXT SELECTION ──────────────────────────────────── */
.wikitable td {
::selection {
  color: var(--bone-dark);
   background-color: rgba(122,28,36,0.45) !important;
  padding: 8px 14px;
   color: var(--pd-bone) !important;
   border: 1px solid rgba(139,99,68,0.2);
   line-height: 1.6;
}
}


/* ── 23. HORIZONTAL RULES ────────────────────────────────── */
.wikitable tr:hover td {
hr, .mw-body-content hr {
   background: rgba(200,132,58,0.05);
   border: none !important;
  border-top: 1px solid var(--pd-border-lt) !important;
  margin: 2rem 0 !important;
  position: relative;
}
}


hr::after {
/* Track numbers in table */
   content: '✦ ✝ ✦';
.wikitable td.track-num {
   display: block;
  font-family: var(--font-ui);
   font-size: 11px;
   color: var(--amber-deep);
   text-align: center;
   text-align: center;
  color: var(--pd-crimson-lt);
   width: 40px;
  font-size: 0.7rem;
  margin-top: -0.65rem;
  background: var(--pd-bg-content);
   width: 6rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.4em;
}
}


/* ── 24. IMAGE CAPTIONS ──────────────────────────────────── */
/* ── Categories ── */
.mw-body-content .thumbcaption,
#catlinks {
.thumbcaption {
   margin-top: 40px;
   color: var(--pd-text-muted) !important;
  padding-top: 16px;
   font-family: var(--pd-font-heading) !important;
   border-top: var(--border-grain);
  font-style: italic !important;
   font-size: 12px;
   font-size: 0.88rem !important;
  text-align: center;
}
}


.thumb,
#catlinks h2 {
.mw-body-content .thumb {
  display: inline;
   border: 1px solid var(--pd-border) !important;
   font-family: var(--font-ui);
   background-color: var(--pd-bg) !important;
   font-size: 10px;
   padding: 3px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-deep);
   border-bottom: none;
  margin: 0 8px 0 0;
  font-weight: normal;
}
}


/* ── 25. DIFF / HISTORY VIEWS ────────────────────────────── */
#catlinks h2::before { display: none; }
table.diff {
  background-color: var(--pd-bg-content) !important;
  font-family: var(--pd-font-body) !important;
  font-size: 0.9rem !important;
}


td.diff-addedline {
#catlinks a {
   background-color: rgba(30,60,20,0.35) !important;
  color: var(--sepia);
   border-bottom: 1px solid rgba(139,99,68,0.2);
  margin: 0 4px;
  font-size: 12px;
}
}


td.diff-deletedline {
#catlinks a:hover { color: var(--amber-pale); }
  background-color: rgba(90,20,20,0.35) !important;
}


td.diff-context {
/* ── Edit toolbar / page actions ── */
   background-color: var(--pd-bg-alt) !important;
#p-views {
   color: var(--pd-text-muted) !important;
   display: flex;
   gap: 0;
  align-items: center;
}
}


/* ── 26. PAGE STATUS INDICATORS ──────────────────────────── */
#p-views li { list-style: none; }
.mw-indicators {
  font-family: var(--pd-font-cinzel) !important;
  font-size: 0.7rem !important;
  color: var(--pd-text-faint) !important;
  letter-spacing: 0.1em !important;
}


/* ── 27. PRINT MEDIA ─────────────────────────────────────── */
#p-views a {
@media print {
  font-family: var(--font-ui);
   body {
  font-size: 11px;
    background: white !important;
   letter-spacing: 0.12em;
    color: black !important;
  text-transform: uppercase;
    font-family: Georgia, serif !important;
  color: var(--sepia);
   }
  text-decoration: none;
   #mw-panel, #mw-head, #footer, #catlinks { display: none !important; }
  padding: 8px 12px;
  display: block;
   transition: color 0.2s, background 0.2s;
   border-left: 1px solid rgba(139,99,68,0.15);
}
}


/* ── 28. CORE ANIMATIONS (used by JS too) ────────────────── */
#p-views a:hover {
 
   color: var(--amber-pale);
@keyframes pd-fadein {
   background: rgba(200,132,58,0.08);
   from { opacity: 0; transform: translateY(8px); }
   to  { opacity: 1; transform: translateY(0); }
}
}


@keyframes pd-flickerA {
#p-views li.selected a {
  0%,100% { opacity:1;    text-shadow: 0 0 30px rgba(160,43,55,0.45), 0 2px 4px rgba(0,0,0,.8); }
   color: var(--amber);
  8%      { opacity:.95; text-shadow: 0 0 26px rgba(160,43,55,0.3),  0 2px 4px rgba(0,0,0,.8); }
  16%      { opacity:1;  text-shadow: 0 0 35px rgba(160,43,55,0.55), 0 2px 4px rgba(0,0,0,.8); }
   30%      { opacity:.97; text-shadow: 0 0 28px rgba(160,43,55,0.38), 0 2px 4px rgba(0,0,0,.8); }
  56%      { opacity:1;  text-shadow: 0 0 32px rgba(160,43,55,0.5),  0 2px 4px rgba(0,0,0,.8); }
  79%      { opacity:.96; text-shadow: 0 0 22px rgba(160,43,55,0.28), 0 2px 4px rgba(0,0,0,.8); }
}
}


@keyframes pd-flickerB {
/* ─────────────────────────────────────────────
   0%,100% { opacity:.82; }
  FOOTER
   20%    { opacity:.75; }
───────────────────────────────────────────── */
   45%    { opacity:.85; }
#footer {
   70%    { opacity:.78; }
  grid-column: 1 / -1;
  padding: 20px 28px;
  border-top: var(--border-grain);
   background: rgba(10,8,6,0.95);
  display: flex;
  justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
}
}


@keyframes pd-crimsonPulse {
.footer-links {
   0%,100% { box-shadow: 0 0 6px rgba(122,28,36,0.2), inset 0 0 6px rgba(122,28,36,0.05); }
   display: flex;
   50%    { box-shadow: 0 0 16px rgba(122,28,36,0.5), inset 0 0 12px rgba(122,28,36,0.12); }
  gap: 0;
  list-style: none;
   flex-wrap: wrap;
}
}


@keyframes pd-crossFade {
.footer-links a {
   0%,100% { opacity: 0.04; }
   font-family: var(--font-ui);
   50%    { opacity: 0.07; }
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia-dark);
  text-decoration: none;
  padding: 0 10px;
  border-right: 1px solid rgba(139,99,68,0.2);
   transition: color 0.2s;
}
}


@keyframes pd-dust {
.footer-links li:last-child a { border-right: none; }
  0%  { transform: translateY(-10px) translateX(0px) rotate(0deg); opacity: 0; }
.footer-links a:hover { color: var(--amber); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(100vh) translateX(40px) rotate(360deg); opacity: 0; }
}


@keyframes pd-slideUp {
.footer-copy {
   from { opacity: 0; transform: translateY(20px); }
   font-family: var(--font-body);
   to   { opacity: 1; transform: translateY(0); }
   font-size: 11px;
   font-style: italic;
  color: var(--sepia-dark);
}
}


/* ── 29. ANIMATED CLASSES APPLIED BY JS ──────────────────── */
/* ─────────────────────────────────────────────
  TIMELESS SKIN COMPATIBILITY OVERRIDES
  (Timeless uses these selectors)
───────────────────────────────────────────── */
.mw-header { display: contents; }
.mw-body { display: contents; }
.content-container { display: contents; }
.sidebar-chunk { margin-bottom: 20px; }


/* Main heading flicker */
/* Timeless search form */
.pd-flicker {
#searchform { display: flex; align-items: center; gap: 0; }
   animation: pd-flickerA 8s ease-in-out infinite !important;
#searchform button[type="submit"] {
  background: rgba(200,132,58,0.15);
  border: var(--border-grain);
  border-left: none;
   color: var(--amber);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
}
}
#searchform button[type="submit"]:hover { background: rgba(200,132,58,0.25); }


/* Sidebar nav glow pulse */
/* ─────────────────────────────────────────────
.pd-pulse-border {
  JS-POWERED EFFECTS
  animation: pd-crimsonPulse 4s ease-in-out infinite !important;
───────────────────────────────────────────── */
}


/* Content slide-up reveal */
/* Cursor trail dot */
.pd-reveal {
.cursor-dot {
   animation: pd-slideUp 0.9s cubic-bezier(0.4,0,0.2,1) both;
   position: fixed;
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  box-shadow: 0 0 12px 3px rgba(200,132,58,0.4);
}
}


/* Background cross watermark */
/* Static for demo below */
#pd-watermark {
.cursor-ring {
   position: fixed;
   position: fixed;
   top: 50%;
   width: 28px; height: 28px;
   left: 50%;
  border: 1px solid rgba(200,132,58,0.4);
  border-radius: 50%;
   pointer-events: none;
  z-index: 10000;
  opacity: 0;
   transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   font-size: 32vw;
   transition: opacity 0.5s, width 0.2s, height 0.2s, border-color 0.2s;
  color: rgba(122,28,36,0.035);
  pointer-events: none;
  z-index: 1;
  user-select: none;
  font-family: serif;
  animation: pd-crossFade 12s ease-in-out infinite;
  line-height: 1;
}
}


/* Dust particle canvas */
/* Dust particle canvas */
#pd-dust-canvas {
#dust-canvas {
   position: fixed;
   position: fixed;
   top: 0; left: 0;
   inset: 0;
   width: 100%; height: 100%;
   z-index: 1;
   pointer-events: none;
   pointer-events: none;
  z-index: 9999;
   opacity: 0.35;
   opacity: 0.55;
}
}


/* ── 30. VECTOR 2 / MODERN SKIN OVERRIDES ─────────────────── */
/* Page load vignette */
.vector-toc-pinned-container,
.vignette {
.vector-toc {
  position: fixed;
   background-color: var(--pd-bg-sidebar) !important;
  inset: 0;
   border: 1px solid var(--pd-border) !important;
  z-index: 9997;
   background: radial-gradient(ellipse at center, transparent 50%, rgba(10,8,6,0.7) 100%);
   pointer-events: none;
}
}


.vector-toc .vector-toc-level-1 .vector-toc-link {
/* Flicker animation for the whole page on load */
   color: var(--pd-text-muted) !important;
@keyframes vhs-flicker {
   font-family: var(--pd-font-body) !important;
  0%  { opacity: 0; }
  5%  { opacity: 0.9; }
  6%  { opacity: 0.3; }
   8%  { opacity: 1; }
   100% { opacity: 1; }
}
}


.vector-toc-link:hover {
#mw-wrapper { animation: vhs-flicker 1.4s ease both; }
   color: var(--pd-rose) !important;
 
/* Link hover glow pulse */
@keyframes link-glow {
   0%  { text-shadow: 0 0 8px rgba(200,132,58,0.3); }
  50%  { text-shadow: 0 0 20px rgba(200,132,58,0.6), 0 0 40px rgba(200,132,58,0.2); }
  100% { text-shadow: 0 0 8px rgba(200,132,58,0.3); }
}
}


.vector-toc-current-anchor .vector-toc-link {
.mw-body-content a:hover { animation: link-glow 1.5s ease-in-out infinite; }
   color: var(--pd-rose-lt) !important;
 
   border-left: 2px solid var(--pd-crimson) !important;
/* ── Scroll-reveal ── */
.scroll-reveal {
   opacity: 0;
  transform: translateY(16px);
   transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
}


/* Top toolbar Vector 2 */
/* ── Static noise flicker on hover for headings ── */
.vector-header-container {
.mw-body-content h2:hover {
   background-color: var(--pd-bg-header) !important;
   animation: text-static 0.15s steps(2) 3;
  border-bottom: 1px solid var(--pd-border) !important;
}
}


/* Main menu icon */
@keyframes text-static {
.mw-ui-icon-wikimedia-menu::before {
  0%  { letter-spacing: 0.01em; opacity: 0.8; }
   filter: invert(0.6) sepia(1) saturate(0.5) !important;
  50%  { letter-spacing: 0.04em; opacity: 1; }
   100% { letter-spacing: 0.01em; opacity: 0.8; }
}
}


/* ── 31. SPECIAL PAGE OVERRIDES ──────────────────────────── */
/* ── Typewriter cursor on search ── */
#mw-content-text .mw-special-Preferences input[type="text"],
#searchInput:focus::placeholder {
#mw-content-text input,
   animation: type-cursor 0.8s steps(1) infinite;
#mw-content-text select,
}
#mw-content-text textarea {
@keyframes type-cursor {
   background-color: #0e0a09 !important;
   0%, 100% { opacity: 1; }
  color: var(--pd-text) !important;
   50%      { opacity: 0; }
   border: 1px solid var(--pd-border-lt) !important;
   font-family: var(--pd-font-body) !important;
}
}


/* ── 32. MOBILE / RESPONSIVE ─────────────────────────────── */
/* ── Ripple on sidebar link click ── */
@media (max-width: 720px) {
.portal a {
   .mw-body {
   overflow: hidden;
    padding: 1rem 1.2rem !important;
}
  }


   #firstHeading, .mw-first-heading {
/* ── Loading bar (amber progress) ── */
    font-size: 1.6rem !important;
#loading-bar {
   }
   position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber), var(--amber-pale));
  z-index: 99999;
  width: 0%;
  transition: width 0.4s ease;
   box-shadow: 0 0 8px rgba(200,132,58,0.6);
}


  .mw-body-content > p:first-of-type::first-letter {
/* ─────────────────────────────────────────────
    font-size: 3.2em !important;
  DEMO PAGE CHROME
   }
  (for preview only — not part of actual skin)
 
───────────────────────────────────────────── */
   #pd-watermark {
.demo-label {
    font-size: 60vw;
  position: fixed;
   }
  bottom: 20px; right: 20px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--amber-deep);
  z-index: 9990;
   opacity: 0.6;
}
}

Latest revision as of 10:57, 16 April 2026

/*
 * Willoughby Tucker, I'll Always Love You — MediaWiki Skin
 * Ethel Cain, 2025
 * Compatible with: Timeless, Vector, MonoBook
 *
 * Import fonts in your wiki's MediaWiki:Common.css or skin template:
 * @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
 *
 * "the year everything changed forever"
 */


/* ═══════════════════════════════════════════════════════
   WILLOUGHBY TUCKER, I'LL ALWAYS LOVE YOU
   MediaWiki Skin — Ethel Cain, 2025
   "the year everything changed forever"
   Palette: amber headlights, sepia dust, bone white,
   dried blood, fog-blue dusk, charcoal gospel
   ═══════════════════════════════════════════════════════ */

:root {
  --amber:        #C8843A;
  --amber-pale:   #E8C98A;
  --amber-deep:   #7A4A1A;
  --amber-glow:   #F5DBA0;
  --sepia:        #8B6344;
  --sepia-dark:   #3E2A18;
  --sepia-pale:   #D4B896;
  --bone:         #F2EDE0;
  --bone-dark:    #DDD5C0;
  --dust:         #C4B49A;
  --parchment:    #FAF5EC;
  --fog:          #B8C4CC;
  --fog-deep:     #6A7D87;
  --dusk:         #3A4A52;
  --ink:          #1A1410;
  --dried-blood:  #6B2A2A;
  --dried-fade:   #9B4A3A;
  --gospel-dark:  #2A1E12;
  --vhs-flicker:  rgba(200,132,58,0.06);

  --font-title:   'IM Fell English', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Courier Prime', monospace;
  --font-ui:      'Special Elite', cursive;

  --sidebar-w:    260px;
  --border-grain: 1px solid rgba(139,99,68,0.3);
  --border-amber: 1px solid rgba(200,132,58,0.5);
}

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

/* ── VHS scanline ── */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background-color: var(--gospel-dark);
  color: var(--bone);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────
   AMBIENT BACKGROUND — dusk gradient + fog
───────────────────────────────────────────── */
#mw-page-base {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 30% 80%, rgba(122,74,26,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(58,74,82,0.3) 0%, transparent 50%),
    linear-gradient(175deg, #0D0B08 0%, #1A1410 40%, #2A1E12 100%);
}

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
#mw-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────
   HEADER — masthead
───────────────────────────────────────────── */
#mw-head {
  grid-column: 1 / -1;
  position: relative;
  padding: 0;
  border-bottom: 1px solid rgba(200,132,58,0.25);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,8,6,0.95) 0%, rgba(26,20,16,0.9) 100%);
}

/* Amber horizon glow behind header */
#mw-head::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--amber-deep) 20%,
    var(--amber) 50%,
    var(--amber-deep) 80%,
    transparent 100%
  );
  animation: horizon-pulse 4s ease-in-out infinite;
}

@keyframes horizon-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.mw-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  position: relative;
  z-index: 1;
}

/* Wiki wordmark */
#p-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#p-logo .site-name {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--amber-pale);
  letter-spacing: 0.04em;
  line-height: 1;
  font-style: italic;
  text-shadow: 0 0 30px rgba(200,132,58,0.4);
  animation: amber-breathe 6s ease-in-out infinite;
}

@keyframes amber-breathe {
  0%, 100% { text-shadow: 0 0 20px rgba(200,132,58,0.3); }
  50%       { text-shadow: 0 0 40px rgba(200,132,58,0.6), 0 0 80px rgba(200,132,58,0.2); }
}

#p-logo .site-tagline {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--sepia);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ── Top navigation tabs ── */
#p-namespaces {
  display: flex;
  gap: 0;
}

#p-namespaces li {
  list-style: none;
}

#p-namespaces a {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--dust);
  text-decoration: none;
  padding: 6px 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

#p-namespaces a:hover,
#p-namespaces li.selected a {
  color: var(--amber-pale);
  border-bottom-color: var(--amber);
}

/* ── Search bar ── */
#p-search {
  position: relative;
}

#searchInput {
  font-family: var(--font-body);
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  border: var(--border-grain);
  border-radius: 2px;
  color: var(--bone);
  padding: 7px 36px 7px 12px;
  width: 220px;
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  caret-color: var(--amber);
}

#searchInput::placeholder { color: var(--sepia); font-style: italic; }

#searchInput:focus {
  border-color: rgba(200,132,58,0.6);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(200,132,58,0.1), inset 0 0 20px rgba(200,132,58,0.05);
}

.search-btn {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--amber);
  cursor: pointer;
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.search-btn:hover { opacity: 1; }

/* ─────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────── */
#mw-panel {
  background: linear-gradient(180deg, rgba(16,11,7,0.98) 0%, rgba(26,20,12,0.95) 100%);
  border-right: var(--border-grain);
  padding: 24px 0 40px;
  position: relative;
  overflow: hidden;
}

/* Vertical amber strip */
#mw-panel::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--amber-deep) 20%,
    var(--amber) 50%,
    var(--amber-deep) 80%,
    transparent 100%
  );
  opacity: 0.4;
  animation: sidebar-stripe 8s ease-in-out infinite;
}

@keyframes sidebar-stripe {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.6; }
}

/* Sidebar section */
.portal {
  margin: 0 0 24px;
  padding: 0 20px;
}

.portal h3 {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: var(--border-amber);
  position: relative;
}

/* Decorative cross on section headers */
.portal h3::before {
  content: '✦';
  margin-right: 6px;
  font-size: 8px;
  opacity: 0.7;
}

.portal ul { list-style: none; }

.portal li {
  margin: 2px 0;
}

.portal a {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sepia-pale);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 1px;
  transition: color 0.25s, background 0.25s, padding-left 0.25s;
  border-left: 2px solid transparent;
  position: relative;
}

.portal a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(200,132,58,0.08);
  transition: width 0.3s ease;
}

.portal a:hover {
  color: var(--amber-pale);
  padding-left: 14px;
  border-left-color: var(--amber);
}

.portal a:hover::before { width: 100%; }

/* Track list in sidebar — special styling */
.portal.tracklist li {
  counter-increment: track;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.portal.tracklist li::before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--amber-deep);
  min-width: 20px;
  flex-shrink: 0;
  counter-reset: none;
}

.portal.tracklist { counter-reset: track; }

/* ─────────────────────────────────────────────
   MAIN CONTENT AREA
───────────────────────────────────────────── */
#content {
  padding: 36px 48px 60px 40px;
  position: relative;
}

/* ── Page title ── */
#firstHeading {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  font-style: italic;
  color: var(--amber-pale);
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 40px rgba(200,132,58,0.3);
  animation: title-appear 1.2s ease both;
  position: relative;
}

@keyframes title-appear {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.08em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.02em; }
}

/* Decorative rule under title */
.mw-body-content > .page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(139,99,68,0.3);
  position: relative;
}

.mw-body-content > .page-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 120px;
  height: 1px;
  background: var(--amber);
  animation: underline-grow 1s 0.5s ease both;
}

@keyframes underline-grow {
  from { width: 0; opacity: 0; }
  to   { width: 120px; opacity: 1; }
}

.page-subtitle {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--sepia);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Body text ── */
.mw-body-content p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--bone-dark);
  margin-bottom: 1.2em;
  animation: para-fade 0.6s ease both;
}

@keyframes para-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger paragraphs */
.mw-body-content p:nth-child(2) { animation-delay: 0.05s; }
.mw-body-content p:nth-child(3) { animation-delay: 0.1s; }
.mw-body-content p:nth-child(4) { animation-delay: 0.15s; }
.mw-body-content p:nth-child(5) { animation-delay: 0.2s; }

/* ── Headings ── */
.mw-body-content h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--amber-pale);
  margin: 2.2em 0 0.7em;
  padding-bottom: 8px;
  border-bottom: var(--border-grain);
  position: relative;
}

.mw-body-content h2::before {
  content: '§';
  color: var(--amber-deep);
  margin-right: 8px;
  font-style: italic;
}

.mw-body-content h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--sepia-pale);
  margin: 1.8em 0 0.5em;
}

.mw-body-content h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 1.5em 0 0.4em;
}

/* ── Links ── */
.mw-body-content a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,132,58,0.3);
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

.mw-body-content a:hover {
  color: var(--amber-pale);
  border-bottom-color: var(--amber-pale);
  text-shadow: 0 0 20px rgba(200,132,58,0.4);
}

/* ── Infobox / article sidebar ── */
.infobox {
  float: right;
  clear: right;
  margin: 0 0 24px 28px;
  width: 240px;
  background: rgba(26,20,12,0.9);
  border: var(--border-grain);
  border-top: 2px solid var(--amber);
  font-size: 13px;
  animation: infobox-in 0.8s 0.3s ease both;
  position: relative;
  overflow: hidden;
}

@keyframes infobox-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Subtle amber corner accent */
.infobox::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border-left: 16px solid transparent;
  border-top: 16px solid var(--amber);
  opacity: 0.5;
}

.infobox-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-style: italic;
  text-align: center;
  background: rgba(200,132,58,0.12);
  color: var(--amber-pale);
  padding: 10px 12px;
  border-bottom: var(--border-grain);
}

.infobox table { width: 100%; border-collapse: collapse; }
.infobox td {
  padding: 6px 12px;
  vertical-align: top;
  border-bottom: 1px solid rgba(139,99,68,0.15);
}

.infobox td:first-child {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-deep);
  white-space: nowrap;
  padding-right: 8px;
}

.infobox td:last-child {
  color: var(--bone-dark);
  font-size: 13px;
}

/* ── Hatnotes / notices ── */
.hatnote {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--fog);
  background: rgba(106,125,135,0.08);
  border-left: 3px solid var(--fog-deep);
  padding: 10px 16px;
  margin-bottom: 20px;
  border-radius: 0 2px 2px 0;
}

/* ── Blockquote / pull quote ── */
.mw-body-content blockquote {
  border-left: 3px solid var(--amber);
  padding: 12px 20px;
  margin: 24px 0;
  background: rgba(200,132,58,0.05);
  position: relative;
}

.mw-body-content blockquote::before {
  content: '\201C';
  font-family: var(--font-title);
  font-size: 48px;
  color: var(--amber-deep);
  position: absolute;
  top: -8px; left: 12px;
  line-height: 1;
  opacity: 0.6;
}

.mw-body-content blockquote p {
  font-style: italic;
  color: var(--sepia-pale);
  padding-left: 20px;
}

/* ── Tables ── */
.wikitable {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 13px;
  background: rgba(26,20,12,0.6);
  border: var(--border-grain);
  animation: table-in 0.6s ease both;
}

@keyframes table-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wikitable th {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(200,132,58,0.12);
  color: var(--amber);
  padding: 10px 14px;
  border: var(--border-grain);
  text-align: left;
}

.wikitable td {
  color: var(--bone-dark);
  padding: 8px 14px;
  border: 1px solid rgba(139,99,68,0.2);
  line-height: 1.6;
}

.wikitable tr:hover td {
  background: rgba(200,132,58,0.05);
}

/* Track numbers in table */
.wikitable td.track-num {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--amber-deep);
  text-align: center;
  width: 40px;
}

/* ── Categories ── */
#catlinks {
  margin-top: 40px;
  padding-top: 16px;
  border-top: var(--border-grain);
  font-size: 12px;
}

#catlinks h2 {
  display: inline;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-deep);
  border-bottom: none;
  margin: 0 8px 0 0;
  font-weight: normal;
}

#catlinks h2::before { display: none; }

#catlinks a {
  color: var(--sepia);
  border-bottom: 1px solid rgba(139,99,68,0.2);
  margin: 0 4px;
  font-size: 12px;
}

#catlinks a:hover { color: var(--amber-pale); }

/* ── Edit toolbar / page actions ── */
#p-views {
  display: flex;
  gap: 0;
  align-items: center;
}

#p-views li { list-style: none; }

#p-views a {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sepia);
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  transition: color 0.2s, background 0.2s;
  border-left: 1px solid rgba(139,99,68,0.15);
}

#p-views a:hover {
  color: var(--amber-pale);
  background: rgba(200,132,58,0.08);
}

#p-views li.selected a {
  color: var(--amber);
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
#footer {
  grid-column: 1 / -1;
  padding: 20px 28px;
  border-top: var(--border-grain);
  background: rgba(10,8,6,0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links {
  display: flex;
  gap: 0;
  list-style: none;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia-dark);
  text-decoration: none;
  padding: 0 10px;
  border-right: 1px solid rgba(139,99,68,0.2);
  transition: color 0.2s;
}

.footer-links li:last-child a { border-right: none; }
.footer-links a:hover { color: var(--amber); }

.footer-copy {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--sepia-dark);
}

/* ─────────────────────────────────────────────
   TIMELESS SKIN COMPATIBILITY OVERRIDES
   (Timeless uses these selectors)
───────────────────────────────────────────── */
.mw-header { display: contents; }
.mw-body { display: contents; }
.content-container { display: contents; }
.sidebar-chunk { margin-bottom: 20px; }

/* Timeless search form */
#searchform { display: flex; align-items: center; gap: 0; }
#searchform button[type="submit"] {
  background: rgba(200,132,58,0.15);
  border: var(--border-grain);
  border-left: none;
  color: var(--amber);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
}
#searchform button[type="submit"]:hover { background: rgba(200,132,58,0.25); }

/* ─────────────────────────────────────────────
   JS-POWERED EFFECTS
───────────────────────────────────────────── */

/* Cursor trail dot */
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  box-shadow: 0 0 12px 3px rgba(200,132,58,0.4);
}

/* Static for demo below */
.cursor-ring {
  position: fixed;
  width: 28px; height: 28px;
  border: 1px solid rgba(200,132,58,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s, width 0.2s, height 0.2s, border-color 0.2s;
}

/* Dust particle canvas */
#dust-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
}

/* Page load vignette */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(10,8,6,0.7) 100%);
  pointer-events: none;
}

/* Flicker animation for the whole page on load */
@keyframes vhs-flicker {
  0%   { opacity: 0; }
  5%   { opacity: 0.9; }
  6%   { opacity: 0.3; }
  8%   { opacity: 1; }
  100% { opacity: 1; }
}

#mw-wrapper { animation: vhs-flicker 1.4s ease both; }

/* Link hover glow pulse */
@keyframes link-glow {
  0%   { text-shadow: 0 0 8px rgba(200,132,58,0.3); }
  50%  { text-shadow: 0 0 20px rgba(200,132,58,0.6), 0 0 40px rgba(200,132,58,0.2); }
  100% { text-shadow: 0 0 8px rgba(200,132,58,0.3); }
}

.mw-body-content a:hover { animation: link-glow 1.5s ease-in-out infinite; }

/* ── Scroll-reveal ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Static noise flicker on hover for headings ── */
.mw-body-content h2:hover {
  animation: text-static 0.15s steps(2) 3;
}

@keyframes text-static {
  0%   { letter-spacing: 0.01em; opacity: 0.8; }
  50%  { letter-spacing: 0.04em; opacity: 1; }
  100% { letter-spacing: 0.01em; opacity: 0.8; }
}

/* ── Typewriter cursor on search ── */
#searchInput:focus::placeholder {
  animation: type-cursor 0.8s steps(1) infinite;
}
@keyframes type-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Ripple on sidebar link click ── */
.portal a {
  overflow: hidden;
}

/* ── Loading bar (amber progress) ── */
#loading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber), var(--amber-pale));
  z-index: 99999;
  width: 0%;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(200,132,58,0.6);
}

/* ─────────────────────────────────────────────
   DEMO PAGE CHROME
   (for preview only — not part of actual skin)
───────────────────────────────────────────── */
.demo-label {
  position: fixed;
  bottom: 20px; right: 20px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-deep);
  z-index: 9990;
  opacity: 0.6;
}
Retrieved from "https://colourversalwikis.com/index.php?title=MediaWiki:Common.css&oldid=4"