ไฮเพอร์เรียน (Hyperion)
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;900&family=Cinzel:wght@400;700&family=Noto+Sans+Thai:wght@100;300;400;700&family=Orbitron:wght@400;900&display=swap');
:root {
--hyp-core: #050505;
--hyp-gold: #f5b041;
--hyp-flame: #e74c3c;
--hyp-plasma: #ffeb3b;
--hyp-border: rgba(245, 176, 65, 0.3);
--hyp-glass: rgba(255, 255, 255, 0.03);
}
/* --- Base Framework --- */
.hyperion-frame {
max-width: 920px;
margin: 60px auto;
background: var(--hyp-core);
border: 1px solid var(--hyp-border);
position: relative;
overflow: hidden;
box-shadow: 0 0 80px rgba(0,0,0,0.9);
}
.hyperion-frame::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(245, 176, 65, 0.02) 100px, rgba(245, 176, 65, 0.02) 101px);
pointer-events: none;
}
/* --- Character Visual Split --- */
.hyp-visual-header {
display: flex;
height: 600px;
border-bottom: 2px solid var(--hyp-gold);
background: #000;
position: relative;
z-index: 1; /* ให้ส่วนหัวอยู่เป็นพื้นฐาน */
}
.visual-panel {
flex: 1;
background-size: cover;
background-position: center top;
position: relative;
filter: grayscale(0.5);
transition: 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}
.visual-panel:hover {
filter: grayscale(0);
flex: 1.5;
}
/* แก้ไขป้ายชื่อ: ดัน z-index ขึ้นเพื่อไม่ให้โดนเนื้อหาบัง */
.panel-label {
position: absolute;
bottom: 80px; /* เลื่อนขึ้นหนีขอบ Content เล็กน้อย */
left: 50%;
transform: translateX(-50%);
font-family: 'Orbitron', sans-serif;
color: var(--hyp-gold);
background: rgba(0,0,0,0.85);
padding: 8px 20px;
border: 1px solid var(--hyp-gold);
font-size: 11px;
letter-spacing: 3px;
z-index: 50; /* ค่าที่สูงกว่าส่วน Content */
white-space: nowrap;
}
/* --- Content Section --- */
.hyp-content {
padding: 0 60px 80px;
font-family: 'Noto Sans Thai', sans-serif;
color: #e0e0e0;
position: relative;
z-index: 5; /* ต่ำกว่าป้ายชื่อรูป */
}
/* Identity Card */
.hyp-id-card {
margin-top: -50px; /* ปรับลดการเกยกันเล็กน้อย */
background: var(--hyp-core);
border: 1px solid var(--hyp-gold);
padding: 50px;
position: relative;
z-index: 10;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.hyp-name {
font-family: 'Cinzel Decorative', cursive !important;
background: linear-gradient(to bottom, #fff 0%, var(--hyp-gold) 50%, var(--hyp-flame) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
letter-spacing: 12px;
text-align: center;
margin-bottom: 30px;
}
.stat-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 25px;
}
.stat-box b { color: var(--hyp-gold); font-family: 'Cinzel', serif; letter-spacing: 1px; }
.hyp-section-title {
font-family: 'Orbitron', sans-serif;
color: var(--hyp-flame);
border-left: 4px solid var(--hyp-flame);
padding-left: 20px;
margin: 60px 0 30px;
font-size: 1.4rem;
letter-spacing: 5px;
text-transform: uppercase;
}
.hyp-info-box {
background: var(--hyp-glass);
border: 1px solid rgba(255,255,255,0.05);
padding: 40px;
line-height: 2.2;
position: relative;
margin-bottom: 30px;
}
.power-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.power-node {
background: linear-gradient(135deg, rgba(245, 176, 65, 0.05), transparent);
border: 1px solid rgba(245, 176, 65, 0.1);
padding: 30px;
transition: 0.3s;
}
.power-node:hover {
border-color: var(--hyp-gold);
background: rgba(245, 176, 65, 0.08);
}
.power-node h4 {
color: var(--hyp-plasma);
font-family: 'Orbitron', sans-serif;
margin-bottom: 15px;
font-size: 13px;
letter-spacing: 2px;
}
.hyp-footer {
padding: 60px;
text-align: center;
background: rgba(0,0,0,0.8);
border-top: 1px solid var(--hyp-gold);
}
</style>
<div class="hyperion-frame">
<div class="hyp-visual-header">
<div class="visual-panel" style="background-image: url('https://i.imgur.com/tPL32uX.png');">
<span class="panel-label">PRIMORDIAL HUMAN FORM</span>
</div>
<div class="visual-panel" style="background-image: url('https://img2.pic.in.th/pic/image7560ed7f94fdcd95.png');">
<span class="panel-label">TITAN POWER SUIT</span>
</div>
</div>
<div class="hyp-content">
<div class="hyp-id-card">
<h1 class="hyp-name"><font size="7">HYPERION</font></h1>
<div class="stat-row">
<div class="stat-box">
<font size="3">
<b>BIRTH:</b> ยุคก่อนกาล (PRIMORDIAL ERA)<br>
<b>RACE:</b> ไททัน (TITAN)<br>
<b>SYMBOLS:</b> ดวงอาทิตย์, แสงสว่าง, คบเพลิง
</font>
</div>
<div class="stat-box">
<font size="3">
<b>ORIGIN:</b> อูรานอส & ไกอา<br>
<b>WEAPON:</b> ดาบเพลิงสุริยะ<br>
<b>STATUS:</b> ผู้นำกลุ่ม THE WATCHER
</font>
</div>
</div>
<div style="border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 20px;">
<font size="3">
<b>LOCATION:</b> ภูเขาออธริส (เดิม) | เอกวาดอร์ (ปัจจุบัน)
</font>
</div>
</div>
<div class="hyp-section-title">THE TITAN'S NATURE</div>
<div class="hyp-info-box">
<font size="3">
ไฮเพอร์เรียนมีนิสัย <b>โหดเหี้ยมและหยิ่งยโส</b> คล้ายกับโครนอสผู้เป็นพี่ชาย เขาคือ "เจ้าแห่งแสง" ผู้ขี้โอ่ที่คอยทำตามคำสั่งโครนอสโดยไม่มีข้อสงสัย จนถูกพี่น้องลับหลังเรียกว่า "โครนอสไลท์" (แบบลดแคลอรี่) <br><br>
เขามีความกลับกลอกในตัวตน อ้างว่ากล้าหาญพอจะสังหารอูรานอสแต่แท้จริงกลับหวาดกลัวเกินกว่าจะทำ ไฮเพอร์เรียนชื่นชอบการระเบิดร่างเป็นเปลวไฟเพื่อความโดดเด่น และถือว่าเผาพันธุ์อื่นนั้นน่ารังเกียจและด้อยกว่าตนเองอย่างสิ้นเชิง
</font>
</div>
<div class="hyp-section-title">CHRONICLES OF LIGHT</div>
<div class="hyp-info-box">
<font size="3">
หนึ่งในสิบสองไททันดั้งเดิม ผู้พิทักษ์ทิศตะวันออกและเทพผู้ให้กำเนิดดวงอาทิตย์ ในสงครามไททาโนมาคี เขาคือขุนพลคู่ใจของโครนอสที่ใช้พลังแสงและไฟเผาผลาญศัตรู ก่อนจะพ่ายแพ้และถูกจองจำในทาร์ทารัส <br><br>
ในยุคสมัยใหม่ ไฮเพอร์เรียนถูกปลดปล่อยออกมาทำหน้าที่ <b>แม่ทัพใหญ่ฝ่ายไททัน</b> บุกโจมตีแมนฮัตตัน เขาปะทะกับเพอร์ซีย์ แจ็กสันอย่างดุเดือดด้วยพลังสุริยะ แม้จะมีพละกำลังมหาศาล แต่สุดท้ายก็พ่ายแพ้ต่อพลังพายุและถูกจองจำกลับสู่ความมืดอีกครั้ง
</font>
</div>
<div class="hyp-section-title">POWER UNLOCK</div>
<div class="power-grid">
<div class="power-node">
<h4>COMBAT MASTERY</h4>
<font size="2">พละกำลังเหนือกว่าเทพเจ้าทั่วไป เชี่ยวชาญทักษะการต่อสู้ระดับสูง เคยเหนือกว่าผู้ถือครองคำสาปแห่งอะคิลลีสมาแล้ว</font>
</div>
<div class="power-node">
<h4>PYROKINESIS</h4>
<font size="2">ควบคุมไฟสมบูรณ์แบบ จุดไฟเผาตนเองได้ ดับระเบิดเพลิงกรีกด้วยมือเปล่า และยิงกระสุนเพลิงพิฆาต</font>
</div>
<div class="power-node">
<h4>PHOTOKINESIS</h4>
<font size="2">ควบคุมแสงสว่างศักดิ์สิทธิ์ สร้างออร่าที่สว่างจ้าจนคู่ต่อสู้ตาพร่ามัวรอบตัวได้ในพริบตา</font>
</div>
<div class="power-node">
<h4>TITAN SPEED</h4>
<font size="2">เคลื่อนที่ด้วยความเร็วเหนือมนุษย์จนยากจะมองทัน จำเป็นต้องใช้พลังแห่งพายุช่วยหนุนหลังเพื่อตามความเร็วนี้ให้ทัน</font>
</div>
<div class="power-node">
<h4>PRIMORDIAL VOICE</h4>
<font size="2">เชี่ยวชาญภาษาโบราณของไกอา พ่นพลังงานทำลายล้างหลายร้อยหลาเพียงแค่คำรามหรือโบกมือ</font>
</div>
<div class="power-node">
<h4>WATER WALKING</h4>
<font size="2">ความสามารถพิเศษในการเดินบนผิวน้ำได้ประดุจพื้นดิน ซึ่งมีเพียงไม่กี่ตนในจักรวาลที่ทำได้โดยไม่มีพลังน้ำ</font>
</div>
</div>
</div>
<div class="hyp-footer">
<font face="Orbitron" size="2" color="#f5b041" style="letter-spacing: 10px;">TITAN OF THE EAST • LORD OF LIGHT</font>
<div style="margin-top: 15px; opacity: 0.3;">
<font size="1" color="#fff">ASCENDING FROM THE DEPTHS OF TARTARUS</font>
</div>
</div>
</div>
หน้า:
[1]