/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ADR HELL THEME v1.0
For use with: [[include component:hell-theme]]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FREE ASSETS REFERENCED IN THIS FILE:
• Fonts: Google Fonts (fonts.google.com) — free, open license
- Cinzel: https://fonts.google.com/specimen/Cinzel
- Crimson Text: https://fonts.google.com/specimen/Crimson+Text
• All textures and effects: Pure CSS — no external images required.
• Lava/noise texture: Inline SVG data URI (no attribution needed).
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');
/* ── VARIABLES ── */
:root {
—h-void: #030000;
—h-deep: #0a0100;
—h-rock: #130300;
—h-stone: #1e0600;
—h-char: #2d0d00;
—h-magma-dk: #7a1800;
—h-magma: #b82200;
—h-lava: #e03300;
—h-ember: #ff5500;
—h-orange: #ff7700;
—h-gold: #ffaa33;
—h-pale: #ffcc88;
—h-text: #dba878;
—h-text-dim: #8a4a25;
—h-glow: rgba(230, 80, 0, 0.55);
—h-glow-sm: rgba(200, 50, 0, 0.30);
—h-glow-xs: rgba(180, 40, 0, 0.15);
—h-border: rgba(180, 50, 0, 0.35);
}
/* ━━━━━━━━━━━━━━━━━━ ANIMATIONS ━━━━━━━━━━━━━━━━━━ */
@keyframes lava-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes ember-pulse {
0%, 100% { box-shadow: 0 0 12px var(h-glow-sm), 0 0 30px var(h-glow-xs); }
50% { box-shadow: 0 0 22px var(h-glow), 0 0 55px var(h-glow-sm); }
}
@keyframes title-flicker {
0%, 92%, 100% { text-shadow:
0 0 10px var(h-ember),
0 0 25px var(h-lava),
0 0 55px var(h-magma),
0 0 100px var(h-magma-dk); }
93%, 95% { text-shadow:
0 0 5px var(h-ember),
0 0 12px var(h-lava),
0 0 28px var(—h-magma); }
94% { text-shadow: none; }
}
@keyframes border-burn {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
@keyframes heat-glow {
0%, 100% { opacity: 0.5; transform: scaleX(0.98); }
50% { opacity: 1.0; transform: scaleX(1.01); }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
BODY & OVERALL STRUCTURE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
- { box-sizing: border-box; }
body {
background-color: var(h-void) !important;
background-image:
radial-gradient(ellipse 80% 40% at 20% 100%, rgba(180,35,0,0.30) 0%, transparent 70%),
radial-gradient(ellipse 60% 35% at 80% 100%, rgba(220,55,0,0.22) 0%, transparent 65%),
radial-gradient(ellipse 90% 30% at 50% 100%, rgba(140,20,0,0.18) 0%, transparent 70%),
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") !important;
color: var(h-text) !important;
font-family: 'Crimson Text', Georgia, serif !important;
font-size: 17px !important;
line-height: 1.75 !important;
}
/* scrollbar */
body::-webkit-scrollbar { width: 10px; background: var(h-void); }
body::-webkit-scrollbar-track { background: var(h-deep); border-left: 1px solid var(h-stone); }
body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(h-ember), var(h-magma-dk));
border: 1px solid var(h-lava);
box-shadow: 0 0 8px var(—h-glow-sm);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header {
background: linear-gradient(180deg, var(h-void) 0%, var(h-deep) 60%, var(h-rock) 100%) !important;
border-bottom: 1px solid var(h-border) !important;
box-shadow: 0 3px 40px rgba(200,40,0,0.20), 0 1px 0 var(—h-magma-dk) !important;
padding: 22px 0 18px !important;
}
#header h1 a {
font-family: 'Cinzel', serif !important;
color: var(h-pale) !important;
text-transform: uppercase !important;
letter-spacing: 5px !important;
font-size: 28px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-shadow:
0 0 10px var(h-ember),
0 0 25px var(h-lava),
0 0 55px var(h-magma) !important;
}
#header h2 span {
font-family: 'Crimson Text', Georgia, serif !important;
font-style: italic !important;
color: var(—h-text-dim) !important;
font-size: 13px !important;
letter-spacing: 3px !important;
text-shadow: none !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP BAR / NAVIGATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#top-bar {
background: var(—h-void) !important;
border-bottom: 1px solid rgba(120,20,0,0.25) !important;
}
#top-bar a, #top-bar li a {
color: var(—h-text-dim) !important;
font-family: 'Cinzel', serif !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: color 0.2s, text-shadow 0.2s !important;
}
#top-bar a:hover {
color: var(h-orange) !important;
text-shadow: 0 0 8px var(h-glow-sm) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PAGE TITLE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-title {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 36px !important;
letter-spacing: 5px !important;
text-transform: uppercase !important;
color: var(—h-pale) !important;
text-align: center !important;
padding: 24px 0 18px !important;
border-bottom: none !important;
position: relative !important;
animation: title-flicker 8s ease-in-out infinite !important;
}
/* lava crack underline */
#page-title::after {
content: '' !important;
display: block !important;
height: 2px !important;
margin: 10px auto 0 !important;
width: 70% !important;
background: linear-gradient(90deg,
transparent 0%,
var(h-magma-dk) 15%,
var(h-ember) 35%,
var(h-orange) 50%,
var(h-ember) 65%,
var(—h-magma-dk) 85%,
transparent 100%) !important;
background-size: 200% auto !important;
animation: border-burn 4s linear infinite !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MAIN PAGE CONTENT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content {
color: var(h-text) !important;
font-family: 'Crimson Text', Georgia, serif !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"),
linear-gradient(180deg, rgba(12,3,0,0.97) 0%, rgba(8,1,0,0.99) 100%) !important;
border: 1px solid var(h-border) !important;
border-top: none !important;
box-shadow:
0 0 0 1px rgba(100,15,0,0.15),
0 0 60px rgba(180,35,0,0.12),
inset 0 0 120px rgba(0,0,0,0.4) !important;
animation: ember-pulse 5s ease-in-out infinite !important;
padding: 24px 32px 32px !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HEADINGS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content h1,
#page-content h2,
#page-content h3,
#page-content h4 {
font-family: 'Cinzel', serif !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
color: var(—h-pale) !important;
border: none !important;
position: relative !important;
}
#page-content h1 {
font-size: 26px !important;
font-weight: 700 !important;
margin: 28px 0 14px !important;
text-shadow:
0 0 8px var(h-ember),
0 0 20px var(h-lava),
0 0 45px var(—h-magma) !important;
padding-bottom: 10px !important;
}
#page-content h1::after {
content: '' !important;
display: block !important;
height: 1px !important;
background: linear-gradient(90deg,
transparent, var(h-magma-dk) 20%,
var(h-ember) 50%,
var(—h-magma-dk) 80%, transparent) !important;
background-size: 200% !important;
animation: border-burn 5s linear infinite !important;
margin-top: 8px !important;
}
#page-content h2 {
font-size: 20px !important;
font-weight: 600 !important;
margin: 24px 0 10px !important;
color: var(h-orange) !important;
text-shadow: 0 0 6px rgba(255,100,0,0.45), 0 0 18px rgba(200,50,0,0.3) !important;
padding-left: 14px !important;
border-left: 2px solid var(h-lava) !important;
}
#page-content h3 {
font-size: 16px !important;
font-weight: 600 !important;
color: var(—h-gold) !important;
text-shadow: 0 0 6px rgba(255,140,0,0.35) !important;
margin: 20px 0 8px !important;
letter-spacing: 2px !important;
}
#page-content h4 {
font-size: 14px !important;
color: var(—h-text-dim) !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PARAGRAPHS & TEXT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content p {
color: var(—h-text) !important;
margin: 0 0 1.1em !important;
font-size: 17px !important;
}
#page-content strong, #page-content b {
color: var(—h-pale) !important;
font-weight: 600 !important;
}
#page-content em, #page-content i {
color: var(—h-gold) !important;
font-style: italic !important;
}
#page-content s, #page-content del {
color: var(—h-text-dim) !important;
text-decoration: line-through !important;
opacity: 0.6 !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content a {
color: var(—h-ember) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255,85,0,0.25) !important;
transition: color 0.2s, text-shadow 0.2s, border-color 0.2s !important;
}
#page-content a:hover {
color: var(h-gold) !important;
text-shadow: 0 0 8px rgba(255,140,0,0.6) !important;
border-bottom-color: var(h-gold) !important;
}
#page-content a:visited {
color: var(—h-magma) !important;
border-bottom-color: rgba(180,34,0,0.3) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
BLOCKQUOTES — styled as lava channels
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content blockquote {
background:
linear-gradient(90deg, rgba(160,25,0,0.08) 0%, transparent 40%) !important;
border: none !important;
border-left: none !important;
padding: 14px 20px 14px 22px !important;
margin: 20px 0 !important;
position: relative !important;
color: var(—h-text) !important;
font-style: italic !important;
}
#page-content blockquote::before {
content: '' !important;
position: absolute !important;
left: 0 !important; top: 0 !important; bottom: 0 !important;
width: 3px !important;
background: linear-gradient(180deg,
var(h-magma-dk),
var(h-ember) 40%,
var(h-orange) 55%,
var(h-ember) 70%,
var(—h-magma-dk)) !important;
background-size: 100% 300% !important;
animation: lava-flow 4s ease-in-out infinite !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HORIZONTAL RULES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content hr {
border: none !important;
height: 1px !important;
background: linear-gradient(90deg,
transparent 0%,
var(h-magma-dk) 15%,
var(h-ember) 40%,
var(h-orange) 50%,
var(h-ember) 60%,
var(—h-magma-dk) 85%,
transparent 100%) !important;
background-size: 200% auto !important;
animation: border-burn 6s linear infinite !important;
margin: 22px 0 !important;
opacity: 0.7 !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TABLES — dark stone with magma borders
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content table {
border-collapse: collapse !important;
width: 100% !important;
border: 1px solid var(—h-border) !important;
box-shadow: 0 0 20px rgba(180,35,0,0.15) !important;
margin: 18px 0 !important;
}
#page-content th {
background: linear-gradient(180deg, var(h-stone), var(h-char)) !important;
color: var(h-pale) !important;
font-family: 'Cinzel', serif !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 10px 14px !important;
border: 1px solid var(h-border) !important;
text-shadow: 0 0 6px rgba(255,100,0,0.3) !important;
}
#page-content td {
background: rgba(12,3,0,0.7) !important;
color: var(—h-text) !important;
padding: 9px 14px !important;
border: 1px solid rgba(120,20,0,0.25) !important;
font-size: 16px !important;
vertical-align: top !important;
}
#page-content tr:hover td {
background: rgba(30,6,0,0.85) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CODE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content code, #page-content tt {
font-family: 'Courier New', Courier, monospace !important;
font-size: 13px !important;
background: rgba(40,8,0,0.8) !important;
color: var(—h-gold) !important;
padding: 1px 5px !important;
border: 1px solid rgba(160,40,0,0.3) !important;
border-radius: 2px !important;
}
#page-content pre {
background: rgba(20,4,0,0.9) !important;
border: 1px solid var(h-border) !important;
border-left: 3px solid var(h-magma-dk) !important;
padding: 16px 18px !important;
overflow-x: auto !important;
color: var(—h-gold) !important;
font-size: 13px !important;
line-height: 1.6 !important;
box-shadow: inset 0 0 30px rgba(0,0,0,0.5) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DIVS — collapsibles / info boxes
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content div.collapsible-block-folded a,
#page-content div.collapsible-block-unfolded-link a {
color: var(—h-ember) !important;
font-family: 'Cinzel', serif !important;
font-size: 12px !important;
letter-spacing: 2px !important;
text-decoration: none !important;
}
#page-content .collapsible-block-content {
border-left: 2px solid var(—h-magma-dk) !important;
padding-left: 16px !important;
margin-top: 8px !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LISTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content ul li::marker { color: var(h-lava) !important; }
#page-content ol li::marker {
color: var(h-ember) !important;
font-family: 'Cinzel', serif !important;
font-size: 13px !important;
}
#page-content li { margin-bottom: 4px !important; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#side-bar {
background: var(h-deep) !important;
border-right: 1px solid var(h-border) !important;
}
#side-bar a {
color: var(—h-text-dim) !important;
text-decoration: none !important;
font-family: 'Cinzel', serif !important;
font-size: 11px !important;
letter-spacing: 1px !important;
transition: color 0.2s !important;
}
#side-bar a:hover { color: var(—h-ember) !important; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer-bar {
background: var(h-void) !important;
border-top: 1px solid var(h-border) !important;
color: var(—h-text-dim) !important;
font-size: 11px !important;
}
#footer-bar a {
color: var(—h-magma-dk) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RATING WIDGET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-rate-widget-box {
background: var(h-deep) !important;
border: 1px solid var(h-border) !important;
box-shadow: 0 0 12px var(—h-glow-xs) !important;
}
.page-rate-widget-box .rate-points {
color: var(—h-orange) !important;
font-family: 'Cinzel', serif !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
INFO / DOCUMENT CONTAINERS (ADR specific)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#page-content .adr-box,
#page-content div[style*="border"] {
border-color: var(h-border) !important;
background: rgba(15,4,0,0.85) !important;
color: var(h-text) !important;
}
/* ── TAG LIST ── */
.page-tags a {
background: rgba(30,6,0,0.8) !important;
border: 1px solid rgba(160,30,0,0.35) !important;
color: var(—h-text-dim) !important;
font-size: 11px !important;
padding: 2px 8px !important;
border-radius: 2px !important;
text-decoration: none !important;
transition: all 0.2s !important;
}
.page-tags a:hover {
border-color: var(h-lava) !important;
color: var(h-ember) !important;
box-shadow: 0 0 8px var(—h-glow-xs) !important;
}
[CSS]
