Kai Chamberlain (ไค เชมเบอร์เลน)
แก้ไขครั้งสุดท้ายโดย Kai เมื่อ 2025-12-13 20:59 <br /><br /><link href="https://fonts.cdnfonts.com/css/breezy-pro" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;600&display=swap" rel="stylesheet">
<style>
.page_footer{display: none;}
body{background-color: #000 !important; font-family: Sarabun !important; color: #fff !important;} #ct{background: #000 !important;}
/* --- CSS VARIABLES & RESET --- */
.kc-root {
--bg-color: #050505;
--text-main: #f0f0f0;
--text-dim: #888888;
--line-color: #333333;
--accent-hover: #ffffff;
--font-head: 'Breezy Pro', serif;
--font-body: 'Sarabun', sans-serif;
}
.kc-root * {
box-sizing: border-box;
}
/* --- MAIN CONTAINER --- */
.kc-wrapper {
margin: -20px;
background-color: var(--bg-color);
color: var(--text-main);
font-family: var(--font-body);
font-weight: 300;
line-height: 1.6;
overflow: hidden;
padding-bottom: 100px;
}
/* --- TOP IMAGE --- */
.kc-image {
width: 100%;
aspect-ratio: 3 / 2;
background: url("https://iili.io/f5M3OgV.png") center/cover no-repeat;
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
opacity: 0;
animation: kc-fadeIn 1.5s ease-out forwards;
}
/* --- CONTENT CONTAINER --- */
.kc-content {
padding: 0 5%;
max-width: 1400px;
margin: -10% auto 0;
position: relative;
z-index: 2;
}
/* --- TYPOGRAPHY --- */
.kc-title-block {
margin-bottom: 60px;
border-bottom: 1px solid var(--line-color);
padding-bottom: 20px;
}
.kc-name-eng {
font-family: var(--font-head); font-weight: normal;
font-size: clamp(3rem, 8vw, 6rem) !important;
text-transform: uppercase;
line-height: 0.9;
letter-spacing: -1px;
margin: 0!important;
opacity: 0;
animation: kc-slideUp 1s ease-out 0.5s forwards;
}
.kc-name-thai {
font-size: 1.2rem;
color: var(--text-dim);
margin-top: 10px;
opacity: 0;
animation: kc-slideUp 1s ease-out 0.7s forwards;
}
h3 {
font-family: var(--font-head);
font-size: 1.5rem;
margin: 0 0 15px 0;
font-weight: normal;
}
/* --- GRID SYSTEM --- */
.kc-section {
display: grid;
grid-template-columns: 25% 75%;
border-top: 1px solid var(--line-color);
padding: 40px 0;
transition: border-color 0.3s ease;
}
.kc-label {
font-family: var(--font-head);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-dim);
padding-right: 20px;
}
.kc-data-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.kc-data-item {
margin-bottom: 10px;
}
.kc-data-head {
display: block;
font-size: 0.8rem;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 5px;
letter-spacing: 1px;
}
.kc-data-val {
font-size: 14px;
border-left: 1px solid var(--line-color);
padding-left: 15px;
transition: border-left 0.3s ease, padding-left 0.3s ease;
}
.kc-data-item:hover .kc-data-val {
border-left: 1px solid var(--text-main);
padding-left: 25px;
}
/* --- LISTS --- */
.kc-list-group {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.kc-list-col {
flex: 1;
min-width: 250px;
}
ul.kc-minimal-list {
list-style: none;
padding: 0;
margin: 0;
}
ul.kc-minimal-list li {
position: relative;
padding: 8px 0;
border-bottom: 1px solid #1a1a1a;
transition: padding-left 0.3s ease;
list-style: none;
margin: 0;
font-size: 14px;
}
ul.kc-minimal-list li::before {
content: '+';
margin-right: 10px;
color: var(--text-dim);
font-size: 0.8em;
}
ul.kc-minimal-list li:hover {
padding-left: 10px;
color: #fff;
border-bottom: 1px solid #333;
}
/* --- NARRATIVE TEXT --- */
.kc-text-block {
text-align: justify;
column-count: 2;
column-gap: 40px;
font-size: 14px;
color: #ccc;
}
.kc-quote {
font-family: var(--font-head);
font-size: 1.8rem;
line-height: 1.3;
margin: 30px 0;
padding-left: 20px;
border-left: 2px solid var(--text-main);
color: #fff;
}
/* --- NEW GALLERY STYLE --- */
.kc-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
height: 250px;
}
.kc-gallery-item {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
/* Default: Dark/Grayscale */
filter: grayscale(100%) brightness(0.6);
transition: all 0.5s ease;
border: 1px solid #1a1a1a;
}
.kc-gallery-item:hover {
/* Hover: Color/Bright */
filter: grayscale(0%) brightness(1);
border-color: #555;
}
/* --- ANIMATIONS --- */
.kc-anim {
opacity: 0;
transform: translateY(20px);
animation: kc-slideUp 0.8s ease-out forwards;
}
.delay-1 { animation-delay: 0.8s; border-top: 0; padding-top: 0; }
.delay-2 { animation-delay: 1.0s; }
.delay-3 { animation-delay: 1.2s; }
.delay-4 { animation-delay: 1.4s; }
.delay-5 { animation-delay: 1.6s; }
.delay-6 { animation-delay: 1.8s; } /* New Delay */
@keyframes kc-fadeIn {
to { opacity: 1; }
}
@keyframes kc-slideUp {
to { opacity: 1; transform: translateY(0); }
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
.kc-section {
grid-template-columns: 1fr;
gap: 20px;
}
.kc-text-block {
column-count: 1;
}
.kc-name-eng {
font-size: 3.5rem;
}
.kc-gallery-grid {
grid-template-columns: 1fr;
height: auto;
}
.kc-gallery-item {
height: 200px;
}
}
</style>
<div class="kc-root">
<div class="kc-wrapper">
<!-- Header Image -->
<div class="kc-image"></div>
<!-- Main Content -->
<div class="kc-content">
<!-- Title Section -->
<div class="kc-title-block">
<h1 class="kc-name-eng">Kai<br>Chamberlain</h1>
<div class="kc-name-thai">ไค เชมเบอร์เลน</div>
</div>
<!-- 01 : PERSONAL STATS -->
<div class="kc-section kc-anim delay-1">
<div class="kc-label">01 / Identification</div>
<div class="kc-data-grid">
<div class="kc-data-item">
<span class="kc-data-head">Nickname</span>
<div class="kc-data-val">ไค (Kai) / เคซี (KC)</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Date of Birth</span>
<div class="kc-data-val">11 พฤศจิกายน ค.ศ. 2011</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Origin</span>
<div class="kc-data-val">New Rome, USA</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Ethnicity</span>
<div class="kc-data-val">American (Asian descent)</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Body Stats</span>
<div class="kc-data-val">176 cm / 64 kg</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Orientation</span>
<div class="kc-data-val">Demisexual</div>
</div>
</div>
</div>
<!-- 02 : PREFERENCES -->
<div class="kc-section kc-anim delay-2">
<div class="kc-label">02 / Preferences</div>
<div class="kc-list-group">
<div class="kc-list-col">
<h3>Likes</h3>
<ul class="kc-minimal-list">
<li>ที่สูงและท้องฟ้าเปิดโล่ง</li>
<li>ระเบียบวินัยและความสมบูรณ์แบบ</li>
<li>วันที่มีพายุฝนฟ้าคะนอง</li>
<li>เกมวางแผนกลยุทธ์ (หมากรุก)</li>
<li>ความเงียบสงบ</li>
</ul>
</div>
<div class="kc-list-col">
<h3>Dislikes</h3>
<ul class="kc-minimal-list">
<li>คนที่พูดโกหกบิดเบือนความจริง</li>
<li>ความสกปรกและไร้ระเบียบ</li>
<li>ความวุ่นวายที่ควบคุมไม่ได้</li>
<li>ที่แคบและอับชื้น</li>
<li>ความพ่ายแพ้</li>
</ul>
</div>
</div>
</div>
<!-- 03 : FAMILY & STATUS -->
<div class="kc-section kc-anim delay-3">
<div class="kc-label">03 / Bloodline</div>
<div class="kc-data-grid">
<div class="kc-data-item">
<span class="kc-data-head">Father</span>
<div class="kc-data-val">Jupiter (King of the Gods)</div>
</div>
<div class="kc-data-item" style="grid-column: span 2;">
<span class="kc-data-head">Mother</span>
<div class="kc-data-val">Eleanor Chamberlain (New Rome Council)</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Grandfather</span>
<div class="kc-data-val">Retired General Li</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Legacy</span>
<div class="kc-data-val">Justitia (Justice)</div>
</div>
</div>
</div>
<!-- 04 : PSYCHOLOGY -->
<div class="kc-section kc-anim delay-4">
<div class="kc-label">04 / Psychology</div>
<div class="kc-data-grid">
<div class="kc-data-item">
<span class="kc-data-head">Joy</span>
<div class="kc-data-val">การได้รับคำชม และการได้พิสูจน์ตนเองว่าคู่ควร</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Fear</span>
<div class="kc-data-val">การทำให้คนรอบข้างเสื่อมเสีย</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Fatal Flaw</span>
<div class="kc-data-val">ความเย่อหยิ่ง</div>
</div>
<div class="kc-data-item">
<span class="kc-data-head">Condition</span>
<div class="kc-data-val">ADHD & Dyslexia</div>
</div>
</div>
</div>
<!-- 05 : BIOGRAPHY -->
<div class="kc-section kc-anim delay-5">
<div class="kc-label">05 / Biography</div>
<div>
<div class="kc-text-block">
<p>
ไคเกิดและเติบโตขึ้นมาในคฤหาสน์หรูบนเนินเขาภายในเขต นิวโรมรัฐแคลิฟอร์เนีย เขาเป็นที่รู้จักในฐานะ <i>‘คุณชายน้อยแห่งตระกูลเชมเบอร์เลน’</i> ตระกูลเก่าแก่ที่มีอิทธิพลในสภาเมือง ชีวิตของไคถูกวางกรอบไว้อย่างสมบูรณ์แบบตั้งแต่เกิด เขาเรียนรู้วิถีชีวิตแบบโรมัน ภาษาละติน และประวัติศาสตร์จากตำราในห้องสมุดของตระกูล โดยไม่ต้องเผชิญอันตรายจากโลกภายนอกเหมือนพวกเดมี่ก็อตป่าเถื่อน
</p>
<p>
เชื้อสายเอเชียของเขาได้รับถ่ายทอดมาจากคุณตา อดีตนายพลผู้ยิ่งใหญ่ชาวเอเชียที่เข้ามาตั้งรกรากในนิวโรมหลังปลดประจำการและแต่งงานกับคุณยายจากตระกูลเชมเบอร์เลน ไคภูมิใจในสายเลือดผสมนี้และมักฝึกฝนศิลปะการต่อสู้ผสมผสานตั้งแต่วัยเยาว์
</p>
<p>
เมื่อเริ่มเข้าสู่วัยรุ่น พลังแห่งบุตรจูปิเตอร์เริ่มปรากฏชัดเจนขึ้น สายลมมักจะแปรปรวนรุนแรงรอบตัวเขาเวลาที่เขาโกรธ หรือหลอดไฟในโรงเรียนมักจะระเบิดเมื่อเขาเครียด จนกระทั่งอายุครบ 14 ปี แม่ของเขาตัดสินใจว่าถึงเวลาแล้วที่ไคจะต้องออกจากไข่ในหินเพื่อไปพิสูจน์ตนเอง ท่านพาไคเดินออกจากเขตเมืองมุ่งหน้าสู่ทุ่งมาส์ ส่งตัวเข้าประจำการในกองพันที่ 12 ฟุลมินาตา เพื่อเกียรติยศและสิทธิ์ในการเป็นพลเมืองโรมเต็มขั้นในอนาคต
</p>
<br>
<h3>Ancestry Note</h3>
<p>ตระกูลเชมเบอร์เลนสืบเชื้อสายมาจาก เอลิอุส บุตรแห่งจัสทิเทียในยุคโรมันโบราณ บรรพบุรุษของตระกูลได้อพยพติดตามกองเลเกียนและเหล่าเทพเจ้าข้ามน้ำข้ามทะเลมายังทวีปอเมริกาตั้งแต่ยุคก่อตั้งอาณานิคม พวกเขาเป็นหนึ่งในกลุ่มผู้บุกเบิกที่ช่วยสร้างรากฐานให้แก่เมืองโรมใหม่ในซานฟรานซิสโก โดยยึดอาชีพนักกฎหมายและนักปกครองมาตลอดหลายชั่วอายุคน เพื่อรักษาความยุติธรรมและกฎระเบียบภายในเมืองให้คงอยู่สืบไป</p>
</div>
</div>
</div>
<!-- 06 : VISUALS (New Section) -->
<div class="kc-section kc-anim delay-6" style="border-bottom: 1px solid var(--line-color);">
<div class="kc-label">06 / Visuals</div>
<div class="kc-gallery-grid">
<!-- รูปที่ 1: ฟ้าผ่า/พายุ (พลังจูปิเตอร์) -->
<div class="kc-gallery-item" style="background-image: url('https://iili.io/f5MnXyl.png');"></div>
<!-- รูปที่ 2: สถาปัตยกรรมโรมัน/รูปปั้น (ชาติตระกูล) -->
<div class="kc-gallery-item" style="background-image: url('https://iili.io/f70Slqu.jpg');"></div>
<!-- รูปที่ 3: หมากรุก/ความมืด (กลยุทธ์/ความเงียบ) -->
<div class="kc-gallery-item" style="background-image: url('https://iili.io/f5ef1Pp.png');"></div>
</div>
</div>
</div> <!-- End Content -->
</div> <!-- End Wrapper -->
</div> <!-- End Root -->
หน้า:
[1]