-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdeva.html
More file actions
313 lines (275 loc) · 17.6 KB
/
Copy pathdeva.html
File metadata and controls
313 lines (275 loc) · 17.6 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
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Deva: 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>Deva</h1>
<p>The Twelve Heavenly Generals: Ultimate Digimon serving the Four Sovereigns as their vanguard, three to each master and each themed after an animal of the Chinese zodiac. In a crisis the Sovereigns send the Deva first; only if they fail do the masters themselves move.</p>
</header>
<section class="tier">
<h2>Azulongmon's Deva</h2>
<p>the East trine: Tiger, Rabbit and Dragon</p>
</section>
<div class="grid">
<a class="card" id="mihiramon" href="https://digimon.fandom.com/wiki/Mihiramon" target="_blank" style="--accent:#3aa0ff">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Mihiramon_b.jpg" alt="Mihiramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Mihiramon</div>
<span class="rank"><span class="glyph">☸</span> Tiger</span>
<div class="role">The rowdiest of the Deva; a tactician faster than the wind on land and than sound in the sky.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="antylamon-deva" href="https://digimon.fandom.com/wiki/Antylamon_(Good)" target="_blank" style="--accent:#3aa0ff">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Antylamon_%28Good%29_b.jpg" alt="Antylamon (Good)"></div>
<div class="level">Ultimate</div>
<div class="mon">Antylamon (Deva)</div>
<span class="rank"><span class="glyph">☸</span> Rabbit</span>
<div class="role">Kind-hearted and fond of small creatures; enrages into a whirlwind of axes if they are threatened.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="majiramon" href="https://digimon.fandom.com/wiki/Majiramon" target="_blank" style="--accent:#3aa0ff">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Majiramon_b.jpg" alt="Majiramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Majiramon</div>
<span class="rank"><span class="glyph">☸</span> Dragon</span>
<div class="role">Extremely calculating; assigns a price to all things (one of its arrows is worth 5,000 yuan).</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
</div>
<section class="tier">
<h2>Zhuqiaomon's Deva</h2>
<p>the South trine: Snake, Horse and Sheep</p>
</section>
<div class="grid">
<a class="card" id="sandiramon" href="https://digimon.fandom.com/wiki/Sandiramon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Sandiramon_b.jpg" alt="Sandiramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Sandiramon</div>
<span class="rank"><span class="glyph">☸</span> Snake</span>
<div class="role">The most cunning of the Deva; lives deep underground and tortures its prey slowly.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="indramon" href="https://digimon.fandom.com/wiki/Indramon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Indramon_b.jpg" alt="Indramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Indramon</div>
<span class="rank"><span class="glyph">☸</span> Horse</span>
<div class="role">Haughty and boastful; swings its giant cowrie shell like a cudgel.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="pajiramon" href="https://digimon.fandom.com/wiki/Pajiramon" target="_blank" style="--accent:#e5484d">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Pajiramon_b.jpg" alt="Pajiramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Pajiramon</div>
<span class="rank"><span class="glyph">☸</span> Sheep</span>
<div class="role">Rules the world of dreams; the arrows of light from its bow put enemies to sleep.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
</div>
<section class="tier">
<h2>Baihumon's Deva</h2>
<p>the West trine: Monkey, Rooster and Dog</p>
</section>
<div class="grid">
<a class="card" id="makuramon" href="https://digimon.fandom.com/wiki/Makuramon" target="_blank" style="--accent:#cbd7ea">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Makuramon_b.jpg" alt="Makuramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Makuramon</div>
<span class="rank"><span class="glyph">☸</span> Monkey</span>
<div class="role">Speaks only through body language; locks whatever it fancies inside its Primal Orbs.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="sinduramon" href="https://digimon.fandom.com/wiki/Sinduramon" target="_blank" style="--accent:#cbd7ea">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Sinduramon_b.jpg" alt="Sinduramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Sinduramon</div>
<span class="rank"><span class="glyph">☸</span> Rooster</span>
<div class="role">Loves quarrels and rumor-mongering; hides inside the strongest armor among the Deva.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="caturamon" href="https://digimon.fandom.com/wiki/Caturamon" target="_blank" style="--accent:#cbd7ea">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Caturamon_b.jpg" alt="Caturamon"></div>
<div class="level">Ultimate</div>
<div class="mon">Caturamon</div>
<span class="rank"><span class="glyph">☸</span> Dog</span>
<div class="role">Big brother to its trine with a strong sense of justice; becomes a giant hammer to pass judgment.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
</div>
<section class="tier">
<h2>Ebonwumon's Deva</h2>
<p>the North trine: Rat, Ox and Pig</p>
</section>
<div class="grid">
<a class="card" id="kumbhiramon" href="https://digimon.fandom.com/wiki/Kumbhiramon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Kumbhiramon_b.jpg" alt="Kumbhiramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Kumbhiramon</div>
<span class="rank"><span class="glyph">☸</span> Rat</span>
<div class="role">A wise sage that engages Ebonwumon's Zen riddles; wields a body-sized pestle by telekinesis.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="vajramon" href="https://digimon.fandom.com/wiki/Vajramon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Vajramon_b.jpg" alt="Vajramon"></div>
<div class="level">Ultimate</div>
<div class="mon">Vajramon</div>
<span class="rank"><span class="glyph">☸</span> Ox</span>
<div class="role">A truth-seeker with the most well-tempered strength of the Deva, wielding twin blades.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="vikaralamon" href="https://digimon.fandom.com/wiki/Vikaralamon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Vikaralamon_b.jpg" alt="Vikaralamon"></div>
<div class="level">Ultimate</div>
<div class="mon">Vikaralamon</div>
<span class="rank"><span class="glyph">☸</span> Pig</span>
<div class="role">The grinning bystander of the group; spits wheels of light with a different power per color.</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 twelve</span>
</div>
<div class="lore-grid">
<div class="lore-card">
<div class="lore-card-title">Buddhist Generals, Zodiac Faces</div>
<div class="lore-card-text">Based on the Twelve Heavenly Generals who protect the Buddha of Medicine, drawn as zodiac animals as Japanese Buddhism has depicted them since the Heian period. The designs draw on the Butsuzozui, a 1690 compendium whose artwork appears in a Tamers episode explaining the myth.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Whose Orders? It Depends</div>
<div class="lore-card-text">The Reference Book assigns three Deva to each Sovereign, but in Tamers all twelve serve Zhuqiaomon alone. When a profile and a continuity disagree, both stories stand side by side.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Born from Dust</div>
<div class="lore-card-text">In Tamers, Zhuqiaomon created the Deva by reconfiguring fragments of Digimon that had turned to dust, and sent them into the Real World to retrieve Calumon and remove threats to the Sovereigns.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">The Deva Who Defected</div>
<div class="lore-card-text">In Tamers, Antylamon guarded the South Gate of the Sovereigns' domain instead of hunting Calumon; it defected to become Lopmon, Suzie's partner, the only Deva to join a human.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Twelve Treasures</div>
<div class="lore-card-text">Every Deva wields a treasure whose name begins with Bao: staffs, axes, arrows, lances, conch shells, bows, orbs, pestles, blades, hammers and wheels, several transformed from the wielder's own body, like Mihiramon's tail staff or Caturamon turning itself into the hammer.</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). Antylamon (Deva) is the official English name; DigimonWiki hosts this Data variant as Antylamon (Good). Each Deva shares its Attribute with the Sovereign it serves.</p>
</div>
</body>
</html>