-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvortex-warriors.html
More file actions
221 lines (197 loc) · 12.2 KB
/
Copy pathvortex-warriors.html
File metadata and controls
221 lines (197 loc) · 12.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vortex Warriors: 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>Vortex Warriors</h1>
<p>The defenders of Witchelny, the magical Digital World of another dimension. Among its four magical systems, they battle using weapons forged from Wind Sorcery, led by the Whirlwind General.</p>
</header>
<section class="tier">
<h2>The Warriors</h2>
<p>wielders of weapons forged from Wind Sorcery</p>
</section>
<div class="grid">
<a class="card" id="medievalgallantmon" href="https://digimon.fandom.com/wiki/MedievalGallantmon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/MedievalGallantmon_b.jpg" alt="MedievalGallantmon"></div>
<div class="level">Mega</div>
<div class="mon">MedievalGallantmon</div>
<span class="rank"><span class="glyph">❈</span> Warrior</span>
<div class="role">The Whirlwind General; extolled as the legendary hero of ancient Witchelny.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="zephagamon" href="https://digimon.fandom.com/wiki/Zephagamon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Zephagamon_b.jpg" alt="Zephagamon"></div>
<div class="level">Mega</div>
<div class="mon">Zephagamon</div>
<span class="rank"><span class="glyph">❈</span> Magic Knight</span>
<div class="role">Called the god of wind; embodies the data of the winds of the Digital World.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="grandgalemon" href="https://digimon.fandom.com/wiki/GrandGalemon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/GrandGalemon_b.jpg" alt="GrandGalemon"></div>
<div class="level">Ultimate</div>
<div class="mon">GrandGalemon</div>
<span class="rank"><span class="glyph">❈</span> Bird Dragon</span>
<div class="role">Revered as king of the forest; its magic-coated armor blends into the surroundings.</div>
<div class="cta"><span>View on DigimonWiki</span><span class="arrow">→</span></div>
</a>
<a class="card" id="vortexdramon" href="https://digimon.fandom.com/wiki/Vortexdramon" target="_blank" style="--accent:#2dd4a8">
<div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/Vortexdramon_b.jpg" alt="Vortexdramon"></div>
<div class="level">Mega</div>
<div class="mon">Vortexdramon</div>
<span class="rank"><span class="glyph">❈</span> Bird Dragon</span>
<div class="role">A hero of the Vortex Warriors; its torso is made of turbulent wind energy.</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 Witchelny</span>
</div>
<div class="lore-grid">
<div class="lore-card">
<div class="lore-card-title">Named After Another V-Pet</div>
<div class="lore-card-text">Witchelny takes its name from the setting of Magical Witches, a 1998 Bandai line of grimoire-shaped virtual pets that Digimon designer Watanabe Kenji worked on.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Sorcery Is Programming</div>
<div class="lore-card-text">In Witchelny, sorcery is a high-level programming language. Four clans each master an element (Earthlin of earth, Aquary of water, Eneruge of flame, Baluluna of wind) and together they founded the Brocken Magical Academy.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Another Dimension, Not Another Server</div>
<div class="lore-card-text">Unlike Iliad, which sits on a different server of the network, Witchelny is officially the Digital World of another dimension, one of many Layers. Crossing over is dimensional travel, as Wizardmon, Witchelny's famous native, did to train in fire and earth magic.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">The General Is a Royal Knight</div>
<div class="lore-card-text">MedievalGallantmon is the form Gallantmon takes in Witchelny. There it leads the Vortex Warriors as the Whirlwind General, yet in its Gallantmon form it is counted as a Royal Knight and not as a Vortex Warrior, despite being the same individual.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">The Forest Leaf</div>
<div class="lore-card-text">In the manga Digimon Chronicle, Gallantmon takes its Medieval form outside Witchelny thanks to a Forest Leaf, and rather than eliminating the traveling duo Yuuji and Ryudamon, it sets them a trial to test the power of the X-Antibody.</div>
</div>
<div class="lore-card">
<div class="lore-card-title">Assembled by the Card Game</div>
<div class="lore-card-text">The Vortex Warriors only recently came together as a group, via the card game's Vortex Warriors trait (ST-18 Guardian Vortex) and the Digimon Liberator web story, where Kazama Shoto's partner Pteromon takes the forms of Zephagamon, GrandGalemon and Vortexdramon.</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).</p>
</div>
</body>
</html>