เมืองนิวเบิร์ก
<!-- ฟอนต์ใช้เฉพาะในบล็อกนี้ -->
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Kanit:wght@400;600;800&display=swap" rel="stylesheet">
<style>
html::before{
content:"";
position:fixed; inset:0; z-index:-1; pointer-events:none;
background:url("https://iili.io/fidjhep.png") center/cover no-repeat;
opacity:1;
}
/* ================== SCOPE LOCK: มีผลเฉพาะใน #vintage-cottage ================== */
#vintage-cottage{
/* Palette from your image */
--olive:#73672F; /* Olive Green */
--beige:#F2DDB6; /* Warm Beige */
--caramel:#A67244; /* Caramel Brown */
--chest:#73462D; /* Chestnut Brown */
--wine: #591E19; /* Deep Wine */
/* map ชื่อเดิมไว้ เผื่อโค้ดข้างในเรียกใช้ */
--blue:var(--olive);
--cream: var(--beige);
--pink1: var(--caramel);
--pink2: var(--chest);
--lilac: var(--wine);
--ink: #2A2016;
--muted: rgba(42,32,22,.70);
--soft-shadow: 0 16px 34px rgba(35,22,16,.26), 0 4px 14px rgba(35,22,16,.16);
--radius: 22px;
--maxw: 820px;
color: var(--ink);
font-family:'Kanit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
position:relative;
}
#vintage-cottage *{ box-sizing:border-box }
/* พื้นหลังโทนวินเทจ: Olive → Beige → Caramel → Wine */
#vintage-cottage::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(60% 45% at 10% 0%,
color-mix(in oklab, var(--beige) 78%, white 22%),
transparent 60%),
radial-gradient(55% 45% at 92% 8%,
color-mix(in oklab, var(--caramel) 30%, transparent),
transparent 62%),
radial-gradient(70% 55% at 50% 110%,
color-mix(in oklab, var(--wine) 22%, transparent),
transparent 64%),
linear-gradient(180deg,
color-mix(in oklab, var(--olive) 26%, var(--beige) 74%) 0%,
color-mix(in oklab, var(--beige) 78%, white 22%) 34%,
color-mix(in oklab, var(--caramel) 42%, var(--beige) 58%) 70%,
color-mix(in oklab, var(--wine) 36%, var(--chest) 64%) 100%);
opacity:.98;
}
/* ================== โครงหลัก ================== */
#vintage-cottage .post-wrap{
padding:28px;
background: linear-gradient(180deg, rgba(242,221,182,.55), transparent 70%);
border-radius: 16px;
}
#vintage-cottage #box01{
max-width: 980px; margin:0 auto;
border-radius: var(--radius);
padding:40px 44px;
background:
radial-gradient(900px 520px at 14% -10%,
color-mix(in oklab, var(--olive) 24%, transparent),
transparent 60%),
radial-gradient(900px 520px at 92% 10%,
color-mix(in oklab, var(--caramel) 26%, transparent),
transparent 62%),
linear-gradient(180deg,
color-mix(in oklab, var(--beige) 86%, white 14%) 0%,
color-mix(in oklab, var(--beige) 70%, var(--caramel) 30%) 52%,
color-mix(in oklab, var(--chest) 52%, var(--wine) 48%) 100%);
box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.28);
position:relative; overflow:hidden;
}
/* ไฮไลต์แสงเบา ๆ ให้ดูฟุ้ง */
#vintage-cottage #box01::before{
content:""; position:absolute; inset:-6% -8% -20% -8%; pointer-events:none;
background:
radial-gradient(65% 55% at 8% 0%, rgba(255,255,255,.40), transparent 60%),
radial-gradient(55% 45% at 100% 0%, color-mix(in oklab, var(--olive) 20%, transparent), transparent 60%),
radial-gradient(70% 55% at 50% 110%, color-mix(in oklab, var(--wine) 18%, transparent), transparent 60%);
}
/* เฟรมเนื้อหา: กระดาษวินเทจ (Beige) */
#vintage-cottage .phx-frame{
max-width: var(--maxw);
margin:10px auto 0;
padding:18px 16px 8px;
border-radius: calc(var(--radius) + 2px);
background:
radial-gradient(900px 360px at 50% 0%,
rgba(255,255,255,.22),
transparent 70%),
linear-gradient(180deg,
color-mix(in oklab, var(--beige) 92%, white 8%) 0%,
color-mix(in oklab, var(--beige) 84%, var(--caramel) 16%) 60%,
color-mix(in oklab, var(--caramel) 18%, var(--beige) 82%) 100%);
box-shadow:
inset 0 0 0 1px rgba(115,70,45,.20),
0 12px 30px rgba(35,22,16,.18);
}
/* หัวเรื่อง ไล่ Olive → Caramel */
#vintage-cottage .phx-title{
margin:10px 0 6px; text-align:center; line-height:1;
font-family:'Pacifico', cursive; font-size:48px; letter-spacing:.5px;
background: linear-gradient(90deg, var(--olive), var(--caramel));
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow: 0 12px 26px rgba(35,22,16,.22);
}
#vintage-cottage .phx-sub{
text-align:center;
color: rgba(42,32,22,.68);
font-size:14px;
margin:0 0 18px;
}
/* รูป hero: ขอบเนียนโทนชานไม้ */
#vintage-cottage .phx-hero{
width:78%; max-width:640px; margin:0 auto 20px;
border-radius:16px; overflow:hidden;
box-shadow:
0 0 0 1px rgba(115,70,45,.24),
0 16px 34px rgba(35,22,16,.22);
background: color-mix(in oklab, var(--beige) 88%, white 12%);
}
#vintage-cottage .phx-hero img{ display:block; width:100%; height:auto; transition:transform .5s ease, filter .5s ease }
#vintage-cottage .phx-hero img:hover{ transform:scale(1.03); filter:saturate(1.03) contrast(1.02) }
/* การ์ดเนื้อหา: ไม้คาราเมล → เกาลัด → ไวน์ */
#vintage-cottage .phx-card{
position:relative;
width:82%; max-width:660px; margin:12px auto 24px;
border-radius: var(--radius); padding:22px 24px; text-align:center;
background:
radial-gradient(120% 85% at 50% -20%, rgba(255,255,255,.14), transparent 60%),
linear-gradient(180deg,
color-mix(in oklab, var(--caramel) 82%, var(--beige) 18%) 0%,
color-mix(in oklab, var(--chest) 78%, var(--caramel) 22%) 58%,
color-mix(in oklab, var(--wine) 74%, var(--chest) 26%) 100%);
box-shadow:
0 14px 34px rgba(35,22,16,.24),
0 3px 10px rgba(35,22,16,.16),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 0 0 1px rgba(242,221,182,.18);
}
#vintage-cottage .phx-card::before{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background: radial-gradient(120% 85% at 50% -20%, rgba(255,255,255,.16), transparent 60%);
}
/* ตัวหนังสือ */
#vintage-cottage .phx-card h2{
font-family:'Pacifico', cursive; font-size:36px; margin:4px 0 8px;
background: linear-gradient(90deg, rgba(242,221,182,1), rgba(255,255,255,.92));
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow: 0 10px 22px rgba(35,22,16,.26);
}
#vintage-cottage .phx-tag{
color: rgba(242,221,182,.88);
font-weight:700;
margin:2px 0 12px;
letter-spacing:.02em;
}
#vintage-cottage .phx-body{
color: rgba(255,248,240,.92);
line-height:1.95;
font-size:15.5px;
letter-spacing:.1px;
}
#vintage-cottage .phx-body p{ margin:10px 0 }
/* Responsive */
@media (max-width: 600px){
#vintage-cottage .phx-title{ font-size:40px }
#vintage-cottage .phx-card h2{ font-size:30px }
#vintage-cottage .phx-hero, #vintage-cottage .phx-card{ width:92% }
}
</style>
<div id="vintage-cottage">
<div class="post-wrap">
<div id="box01">
<div class="phx-frame">
<h1 class="phx-title"><font size="7">Newburgh</font></h1>
<div class="phx-sub"><font size="3">(รัฐนิวยอร์ก🎠สหรัฐอเมริกา)</font></div>
<figure class="phx-hero">
<img src="https://iili.io/fidjhep.png" alt="Hero Image">
</figure>
<section class="phx-card">
<h2><font size="6">เมืองนิวเบิร์ก</font></h2>
<div class="phx-tag"><font size="4">[ เมืองแห่งอุสหกรรมแห่งการย้อนยุค ]</font></div>
<div class="phx-body">
<p><font size="3">เมืองริมแม่น้ำฮัดสันที่มีประวัติศาสตร์เก่าแก่และภาพลักษณ์แบบ "เมืองอุตสาหกรรมย้อนยุค" เป็นเมืองที่มีความดิบและขรึมเฉพาะตัว มีตึกอิฐเก่าแก่ยุควิกตอเรียผสมกับซากโกดังร้างริมน้ำ ตั้งอยู่บนเนินเขาที่มองเห็นวิวแม่น้ำฮัดสันกว้างสุดลูกหูลูกตา เคยเป็นเมืองกองบัญชาการของ จอร์จ วอชิงตัน ในช่วงสงครามปฏิวัติ บรรยากาศจะมีความเท่แบบวินเทจแต่ก็มีความทรุดโทรมในบางพื้นที่</font></p>
</div>
</section>
</div>
</div>
</div>
</div>
หน้า:
[1]