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-scenesubsector-dsubsection-4blockquoteblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquoteblockquotedragonblockquotedragonblockquotedragonblockquotedragonblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquotedragonblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteblockquotedragonblockquoteexit-scene