Xolotl โพสต์ 2026-1-4 17:30:42

[กระท่อมหมายเลข 28] ห้องนิรภัย

แก้ไขครั้งสุดท้ายโดย Xolotl เมื่อ 2026-1-4 17:50 <br /><br />

<!-- ==== SPILL Minimal – clean & cool theme (scoped text only) ==== -->
<style>
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+HR+Lijeva:wght@400;600;700&family=La+Belle+Aurore&family=Manrope:wght@400;700&family=Poppins:wght@300;500;700&display=swap');

/* ⛔️ แก้ตรงนี้เพื่อไม่ให้ตัวอักษรล้นทั้งเว็บ */
body{
background: transparent !important;
margin: 0;
/* (ลบ font-family และ color ออก เพื่อไม่ให้ไปทับโพสต์อื่น) */
}

/* พื้นหลังทั้งหน้าที่คุณตั้งไว้ (คงเดิม) */
html::before{
content:"";
position:fixed; inset:0; z-index:-1; pointer-events:none;
background:url("https://s.imgz.io/2025/11/05/Untitled-design-14-1-1-116c097d4d0596a51.gif") center/cover no-repeat;
opacity:1;
}

/* ===== THEME OVERRIDE — Dusty Blue Duo ===== */
.spill-post{
/* 2 สีหลักตามสวอตช์ในภาพ */
--c1: #C7D1E9; /* ฟ้าม่วงอ่อน (ช่องซ้าย) */
--c2: #8EA0BF; /* สเลตฟ้าเข้ม (ช่องขวา) */

/* ผูกค่าส่วนอื่นให้เข้าชุด */
--c3: #BFC9E0; /* เส้น/กรอบ */
--c4: #8EA0BF; /* เส้นนอก/outline */
--c5: #EEF2F9; /* พื้นหลังอ่อนมาก */

--title: #50648E; /* สีหัวเรื่องอ่านชัดบนพื้นอ่อน */
--ink:   #334158; /* สีตัวอักษรเนื้อความ */
}

/* ถ้าอยากให้กราเดียนต์วงกลมไล่จากอ่อน→เข้มให้เห็นชัดขึ้น:
.spill-post .circle-photo{ background: linear-gradient(145deg, var(--c1), var(--c2)); }
*/

/* พื้นหลังกล่องหลักให้นุ่มแบบไล่เฉด (คงเดิม) */
.spill-post{
background: linear-gradient(180deg, var(--c5) 0%, #ffffff 85%), var(--poster-bg, none);
}

/* หัวเรื่อง SPILL / FONT ใช้สี accent (คงเดิม) */
.spill-post .spill-header .title-1,
.spill-post .spill-header .title-2{
color: var(--title);
text-shadow: 0 1px 0 #f6f7fd, 0 12px 28px rgba(60,76,112,.08);
}

/* วงกลมภาพหลัก + กรอบ (คงเดิม) */
.spill-post .circle-photo{ background: linear-gradient(145deg, var(--c2), var(--c1)); }
.spill-post .circle-photo img{ border:6px solid #fff; outline:3px solid var(--c4); }

/* รูปย่อย (คงเดิม) */
.spill-post .thumb{ background: var(--c5); outline: 2px solid var(--c3); }

/* กล่องข้อความ (คงเดิม) */
.spill-post .quote-wrap{ border-color: var(--c3); }
.spill-post .quote-title{ background: var(--c5); color: var(--ink); }

/* = Palette เดิมของส่วนมินิมอล = */
:root{ --c1:#9db0c9; --c2:#dee7ef; --c3:#bdd2e1; --c4:#afbac7; --ink:#2a3a4b; }

/* = Container (คงเดิม ย้ำฟอนต์เฉพาะในกล่องนี้) = */
.spill-post{
max-width: 980px; margin: 24px auto; padding: 24px; border-radius: 16px;
background: linear-gradient(180deg, var(--c2) 0%, #ffffff 80%), var(--poster-bg, none);
box-shadow: 0 12px 36px rgba(23,45,70,.12);
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Arial, sans-serif; /* ← ฟอนต์ใช้เฉพาะในกล่องนี้ */
color: var(--ink); /* ← สีตัวอักษรใช้เฉพาะในกล่องนี้ */
}

/* = Inner panel (คงเดิม) = */
.spill-frame{
background: #ffffffcc; backdrop-filter: blur(2px); border: 1.5px solid var(--c3);
border-radius: 14px; padding: 28px 24px 32px;
}

/* = Heading (คงเดิม) = */
.spill-header{ margin-bottom: 8px }
.spill-header .title-1,.spill-header .title-2{
font-family: 'Playwrite HR Lijeva', serif; font-weight: 600; letter-spacing: .2px;
color: #3b5c77; line-height: .95; text-shadow: 0 1px 0 #f2f6fa;
}
.spill-header .title-1{ font-size: 60px; }
.spill-header .title-2{ font-size: 52px; margin-top:-4px }
.spill-header .title-script{
display:inline-block; margin-top:6px; font-family:'La Belle Aurore', cursive; font-size:26px; color:#3b5c77;
}

/* = Hero image (คงเดิม) = */
.circle-photo{ margin:14px auto 18px; width:86%; aspect-ratio:1/1; border-radius:999px;
padding:14px; background:linear-gradient(145deg,var(--c3),var(--c1)); box-shadow:0 10px 30px rgba(27,52,82,.15) }
.circle-photo img{ width:100%; height:100%; object-fit:cover; border-radius:999px; border:6px solid #fff; outline:3px solid var(--c4);
transition: transform .35s ease, box-shadow .35s ease }
.circle-photo:hover img{ transform: translateY(-2px) scale(1.01); box-shadow: 0 0 0 6px rgba(157,176,201,.25) }

/* = Thumbs (คงเดิม) = */
.thumb-row{ display:flex; justify-content:center; gap:22px; margin:4px 0 16px }
.thumb{ width:150px; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--c2);
border:3px solid #fff; outline:2px solid var(--c3); box-shadow:0 6px 16px rgba(30,56,90,.12);
transition: transform .25s ease, box-shadow .25s ease }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.thumb:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30,56,90,.18) }

/* = Quote/content (คงเดิม) = */
.quote-wrap{ background:#fff; border:1.5px solid var(--c3); border-radius:10px; padding:18px 18px 22px; box-shadow:0 8px 20px rgba(20,40,70,.06) }
.quote-title{ font-family:'Manrope',sans-serif; font-weight:700; font-size:18px; color:#3b5c77; background:var(--c2);
padding:8px 12px; border-radius:8px; display:inline-block; margin-bottom:10px }
.quote-body{ font-weight:300; font-size:17px; line-height:1.8 }
.credit{ margin-top:12px; font-family:'Manrope',sans-serif; font-size:13px; color:#516a82 }
.credit a{ color:#2f5777; text-decoration:none; border-bottom:1px dotted currentColor }

/* Responsive (คงเดิม) */
@media (min-width:1100px){ .spill-post{ max-width:1040px } .thumb{ width:170px } }
</style>

<div class="spill-post" style="--poster-bg:url('https://img2.pic.in.th/pic/2c89b4c8959dc09a2f105f7c523eb4b5.md.jpg')">

<div class="spill-post" style="--poster-bg:url('')">
<div class="spill-frame">

    <div class="spill-header">
      <span class="title-1">The </span>
      <span class="title-2"> Ice Vault</span>
      <span class="title-script">Mystic, Frozen, Hoard</span>
    </div>

    <!-- รูปหลัก -->
    <div class="circle-photo">
      <img src="https://iili.io/fwR2AOb.png" alt="main">
    </div>

    <!-- รูปย่อย -->
    <div class="thumb-row">
      <div class="thumb"><img src="https://iili.io/fwR2u5u.png" alt=""></div>
      <div class="thumb"><img src="https://iili.io/fwRKofp.png" alt=""></div>
      <div class="thumb"><img src="https://iili.io/fwR2TJe.png" alt=""></div>
    </div>

    <!-- เนื้อหา -->
    <div class="quote-wrap">
      <div class="quote-title"><span style="font-family:'Mali',cursive;font-weight:700;font-size:2em;"><font size="4">กองคลัง บ้านหมายเลข 28</font></span>
      <link href="https://fonts.googleapis.com/css2?family=Mali:wght@400;700&amp;display=swap" rel="stylesheet">
      </div>

      <div class="quote-body">
<span style="font-family:'Mali',cursive;font-weight:700;font-size:2em;"><font size="3">ห้องนี้ถูกสร้างจากอิฐหิมะอมตะและน้ำแข็ง ผนังและเพดานประดับด้วยเกล็ดหิมะและน้ำค้างแข็ง พร้อมประกายเวทมนตร์ระยิบระยับ ชั้นวางน้ำแข็งใสและตู้ไม้สนโบราณเรียงรายไปด้วยขวดน้ำยาเรืองแสง โหลบรรจุเขี้ยวเล็บ เกล็ดอสุรกาย และวัตถุดิบหายากอื่น ๆ หีบสมบัติทองคำและดรักม่าวางอยู่บนพื้นหิมะนุ่ม ห้องยังมีโต๊ะทำงานที่เต็มไปด้วยอุปกรณ์ปรุงยา เตาผิงน้ำแข็งให้ความอบอุ่นด้วยเปลวไฟสีฟ้าอ่อน และลมเย็นพัดผ่าน สร้างบรรยากาศลึกลับและเปี่ยมมนตร์ขลัง <br><br><div style="text-align: center;">สำหรับเด็กบอเรอัสที่ต้องการใช้คลังโปรดติดต่อที่ปรึกษาบ้านในขณะนี้ <br>วัตถุดิบในคลังกรุณาตรวจสอบที่โพสต่อไป</div><div style="text-align: center;">ID คลัง :&nbsp;BoreaCabin28</div><div style="text-align: center;"><font color="#ff0000">พื้นที่ส่วนบุคคล หากไม่ได้รับอนุญาตห้ามเข้า</font></div></font></span><link href="https://fonts.googleapis.com/css2?family=Mali:wght@400;700&amp;display=swap" rel="stylesheet">      
      </div>
      <div class="credit">
       ❄️❄️ <a href="#">A frozen sanctuary where monster spoils meet ancient drachmae under the North Wind's watch.</a>❄️❄️
      </div>
    </div>

</div>
</div>
</div>

Xolotl โพสต์ 2026-1-5 22:40:45






<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- Google Font (Thai) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@400;600;700&amp;display=swap" rel="stylesheet">

<style>
    /* ===== Gradient Link Banner (scoped) ===== */
    .itemlink-banner{
      --bg:#121212;
      --stroke: rgba(255,255,255,.08);
      --shadow: rgba(0,0,0,.35);

      /* gradient colors (ปรับได้) */
      --g1:#f7c8d2; /* blush */
      --g2:#f2d27a; /* gold */
      --g3:#a8d6b4; /* mint/pine pastel */

      font-family: "Mali", system-ui, -apple-system, "Segoe UI", sans-serif;
      padding: 18px 20px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)) , var(--bg);
      border: 1px solid var(--stroke);
      box-shadow: 0 14px 34px var(--shadow);
      max-width: 980px;
      margin: 18px auto;
    }

    .itemlink-banner .txt{
      margin: 0;
      font-size: 22px;
      line-height: 1.35;
      font-weight: 700;
      color: rgba(255,255,255,.92);
      letter-spacing: .2px;
      text-align: center;
    }

    /* gradient text link */
    .itemlink-banner a.gradlink{
      display: inline-block;
      font-weight: 800;
      text-decoration: none;
      padding: 0 .15em;
      border-radius: 10px;

      background-image: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;

      position: relative;
      transform: translateY(1px);
      transition: filter .15s ease, transform .15s ease, opacity .15s ease;
      white-space: nowrap;
    }

    /* underline แบบเนียน ๆ */
    .itemlink-banner a.gradlink::after{
      content:"";
      position:absolute;
      left: .12em;
      right: .12em;
      bottom: -3px;
      height: 2px;
      border-radius: 999px;
      background-image: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
      opacity: .85;
      filter: blur(.1px);
    }

    .itemlink-banner a.gradlink:hover{
      filter: drop-shadow(0 6px 12px rgba(242,210,122,.22));
      transform: translateY(0px);
      opacity: .95;
    }

    .itemlink-banner a.gradlink:focus-visible{
      outline: 3px solid rgba(242,210,122,.35);
      outline-offset: 4px;
    }

    /* fallback ถ้าบางที่ไม่รองรับ background-clip:text */
    @supports not ((-webkit-background-clip: text) or (background-clip: text)){
      .itemlink-banner a.gradlink{
      color: var(--g2);
      background: none;
      }
      .itemlink-banner a.gradlink::after{
      background: var(--g2);
      }
    }

    @media (max-width:560px){
      .itemlink-banner{ padding: 16px 16px; }
      .itemlink-banner .txt{ font-size: 18px; }
    }
</style>

<div align="center"><img src="https://iili.io/fX63oMv.jpg" border="0" alt="" style="max-width:400px"></div>

<div class="itemlink-banner">
    <p class="txt">
      ข้อมูลไอเทม
      <a class="gradlink" href="https://docs.google.com/spreadsheets/d/1DsEywKQM4aAO1ECt6pVtB53t-itXex4C/edit?gid=949009062#gid=949009062" target="_blank" rel="noopener noreferrer">
      คลิกที่ลิงค์นี้
      </a>
    </p>
</div>


หน้า: [1]
ดูในรูปแบบกติ: [กระท่อมหมายเลข 28] ห้องนิรภัย