Link to article: The Dagon and The Dragon.
:root {
/* === Agency Branding === */
--logo-image: url(https://static.wikia.nocookie.net/scp-db/images/d/d6/Intelligence_Agency.png);
--header-subtitle: "In Umbris Surgimus";
--gradient-header: linear-gradient(to top, rgb(15, 20, 22) 0%, rgb(10, 10, 12) 90%, rgb(var(--header-gradient-color-top)) 100%);
--diagonal-stripes: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0) 0.25vh,
rgba(150, 150, 150, 0.08) 0.4vh,
rgba(150, 150, 150, 0.12) 0.5vh
);
/* === Accent Colors === */
--accent-color: #66b3ff;
--accent-glow: 0 0 20px rgba(102, 179, 255, 0.6);
--dragon-color: #ff66b2;
--dragon-glow: 0 0 10px rgba(255, 102, 178, 0.8);
/* === Typography === */
--body-font: 'Inter', 'Segoe UI', Roboto, sans-serif;
--mono-font: 'Roboto Mono', monospace;
}
body {
background: linear-gradient(180deg, #0b0d0f 0%, #15191c 100%);
background-attachment: fixed;
font-family: var(--body-font);
color: #e6e6e6;
letter-spacing: 0.02em;
line-height: 1.6;
}
/* === Blockquote Terminal Styling === */
.blockquote {
font-family: var(--mono-font);
background: rgba(20, 25, 28, 0.8);
border: 1px solid rgba(120, 130, 140, 0.3);
border-left: 4px solid var(--accent-color);
border-radius: 8px;
padding: 1rem 1.5rem;
margin: 1.25rem auto;
max-width: 850px;
color: #cbd2d9;
backdrop-filter: blur(4px);
transition: 0.4s ease-in-out;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.blockquote:hover {
border-left: 4px solid var(--dragon-color);
transform: translateY(-2px);
box-shadow: 0 0 15px rgba(255, 102, 178, 0.3);
}
/* === Dragon Dialogue Glow === */
.dragon {
color: var(--dragon-color);
text-shadow: var(--dragon-glow);
font-weight: 600;
letter-spacing: 0.05em;
animation: pulseDragon 2s infinite alternate;
}
@keyframes pulseDragon {
from { text-shadow: 0 0 6px rgba(255, 102, 178, 0.6); }
to { text-shadow: 0 0 16px rgba(255, 102, 178, 1); }
}
/* === Section Breaks === */
hr {
border: none;
height: 1px;
margin: 2.5rem auto;
background: linear-gradient(to right, transparent, var(--accent-color), transparent);
width: 80%;
opacity: 0.6;
}
/* === Subtle Header Glow === */
.page-title, #page-title {
text-shadow: 0 0 10px rgba(102, 179, 255, 0.5);
font-weight: 700;
letter-spacing: 0.05em;
}
h1, h2, h3, h4 {
color: var(--accent-color);
text-shadow: 0 0 8px rgba(102, 179, 255, 0.4);
}
/* === Interactive Feel === */
a {
color: var(--accent-color);
text-decoration: none;
transition: 0.2s ease;
}
a:hover {
color: var(--dragon-color);
text-shadow: 0 0 6px rgba(255, 102, 178, 0.7);
}
/* === Terminal-style Animation for "Booting" lines === */
.blockquote:has(span:contains('Booting')) {
font-style: italic;
color: #9adfff;
animation: flicker 3s infinite;
}
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
opacity: 1;
}
20%, 24%, 55% {
opacity: 0.4;
}
}
/* === Subtle Fade-in Effect for All Dialogues === */
.blockquote {
opacity: 0;
animation: fadeInBlock 0.8s ease-in forwards;
}
@keyframes fadeInBlock {
to { opacity: 1; }
}
/* === Exit Scene Styling === */
.exit-scene {
margin: 3rem auto;
padding: 2rem 2.5rem;
max-width: 850px;
border-radius: 10px;
background: linear-gradient(
180deg,
rgba(240, 240, 240, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%
);
color: #dcdcdc;
font-style: italic;
font-family: 'Inter', sans-serif;
line-height: 1.8;
letter-spacing: 0.02em;
border: 1px solid rgba(200, 200, 200, 0.1);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
animation: fadeScene 2s ease-in-out forwards;
transition: all 0.5s ease;
}
.exit-scene:hover {
box-shadow: 0 0 35px rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
}
/* === Stylized quotes for inner monologue === */
.exit-scene i,
.exit-scene em {
color: #f2f2f2;
opacity: 0.9;
font-weight: 500;
}
/* === “Loading Dock” moment === */
.exit-scene strong {
display: block;
text-align: center;
margin: 1.8rem 0;
font-weight: 700;
font-size: 1.3em;
letter-spacing: 0.1em;
color: #f5f5f5;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
0 0 25px rgba(255, 255, 255, 0.15);
animation: shimmer 4s infinite linear;
}
/* === Subtle fade-in + desert-light shimmer === */
@keyframes fadeScene {
from {
opacity: 0;
transform: translateY(10px);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes shimmer {
0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
50% { text-shadow: 0 0 25px rgba(255, 255, 255, 0.6); }
100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
}
/* === Internal Lobby Scene Styling === */
.lobby-scene {
margin: 2.5rem auto;
padding: 2rem 2.5rem;
max-width: 850px;
background: linear-gradient(180deg, rgba(40, 45, 50, 0.85), rgba(25, 28, 32, 0.9));
border: 1px solid rgba(120, 120, 130, 0.25);
border-left: 5px solid #7da1b5;
border-radius: 10px;
color: #d6d6d6;
font-family: 'Inter', sans-serif;
line-height: 1.7;
letter-spacing: 0.01em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(3px);
animation: fadeLobby 1.2s ease-in-out forwards;
}
/* === Scene Header === */
.lobby-scene strong {
display: block;
text-transform: uppercase;
font-weight: 700;
color: #aac3d2;
margin-bottom: 1.2rem;
letter-spacing: 0.08em;
text-shadow: 0 0 8px rgba(170, 195, 210, 0.4);
border-bottom: 1px solid rgba(120, 150, 170, 0.25);
padding-bottom: 0.3rem;
}
/* === Dialogue Styling === */
.lobby-scene p {
margin: 0.8rem 0;
text-indent: 1rem;
}
.lobby-scene p::before {
content: "";
display: inline-block;
width: 0.4em;
}
/* === Spoken Dialogue Highlight === */
.lobby-scene q,
.lobby-scene .quote {
display: block;
margin: 0.6rem 0;
color: #f0f0f0;
background: rgba(255, 255, 255, 0.05);
padding: 0.5rem 0.8rem;
border-radius: 6px;
border-left: 3px solid #7da1b5;
font-style: italic;
transition: 0.2s ease;
}
.lobby-scene q:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(2px);
}
/* === Subtle ambient flicker to simulate old lighting === */
@keyframes fadeLobby {
0% { opacity: 0; filter: blur(6px); transform: translateY(10px); }
100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes lightFlicker {
0%, 100% { opacity: 1; }
45% { opacity: 0.95; }
48% { opacity: 0.85; }
50% { opacity: 1; }
52% { opacity: 0.9; }
55% { opacity: 1; }
}
.lobby-scene {
animation: fadeLobby 1.2s ease-in-out forwards, lightFlicker 8s infinite;
}
/* === Subterranean Sector D Styling === */
.subsector-d {
margin: 2.5rem auto;
padding: 2rem 2.5rem;
max-width: 850px;
background: linear-gradient(180deg, rgba(22, 23, 26, 0.9), rgba(15, 16, 18, 0.95));
border: 1px solid rgba(90, 60, 40, 0.3);
border-left: 5px solid #b85c3c;
border-radius: 10px;
color: #e2e2e2;
font-family: 'Inter', sans-serif;
line-height: 1.75;
letter-spacing: 0.01em;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
animation: fadeSectorD 1.2s ease-in-out forwards, flickerD 10s infinite;
}
/* === Header === */
.subsector-d strong {
display: block;
text-transform: uppercase;
font-weight: 700;
color: #e9a57b;
margin-bottom: 1.2rem;
letter-spacing: 0.07em;
text-shadow: 0 0 8px rgba(185, 100, 70, 0.4);
border-bottom: 1px solid rgba(150, 100, 70, 0.25);
padding-bottom: 0.3rem;
}
/* === Text === */
.subsector-d p {
margin: 0.9rem 0;
text-indent: 1rem;
}
/* === Dialogue Highlight === */
.subsector-d q,
.subsector-d .quote {
display: block;
margin: 0.6rem 0;
color: #f5f5f5;
background: rgba(255, 255, 255, 0.05);
padding: 0.55rem 0.8rem;
border-radius: 6px;
border-left: 3px solid #b85c3c;
font-style: italic;
transition: 0.25s ease;
}
.subsector-d q:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(3px);
}
/* === Animations === */
@keyframes fadeSectorD {
0% { opacity: 0; filter: blur(6px); transform: translateY(10px); }
100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes flickerD {
0%, 100% { opacity: 1; }
45% { opacity: 0.95; }
48% { opacity: 0.8; }
50% { opacity: 1; }
52% { opacity: 0.85; }
55% { opacity: 1; }
75% { opacity: 0.9; }
78% { opacity: 1; }
}
/* === Sub-section 4 Styling === */
.subsection-4 {
margin: 2.5rem auto;
padding: 2rem 2.5rem;
max-width: 850px;
background: linear-gradient(180deg, rgba(28, 32, 40, 0.88), rgba(20, 23, 28, 0.95));
border: 1px solid rgba(120, 140, 160, 0.25);
border-left: 5px solid #6b8ea8;
border-radius: 10px;
color: #e4e7ea;
font-family: 'Inter', sans-serif;
line-height: 1.75;
letter-spacing: 0.015em;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
animation: fadeSub4 1.4s ease-in-out forwards, subtlePulse 9s infinite;
}
/* === Header (if any) === */
.subsection-4 strong {
display: block;
text-transform: uppercase;
font-weight: 700;
color: #9eb8cc;
margin-bottom: 1.2rem;
letter-spacing: 0.08em;
text-shadow: 0 0 8px rgba(155, 180, 200, 0.4);
border-bottom: 1px solid rgba(100, 130, 150, 0.25);
padding-bottom: 0.3rem;
}
/* === Paragraphs === */
.subsection-4 p {
margin: 0.9rem 0;
text-indent: 1rem;
}
/* === Soft emphasis for important descriptions === */
.subsection-4 em {
color: #b4cfe4;
font-style: italic;
text-shadow: 0 0 4px rgba(140, 170, 200, 0.25);
}
/* === Subtle glow on key elements (like labels or doors) === */
.subsection-4 .label {
display: inline-block;
background: rgba(255, 255, 255, 0.05);
padding: 0.15rem 0.4rem;
border-radius: 4px;
border-left: 3px solid #6b8ea8;
font-weight: 500;
color: #d8e3f0;
margin: 0 0.2rem;
}
/* === Animations === */
@keyframes fadeSub4 {
0% { opacity: 0; filter: blur(6px); transform: translateY(12px); }
100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
/* Slow, almost imperceptible pulse to evoke stale air and tension */
@keyframes subtlePulse {
0%, 100% { background-position: 0 0; opacity: 1; }
50% { background-position: 0 4px; opacity: 0.97; }
}
:scp-wiki:theme:black-highlighter-theme
[info]
:scp-wiki:component:toggle-sidebar-bhl
[info]
:scp-wiki:component:advanced-navigation-toolbar-source
[info]
lobby-scene
subsector-d
subsection-4
blockquote
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
blockquote
dragon
blockquote
dragon
blockquote
dragon
blockquote
dragon
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
dragon
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
blockquote
dragon
blockquote
exit-scene