MediaWiki:Common.css
From HADES
Jump to navigationJump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ================================================================
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; }
