-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemon-lords.html
More file actions
269 lines (239 loc) · 15.2 KB
/
Copy pathdemon-lords.html
File metadata and controls
269 lines (239 loc) · 15.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Seven Great Demon Lords: group roster</title>
<link rel="stylesheet" href="../digivolution.css" />
<style>
/* group-roster layout (self-contained; reuses the shared tokens from digivolution.css) */
.wrap { padding: 40px 22px 56px; max-width: 1280px; margin: 0 auto; overflow: visible; }
.hero { text-align: center; margin: 18px auto 10px; max-width: 860px; }
.hero .kicker {
display: inline-block; margin-bottom: 14px; padding: 6px 16px; border-radius: 999px;
font-size: 12.5px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
color: #cfe6ff; background: rgba(88,166,255,.14); border: 1px solid rgba(88,166,255,.34);
}
.hero h1 {
font-size: 54px; line-height: 1.03; letter-spacing: -1.5px; margin: 0 0 14px;
background: linear-gradient(180deg, #ffffff, #a9c7ee);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 0; }
/* power-tier section headings */
.tier { margin: 40px 0 18px; }
.tier h2 { margin: 0; font-size: 28px; letter-spacing: -.5px; }
.tier p { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.grid {
display: grid; gap: 22px;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 40px; } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
.card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
padding: 20px 18px 18px; border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(16,43,76,.96), rgba(7,19,36,.98));
box-shadow: 0 16px 40px rgba(0,0,0,.36);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* accent glow strip at the top, tinted by the angel's sphere color (--accent) */
.card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
background: var(--accent); box-shadow: 0 0 18px var(--accent);
}
.card::after {
content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, var(--accent), transparent 65%);
opacity: .16; pointer-events: none; transition: opacity .18s ease;
}
a.card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,.2));
box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
a.card:hover::after { opacity: .32; }
/* card addressed by the URL fragment (e.g. a badge link on a tree page): the browser
scrolls to it and :target keeps it highlighted in its own accent color */
.card { scroll-margin: 110px; }
a.card:target {
border-color: color-mix(in srgb, var(--accent) 80%, rgba(255,255,255,.2));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 65%, transparent), 0 26px 60px rgba(0,0,0,.5);
animation: target-pulse 1.1s ease-out 2;
}
a.card:target::after { opacity: .45; }
@keyframes target-pulse { 50% { transform: translateY(-6px); } }
.thumb {
position: relative; z-index: 1; height: 150px; border-radius: 16px; background: #fff;
padding: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center;
}
.thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.level { position: relative; z-index: 1; font-size: 11.5px; font-weight: 900; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.mon { position: relative; z-index: 1; font-size: 22px; font-weight: 950; letter-spacing: -.5px; margin-bottom: 12px; }
/* angelic-rank pill, tinted by the sphere accent */
.rank {
position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 900;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}
.rank .glyph { font-size: 14px; line-height: 1; }
.role { position: relative; z-index: 1; margin: 10px 0 14px; color: var(--muted);
font-size: 12px; line-height: 1.4; font-weight: 700; }
.cta {
/* pinned to the card bottom so the row of CTAs stays aligned when roles wrap */
position: relative; z-index: 1; margin-top: auto; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.09);
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; font-weight: 900; color: #dce9fb;
}
.cta .arrow { transition: transform .18s ease; color: var(--accent); }
a.card:hover .cta .arrow { transform: translateX(5px); }
.foot { text-align: center; color: rgba(225,238,255,.6); font-size: 12.5px; line-height: 1.5; margin-top: 40px; }
/* Lore notes: static, responsive variant of the shared .lore-panel (which is
absolute-positioned for the tree canvas); the cards reuse .lore-card styles
and .lore-panel-title from digivolution.css */
.lore-section {
margin-top: 34px; padding: 20px 22px 22px; border-radius: 24px;
border: 1px solid rgba(148,163,184,.42);
background: linear-gradient(180deg, rgba(44,52,64,.68), rgba(16,24,36,.94));
box-shadow: 0 20px 56px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.05);
}
@media (max-width: 1100px) { .lore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lore-grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="wrap">
<a class="backnav" href="../index.html"><span class="arrow">←</span> Home</a>
<header class="hero">
<span class="kicker">Special group</span>
<h1>Seven Great Demon Lords</h1>
<p>Seven Evil King Digimon tied to the Dark Area, each bearing the Crown of one of the seven deadly sins. Together they oppose the order of the Digital World; alone, each one is a calamity.</p>
</header>
<section class="tier">
<h2>The Seven</h2>
<p>each Demon Lord bears the Crown of a deadly sin</p>
</section>
<div class="grid">
<a class="card" id="lucemon-chaos-mode" href="https://digimon.fandom.com/wiki/Lucemon_Chaos_Mode" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Lucemon_Chaos_Mode_b.jpg" alt="Lucemon Chaos Mode"></div>
<div class="level">Ultimate</div>
<div class="mon">Lucemon Chaos Mode</div>
<span class="rank"><span class="glyph">👑</span> Pride</span>
<div class="role">The strongest of the Seven; it instigated a rebellion in the far-flung past.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="leviamon" href="https://digimon.fandom.com/wiki/Leviamon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Leviamon_b.jpg" alt="Leviamon"></div>
<div class="level">Mega</div>
<div class="mon">Leviamon</div>
<span class="rank"><span class="glyph">👑</span> Envy</span>
<div class="role">The Devil Beast asleep in the Net Ocean; its maw could swallow the Digital World.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="daemon" href="https://digimon.fandom.com/wiki/Daemon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Daemon_b.jpg" alt="Daemon"></div>
<div class="level">Mega</div>
<div class="mon">Daemon</div>
<span class="rank"><span class="glyph">👑</span> Wrath</span>
<div class="role">Said to have originally been a Seraphimon that fell to the Dark Area.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="belphemon-rage-mode" href="https://digimon.fandom.com/wiki/Belphemon_Rage_Mode" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Belphemon_Rage_Mode_b.jpg" alt="Belphemon Rage Mode"></div>
<div class="level">Mega</div>
<div class="mon">Belphemon Rage Mode</div>
<span class="rank"><span class="glyph">👑</span> Sloth</span>
<div class="role">Wakes from its slumber once every thousand years as an avatar of rage.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="barbamon" href="https://digimon.fandom.com/wiki/Barbamon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Barbamon_b.jpg" alt="Barbamon"></div>
<div class="level">Mega</div>
<div class="mon">Barbamon</div>
<span class="rank"><span class="glyph">👑</span> Greed</span>
<div class="role">Commands Dark Angel Digimon; obsessed with every treasure in the network.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="beelzemon" href="https://digimon.fandom.com/wiki/Beelzemon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Beelzemon_b.jpg" alt="Beelzemon"></div>
<div class="level">Mega</div>
<div class="mon">Beelzemon</div>
<span class="rank"><span class="glyph">👑</span> Gluttony</span>
<div class="role">Prizes its independence, though it could rule the Nightmare Soldiers.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="lilithmon" href="https://digimon.fandom.com/wiki/Lilithmon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Lilithmon_b.jpg" alt="Lilithmon"></div>
<div class="level">Mega</div>
<div class="mon">Lilithmon</div>
<span class="rank"><span class="glyph">👑</span> Lust</span>
<div class="role">The Goddess of Darkness; thought to have once been an Ophanimon.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
</div>
<section class="tier">
<h2>Culmination</h2>
<p>the embodiment of all seven sins</p>
</section>
<div class="grid">
<a class="card" id="ogudomon" href="https://digimon.fandom.com/wiki/Ogudomon" target="_blank" style="--accent:#f0b429">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Ogudomon_b.jpg" alt="Ogudomon"></div>
<div class="level">Mega</div>
<div class="mon">Ogudomon</div>
<span class="rank"><span class="glyph">👑</span> Sum of Sins</span>
<div class="role">A strange incarnation containing all the sins of the Digital World, and the power to atone for them.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
</div>
<section class="lore-section">
<div class="lore-panel-title">
<h2>Lore notes</h2>
<span>the stories behind the crowns</span>
</div>
<div class="lore-grid">
<div class="lore-card">
<div class="lore-card-title">Assembled Card by Card</div>
<div class="lore-card-text">The group was built between 2002 and 2004 in guides and card boosters: Lilithmon was the first named member, and the card Advent of the Seven Great Demon Lords showed six members with a Baphomet silhouette holding the seventh place until Belphemon was revealed.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Lucemon's Rebellion</div>
<div class="lore-card-text">They were once high-ranking Angel Digimon. When Lucemon instigated a rebellion against God, they fell and were deleted to the Dark Area as punishment, where each continues to exist as the deadly sin it pursues.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Seven Who Never Gather</div>
<div class="lore-card-text">The Demon Lords neither cooperate nor turn on each other, whatever their interests or disagreements; each one is a calamity on its own. As a group, their natural rivals are the Royal Knights.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Ogudomon, the Sum of Sins</div>
<div class="lore-card-text">A Super Demon Lord with seven legs, seven eyes and an eighth eye unlike the others: it contains all the sins of the Digital World along with the power to atone for them, nullifying the power of any Digimon with even a hint of wickedness.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Crowns Born in Frontier</div>
<div class="lore-card-text">The Crowns of the seven deadly sins appeared first in Lucemon Shadowlord Mode's official artwork used to promote Frontier; only in 2004 did the Gate of Deadly Sins tie each Crown to one member.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Why Belphemon Sleeps</div>
<div class="lore-card-text">Belphemon was sealed in the deepest part of the Dark Area, and because its power was too immense, the very system that deleted the fallen angels forced its data into a sleep state.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Nobility of the Dark Area</div>
<div class="lore-card-text">Today the seven are the chief nobility of the Dark Area, residing in the den of demons at its heart, and each member holds the right to command legions of the Nightmare Soldiers.</div>
</div>
</div>
</section>
<div class="support">
<span class="support-label">Support this project</span>
<a class="support-btn kofi" href="https://ko-fi.com/drigos" target="_blank" rel="noopener"><span class="support-icon" aria-hidden="true">☕</span><span class="support-text">Ko-fi</span><span class="support-url">ko-fi.com/drigos</span></a>
<a class="support-btn sponsors" href="https://github.com/sponsors/drigos" target="_blank" rel="noopener"><span class="support-icon" aria-hidden="true">♥</span><span class="support-text">GitHub Sponsors</span><span class="support-url">github.com/sponsors/drigos</span></a>
</div>
<p class="foot">Images and names link to DigimonWiki/Fandom (CC BY-SA unless noted otherwise). Lucemon Chaos Mode and Lucemon Shadowlord Mode are DigimonWiki's names for Lucemon: Falldown Mode and Lucemon: Satan Mode; Chaos Mode is the only non-Mega member.</p>
</div>
</body>
</html>