/* ═══ THAI8LIMBS — raprong.com ═══
ฟอนต์: Kanit (ไทย) · Bebas Neue (หัวข้อ EN) · Share Tech Mono (ตัวเลข)
แก้สีทั้งเว็บ: ดูตัวแปรใน :root ด้านล่าง ═══ */
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/kanit-thai-300.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/kanit-latin-300.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/kanit-thai-400.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/kanit-latin-400.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/kanit-thai-500.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/kanit-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/kanit-thai-600.woff2') format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/kanit-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/bebas-neue-400.woff2') format('woff2');
}
@font-face {
font-family: 'Share Tech Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/share-tech-mono-400.woff2') format('woff2');
}
/* ══ ตัวแปรสี — แก้โทนสีทั้งเว็บได้ที่เดียวตรงนี้ ══ */
:root {
--bg: #080808;
--surface: #0e0e0e;
--surface-low: #141414;
--surface-card: #111111;
--surface-high: #1c1c1c;
--red: #d92b2b;
--red-hover: #f03030;
--gold: #c8a227;
--gold-dim: #8a6e10;
--white: #efefef;
--text: #d4d4d4;
--muted: #8a8a8a;
--outline: #2a2a2a;
--font-display: 'Bebas Neue', 'Kanit', sans-serif; /* หัวข้อใหญ่ EN */
--font-th: 'Kanit', sans-serif; /* ข้อความไทยทั้งหมด */
--font-mono: 'Share Tech Mono', monospace; /* ตัวเลข/ป้ายกำกับ EN */
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ══ ระบบสองภาษา TH/EN ══
ข้อความทุกจุดมีสองก้อนคู่กัน: ไทยEnglish
สลับโดยเปลี่ยน data-lang ที่แท็ก (ปุ่ม EN/ไทย ที่เมนูบน) */
html[data-lang="th"] .t-en { display: none !important; }
html[data-lang="en"] .t-th { display: none !important; }
.lang-btn {
/* ต้องมี Kanit ต่อท้ายด้วย เพราะปุ่มนี้มีคำว่า "ไทย" — ฟอนต์ mono ไม่มีตัวอักษรไทย */
font-family: 'Share Tech Mono', 'Kanit', monospace;
font-size: 12px;
letter-spacing: 0.1em;
background: none;
color: var(--muted);
border: 1px solid var(--outline);
cursor: pointer;
padding: 8px 14px;
transition: color 0.15s, border-color 0.15s;
}
.lang-btn:hover { color: var(--white); border-color: var(--white); }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-th);
font-weight: 300;
font-size: 16px;
line-height: 1.75; /* ภาษาไทยต้องการบรรทัดสูงกว่าอังกฤษ */
overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ══ แถบเมนูบน ══ */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 40px;
height: 60px;
background: rgba(8,8,8,0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 2px solid var(--red);
}
.nav-logo {
font-family: var(--font-display);
font-size: 26px;
letter-spacing: 0.12em;
color: var(--white);
text-decoration: none;
display: flex; align-items: center; gap: 10px;
}
/* รูปโลโก้หน้าตัวหนังสือ — อยากให้ใหญ่/เล็กลง แก้ที่ height บรรทัดล่างนี้ */
.nav-logo-mark {
height: 32px; width: auto;
display: block; flex-shrink: 0;
}
.nav-logo small {
font-family: var(--font-th);
font-size: 11px; font-weight: 400;
color: var(--muted); letter-spacing: 0;
align-self: flex-end; padding-bottom: 3px;
}
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a {
font-family: var(--font-th);
font-size: 14px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
transition: color 0.15s;
position: relative;
}
.nav-links a.active { color: var(--white); }
.nav-links a.active::after {
content: '';
position: absolute; bottom: -6px; left: 0; right: 0;
height: 2px; background: var(--red);
}
.nav-links a:hover { color: var(--white); }
.btn-nav {
font-family: var(--font-th);
font-size: 14px;
font-weight: 600;
background: var(--red);
color: #fff;
border: none; cursor: pointer;
padding: 9px 22px;
transition: background 0.15s;
text-decoration: none;
clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.btn-nav:hover { background: var(--red-hover); }
/* ══ ปุ่มแฮมเบอร์เกอร์ (มือถือ) ══ */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: 1px solid rgba(255,255,255,0.2);
cursor: pointer;
padding: 8px 10px;
width: 40px; height: 40px;
}
.nav-hamburger span {
display: block;
width: 20px; height: 2px;
background: var(--white);
transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ══ เมนูมือถือเต็มจอ ══ */
.mobile-menu {
position: fixed; inset: 0; z-index: 99;
background: #080808;
display: flex; flex-direction: column;
padding: 84px 32px 40px;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
position: absolute; top: 16px; right: 20px;
background: none; border: none;
color: var(--muted); font-size: 24px;
cursor: pointer; transition: color 0.15s;
}
.mobile-menu-close:hover { color: var(--white); }
.mobile-menu-links { list-style: none; display: flex; flex-direction: column; }
.mobile-menu-links li { border-bottom: 1px solid var(--outline); }
.mobile-menu-links a {
display: block;
font-family: var(--font-th);
font-size: 26px;
font-weight: 500;
color: var(--white);
text-decoration: none;
padding: 15px 0;
transition: color 0.15s, padding-left 0.15s;
}
.mobile-menu-links a:hover { color: var(--red); padding-left: 8px; }
/* ══ HERO — จอแรก ══ */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex; align-items: flex-end;
overflow: hidden;
padding: 120px 0 90px 0;
}
.hero-bg {
position: absolute; inset: 0; z-index: 0;
}
.hero-bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 58%;
animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
.hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(100deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.22) 100%),
linear-gradient(to top, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.35) 30%, transparent 55%);
z-index: 1;
}
.hero-content {
position: relative; z-index: 2;
padding: 0 60px;
max-width: 980px;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-th);
font-size: 14px;
font-weight: 500;
color: var(--gold);
margin-bottom: 18px;
}
.hero-badge::before {
content: '';
display: inline-block;
width: 28px; height: 2px;
background: var(--red);
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(64px, 12vw, 140px);
line-height: 0.88;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 22px;
}
.hero h1 .accent { color: var(--red); }
.hero h1 .stroke { -webkit-text-stroke: 2px var(--white); color: transparent; }
.hero-sub {
font-family: var(--font-th);
font-size: 18px;
font-weight: 300;
color: rgba(255,255,255,0.82);
max-width: 520px;
margin-bottom: 26px;
line-height: 1.7;
}
.hero-sub strong { font-weight: 500; color: var(--white); }
.hero-chips {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 36px;
}
.chip {
font-family: var(--font-th);
font-size: 13.5px; font-weight: 400;
color: var(--white);
border: 1px solid rgba(255,255,255,0.25);
background: rgba(0,0,0,0.35);
padding: 6px 16px;
display: inline-flex; align-items: center; gap: 8px;
}
.chip::before {
content: '';
width: 6px; height: 6px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary {
font-family: var(--font-th);
font-size: 16px;
font-weight: 600;
background: var(--red);
color: #fff;
border: none; cursor: pointer;
padding: 15px 38px;
text-decoration: none;
display: inline-block;
transition: background 0.15s, transform 0.15s;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-primary:hover { background: var(--red-hover); transform: translateY(-2px); }
.btn-secondary {
font-family: var(--font-th);
font-size: 16px;
font-weight: 500;
background: transparent;
color: var(--white);
border: 2px solid rgba(255,255,255,0.3);
cursor: pointer;
padding: 13px 36px;
text-decoration: none;
display: inline-block;
transition: border-color 0.15s, transform 0.15s;
}
.btn-secondary:hover { border-color: var(--white); transform: translateY(-2px); }
.hero-video-ctrl {
position: absolute; bottom: 32px; right: 32px; z-index: 3;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
width: 40px; height: 40px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.hero-video-ctrl:hover { background: var(--red); border-color: var(--red); }
.hero-video-ctrl svg { pointer-events: none; }
.hero-scroll {
position: absolute; bottom: 32px; left: 60px; z-index: 2;
display: flex; align-items: center; gap: 12px;
animation: bounce 2s infinite;
}
.hero-scroll-line { width: 40px; height: 1px; background: rgba(255,255,255,0.3); }
.hero-scroll-label {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.24em;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
/* ══ แถบวิ่ง (marquee) ══ */
.marquee {
background: var(--red);
overflow: hidden;
padding: 12px 0;
border-top: 1px solid rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.marquee-track {
display: flex; gap: 0;
width: max-content;
animation: marquee 26s linear infinite;
}
.marquee-track span {
font-family: var(--font-th);
font-size: 15px; font-weight: 500;
color: #fff;
white-space: nowrap;
padding: 0 18px;
display: inline-flex; align-items: center; gap: 36px;
}
.marquee-track span::after { content: '★'; font-size: 11px; color: rgba(255,255,255,0.7); }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ══ โครงร่วมของทุก section ══ */
section { padding: 100px 60px; }
.container { max-width: 1280px; margin: 0 auto; }
.section-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 40px; flex-wrap: wrap;
margin-bottom: 56px;
}
.section-label {
font-family: var(--font-th);
font-size: 15px;
font-weight: 500;
color: var(--red);
margin-bottom: 10px;
display: flex; align-items: center; gap: 12px;
}
.section-label::before {
content: '';
display: inline-block;
width: 24px; height: 2px;
background: var(--red);
flex-shrink: 0;
}
.section-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.2em;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(46px, 6vw, 78px);
line-height: 0.92;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--white);
}
.section-desc {
font-family: var(--font-th);
font-size: 15.5px;
font-weight: 300;
color: var(--muted);
max-width: 380px;
line-height: 1.8;
align-self: flex-end;
}
.center { text-align: center; }
.center .section-label { justify-content: center; }
.center .section-desc { margin: 16px auto 0; max-width: 540px; align-self: auto; }
/* ══ แกลเลอรี่ผลงาน ══ */
.gallery-section { background: var(--surface); }
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
/* ตอนยังไม่กดปุ่ม: ซ่อนการ์ดตั้งแต่ใบที่ 4 เป็นต้นไป
อยากโชว์ 4 ใบก่อนกดปุ่ม → เปลี่ยน n+4 เป็น n+5 */
.gallery-grid.collapsed .gallery-card:nth-child(n+4) { display: none; }
.gallery-more { text-align: center; margin-top: 32px; }
.btn-more {
font-family: var(--font-th);
font-size: 15px; font-weight: 500;
background: transparent;
color: var(--white);
border: 1px solid var(--outline);
cursor: pointer;
padding: 13px 32px;
display: inline-flex; align-items: center; gap: 10px;
transition: border-color 0.15s, color 0.15s;
}
.btn-more:hover { border-color: var(--red); color: var(--red); }
.btn-more svg { flex-shrink: 0; transition: transform 0.25s; }
/* สลับข้อความบนปุ่ม + พลิกลูกศรตามสถานะ กาง/ย่อ */
.btn-more .more-label-hide { display: none; }
.btn-more.is-open .more-label-show { display: none; }
.btn-more.is-open .more-label-hide { display: inline; }
.btn-more.is-open .more-caret { transform: rotate(180deg); }
.gallery-card {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
background: var(--surface-card);
}
.gallery-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
.gallery-card:hover img { transform: scale(1.05); }
/* แถบชื่อใต้การ์ด — ต้องเข้มพอ เพราะรูปสินค้าถ่ายพื้นขาว
ถ้าอยากให้จางลง/เข้มขึ้น แก้ตัวเลข rgba บรรทัด background ด้านล่าง */
.gallery-card .g-info {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 56px 18px 14px;
background: linear-gradient(to top,
rgba(0,0,0,0.94) 0%,
rgba(0,0,0,0.88) 42%,
rgba(0,0,0,0.55) 72%,
transparent 100%);
z-index: 2;
}
.g-name {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: 0.06em;
color: var(--white);
line-height: 1;
}
.g-name .th {
font-family: var(--font-th);
font-size: 17px; font-weight: 500;
display: block; margin-top: 2px;
}
.g-colors {
font-family: var(--font-th);
font-size: 12.5px; font-weight: 300;
color: rgba(255,255,255,0.65);
margin-top: 4px;
}
/* ช่องที่ยังไม่มีรูป — พื้นหลังไล่สีตามโทนของลายนั้น */
.g-pending .g-swatch {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
transition: transform 0.45s ease;
}
.g-pending:hover .g-swatch { transform: scale(1.05); }
.g-swatch::after {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(-45deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 14px);
}
.g-swatch svg { width: 44%; height: auto; opacity: 0.9; position: relative; z-index: 1;
filter: drop-shadow(0 10px 24px rgba(0,0,0,0.55)); }
.g-soon {
position: absolute; top: 12px; right: 12px; z-index: 2;
font-family: var(--font-th);
font-size: 11.5px; font-weight: 400;
color: rgba(255,255,255,0.85);
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.18);
padding: 3px 10px;
}
/* ══ เรื่องของเรา ══ */
.legacy { background: var(--bg); }
.legacy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.legacy-img-box {
width: 100%;
aspect-ratio: 4/5;
background: var(--surface-low);
position: relative;
overflow: hidden;
}
.legacy-badge {
position: absolute; bottom: -1px; left: -1px;
background: var(--red);
color: #fff;
padding: 18px 26px;
z-index: 5;
}
.legacy-badge-num {
font-family: var(--font-display);
font-size: 38px;
line-height: 1;
display: block;
letter-spacing: 0.04em;
}
.legacy-badge-label {
font-family: var(--font-th);
font-size: 12.5px;
font-weight: 400;
display: block;
margin-top: 4px;
opacity: 0.9;
}
.legacy-title {
font-family: var(--font-display);
font-size: clamp(46px, 6vw, 82px);
line-height: 0.92;
text-transform: uppercase;
color: var(--white);
margin-bottom: 28px;
letter-spacing: 0.03em;
}
.legacy-lead {
font-family: var(--font-th);
font-size: 19px; font-weight: 400; font-style: italic;
color: var(--gold);
margin-bottom: 22px;
}
.legacy-text {
font-size: 15.5px;
font-weight: 300;
color: var(--muted);
line-height: 1.9;
margin-bottom: 18px;
}
.legacy-text strong { color: var(--white); font-weight: 500; }
.legacy-close {
font-size: 17px; font-weight: 500;
color: var(--white);
margin-top: 6px;
}
.legacy-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 44px;
padding-top: 36px;
border-top: 2px solid var(--red);
}
.stat-num {
font-family: var(--font-display);
font-size: 52px;
color: var(--white);
line-height: 1;
letter-spacing: 0.04em;
}
.stat-num small { font-size: 26px; color: var(--gold); }
.stat-label {
font-family: var(--font-th);
font-size: 14px;
font-weight: 400;
color: var(--muted);
margin-top: 6px;
}
/* ══ สไลด์โชว์รูปในบ้าน ══ */
.slideshow-wrap { position: relative; overflow: hidden; width: 100%; height: 100%; }
.slideshow { width: 100%; height: 100%; position: relative; }
.slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
.slide.active { opacity: 1; pointer-events: auto; }
.slide img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 6s ease;
}
.slide.active img { transform: scale(1.04); }
.slide-caption {
position: absolute; top: 0; left: 0; right: 0;
background: linear-gradient(rgba(0,0,0,0.78), transparent);
color: rgba(255,255,255,0.88);
font-family: var(--font-th);
font-size: 13px; font-weight: 300;
padding: 12px 16px 36px;
opacity: 0;
transition: opacity 0.4s ease 0.5s;
}
.slide.active .slide-caption { opacity: 1; }
.slide-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 10;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 28px;
line-height: 1;
width: 40px; height: 52px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
display: flex; align-items: center; justify-content: center;
}
.slide-arrow:hover { background: var(--red); border-color: var(--red); }
.slide-prev { left: 12px; }
.slide-next { right: 12px; }
.slide-dots {
position: absolute; bottom: 14px; right: 14px;
display: flex; gap: 6px; z-index: 10;
}
.dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
border: none; cursor: pointer;
transition: background 0.2s, transform 0.2s;
padding: 0;
}
.dot.active { background: var(--gold); transform: scale(1.3); }
/* ══ กว่าจะเป็นกางเกงหนึ่งตัว (4 ขั้น) ══
อยากได้ 2 ช่องต่อแถวบนจอใหญ่ → เปลี่ยน repeat(4,1fr) เป็น repeat(2,1fr) */
.craft-section { background: var(--surface-low); }
.craft-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
}
.craft-card { display: flex; flex-direction: column; }
.craft-img {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--surface-card);
border: 1px solid var(--outline);
margin-bottom: 18px;
}
.craft-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.craft-card:hover .craft-img img { transform: scale(1.06); }
/* เลขขั้นตอนมุมซ้ายล่างของรูป */
.craft-step {
position: absolute; left: 0; bottom: 0;
font-family: var(--font-display);
font-size: 26px; line-height: 1;
letter-spacing: 0.06em;
color: #fff;
background: var(--red);
padding: 8px 14px 6px;
z-index: 2;
}
.craft-title {
font-family: var(--font-th);
font-size: 17.5px; font-weight: 600;
color: var(--white);
margin-bottom: 8px;
line-height: 1.45;
}
.craft-text {
font-family: var(--font-th);
font-size: 14px; font-weight: 300;
color: var(--muted);
line-height: 1.8;
}
.craft-text strong { color: var(--gold); font-weight: 500; }
@media (max-width: 1100px) {
.craft-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
.craft-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* ══ วิธีสั่ง 5 ขั้น ══ */
.process-section { background: var(--surface); }
.process-steps {
display: flex; align-items: flex-start;
gap: 0; flex-wrap: wrap; justify-content: center;
}
.process-step {
flex: 1; min-width: 168px; max-width: 210px;
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 0 12px;
}
.step-num {
font-family: var(--font-display);
font-size: 64px; line-height: 1;
color: rgba(217,43,43,0.14);
margin-bottom: -12px;
letter-spacing: 0.04em;
}
.step-icon {
width: 60px; height: 60px;
border: 2px solid var(--red);
display: flex; align-items: center; justify-content: center;
color: var(--red);
margin-bottom: 16px;
background: var(--bg);
}
.step-title {
font-family: var(--font-th);
font-size: 17px; font-weight: 600;
color: var(--white);
margin-bottom: 8px;
}
.step-desc {
font-family: var(--font-th);
font-size: 13.5px; font-weight: 300;
color: var(--muted); line-height: 1.7;
}
.step-desc strong { color: var(--gold); font-weight: 500; }
.step-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.step-btn {
font-family: var(--font-th);
font-size: 12.5px; font-weight: 500;
padding: 7px 14px; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: filter 0.15s; color: #fff;
}
.step-btn:hover { filter: brightness(1.12); }
.line-btn { background: #06c755; }
.fb-btn { background: #1877f2; }
.step-arrow {
font-size: 22px; color: var(--red);
align-self: center; padding: 0 4px;
margin-top: -20px; opacity: 0.4;
}
/* ══ ราคา ══ */
.pricing-section { background: var(--bg); }
.pricing-hero-card {
background: var(--surface-card);
border: 1px solid var(--outline);
max-width: 820px;
margin: 0 auto;
padding: 56px 60px;
position: relative;
overflow: hidden;
}
.pricing-hero-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red), var(--gold));
}
.pricing-starting-label {
font-family: var(--font-th);
font-size: 14px; font-weight: 500;
color: var(--gold);
margin-bottom: 10px;
}
.pricing-big-price {
font-family: var(--font-display);
font-size: clamp(72px, 12vw, 110px);
line-height: 1;
color: var(--white);
letter-spacing: 0.02em;
}
.pricing-big-price .plus { font-size: 0.45em; color: var(--gold); vertical-align: super; }
.pricing-pair-label {
font-family: var(--font-th);
font-size: 14px; font-weight: 300;
color: var(--muted);
margin-bottom: 8px;
}
.pricing-divider { height: 1px; background: var(--outline); margin: 34px 0; }
.pricing-custom-title {
font-family: var(--font-th);
font-size: 17px; font-weight: 600;
color: var(--white);
margin-bottom: 20px;
}
.pricing-custom-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
margin-bottom: 32px;
}
.custom-item {
display: flex; align-items: flex-start; gap: 12px;
background: var(--surface-low);
padding: 14px 16px;
border: 1px solid rgba(255,255,255,0.04);
}
.custom-item-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--red);
margin-top: 9px; flex-shrink: 0;
}
.custom-item-text { font-size: 13px; font-weight: 300; color: var(--text); line-height: 1.6; }
.custom-item-text strong {
display: block; color: var(--white);
font-size: 13.5px; font-weight: 500;
margin-bottom: 1px;
}
.pricing-factors {
background: rgba(200,162,39,0.06);
border: 1px solid rgba(200,162,39,0.22);
padding: 18px 22px;
margin-bottom: 30px;
}
.pricing-factors-title {
font-family: var(--font-th);
font-size: 13px; font-weight: 500;
color: var(--gold);
margin-bottom: 10px;
}
.pricing-factors-list { display: flex; flex-wrap: wrap; gap: 8px; }
.factor-tag {
font-family: var(--font-th);
font-size: 12.5px; font-weight: 300;
color: var(--text);
background: rgba(255,255,255,0.04);
border: 1px solid var(--outline);
padding: 4px 12px;
}
.pricing-cta-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pricing-cta-note { font-size: 13px; font-weight: 300; color: var(--muted); }
.team-card {
max-width: 820px;
margin: 20px auto 0;
background: var(--surface-card);
border: 1px solid var(--outline);
border-left: 3px solid var(--gold);
padding: 24px 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.team-card-title { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.team-card-sub { font-size: 13.5px; font-weight: 300; color: var(--muted); }
.team-card .btn-secondary { font-size: 14px; padding: 10px 24px; border-color: var(--gold-dim); color: var(--gold); }
.team-card .btn-secondary:hover { border-color: var(--gold); }
/* ══ ระยะงาน ══ */
.timeline-section { background: var(--surface); }
.ship-timeline { display: flex; gap: 0; margin-top: 56px; position: relative; }
.ship-timeline::before {
content: '';
position: absolute; top: 24px; left: 0; right: 0;
height: 2px; background: var(--outline);
z-index: 0;
}
.ship-step { flex: 1; text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.ship-step-dot {
width: 48px; height: 48px;
background: var(--surface-card);
border: 2px solid var(--outline);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px;
font-family: var(--font-display);
font-size: 18px;
color: var(--muted);
}
.ship-step.active .ship-step-dot {
border-color: var(--red); color: var(--red);
background: rgba(217,43,43,0.08);
}
.ship-step-label {
font-family: var(--font-th);
font-size: 14px; font-weight: 500;
color: var(--muted);
margin-bottom: 2px;
}
.ship-step.active .ship-step-label { color: var(--white); }
.ship-step-days {
font-family: var(--font-th);
font-size: 15px; font-weight: 500;
color: var(--gold);
}
.note-box {
margin-top: 44px;
padding: 20px 26px;
background: rgba(217,43,43,0.06);
border-left: 3px solid var(--red);
font-family: var(--font-th);
font-size: 14.5px;
font-weight: 300;
color: var(--muted);
line-height: 1.8;
}
.note-box strong { color: var(--white); font-weight: 500; }
/* ══ ตารางไซซ์ ══ */
.size-section { background: var(--bg); }
.size-table-wrap { overflow-x: auto; margin-top: 48px; }
.size-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-th);
min-width: 560px;
}
.size-table th {
font-family: var(--font-th);
font-size: 14px; font-weight: 600;
color: var(--white);
background: var(--surface-card);
padding: 14px 18px;
text-align: center;
border-bottom: 2px solid var(--red);
white-space: nowrap;
}
.size-table th:first-child { text-align: left; }
.size-table td {
padding: 13px 18px;
text-align: center;
color: var(--muted);
font-weight: 300;
border-bottom: 1px solid var(--outline);
font-size: 14px;
}
.size-table td:first-child {
font-family: var(--font-display);
font-size: 21px;
color: var(--white);
text-align: left;
letter-spacing: 0.08em;
}
.size-table tr:hover td { background: var(--surface-card); }
.size-table .row-custom td { color: var(--gold); }
.size-table .row-custom td:first-child { font-family: var(--font-th); font-size: 16px; font-weight: 600; color: var(--gold); }
.size-measure-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 40px;
}
.measure-card {
background: var(--surface-card);
border: 1px solid var(--outline);
padding: 24px;
}
.measure-title {
font-family: var(--font-th);
font-size: 16px; font-weight: 600;
color: var(--white);
margin-bottom: 12px;
}
.measure-steps { list-style: none; counter-reset: step-counter; }
.measure-steps li {
counter-increment: step-counter;
font-size: 14px; font-weight: 300;
color: var(--muted);
padding: 8px 0;
border-bottom: 1px solid var(--outline);
display: flex; gap: 12px; align-items: flex-start;
line-height: 1.6;
}
.measure-steps li:last-child { border-bottom: none; }
.measure-steps li::before {
content: counter(step-counter);
font-family: var(--font-display);
font-size: 18px;
color: var(--red);
flex-shrink: 0;
min-width: 20px;
}
/* ══ คำถามที่พบบ่อย ══ */
.faq-section { background: var(--surface); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--outline); }
.faq-q {
width: 100%; display: flex; align-items: center;
justify-content: space-between; gap: 16px;
background: none; border: none; cursor: pointer;
color: var(--white); text-align: left;
font-family: var(--font-th);
font-size: 16.5px; font-weight: 500;
padding: 20px 0; transition: color 0.15s;
}
.faq-q:hover, .faq-q.open { color: var(--red); }
.faq-icon { flex-shrink: 0; transition: transform 0.3s; color: var(--muted); }
.faq-q.open .faq-icon { transform: rotate(180deg); color: var(--red); }
.faq-a {
font-family: var(--font-th);
font-size: 14.5px; font-weight: 300;
color: var(--muted); line-height: 1.85;
max-height: 0; overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
padding: 0;
}
.faq-a.open { padding-bottom: 22px; }
.faq-a strong { color: var(--white); font-weight: 500; }
/* ══ ติดต่อ ══ */
.contact { background: var(--bg); }
.contact-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
margin-top: 56px;
}
.contact-col-title {
font-family: var(--font-th);
font-size: 20px; font-weight: 600;
color: var(--white);
margin-bottom: 24px;
}
.channel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.channel-btn {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; text-decoration: none;
color: var(--white);
font-family: var(--font-th);
font-size: 15.5px; font-weight: 500;
border: 1px solid var(--outline);
background: var(--surface-card);
transition: border-color 0.15s, transform 0.15s;
cursor: pointer; text-align: left; width: 100%;
}
.channel-btn:hover { border-color: var(--red); transform: translateY(-2px); }
.channel-wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
.channel-list { grid-template-columns: 1fr; }
}
.channel-icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.channel-sub {
font-size: 12.5px; font-weight: 300;
color: var(--muted);
display: block; margin-top: 1px;
}
.prep-box {
margin-top: 24px;
background: rgba(200,162,39,0.06);
border: 1px solid rgba(200,162,39,0.22);
padding: 20px 24px;
}
.prep-title { font-size: 14.5px; font-weight: 600; color: var(--gold); margin-bottom: 10px; }
.prep-list { list-style: none; }
.prep-list li {
font-size: 13.5px; font-weight: 300;
color: var(--text);
padding: 4px 0;
display: flex; gap: 10px; align-items: flex-start;
line-height: 1.6;
}
.prep-list li::before { content: '✓'; color: var(--gold); font-weight: 600; flex-shrink: 0; }
.hq-label {
font-family: var(--font-th);
font-size: 13px; font-weight: 500;
color: var(--red);
margin-bottom: 4px;
}
.hq-value { font-size: 14.5px; font-weight: 300; color: var(--text); margin-bottom: 18px; line-height: 1.8; }
.hq-value a { color: inherit; text-decoration: none; }
.hq-value a:hover { color: var(--white); }
.hq-link {
font-family: var(--font-th);
font-size: 13.5px; font-weight: 500;
color: var(--red);
text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
margin-top: 2px; margin-bottom: 24px;
transition: color 0.15s;
}
.hq-link:hover { color: var(--white); }
.hq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* ══ ท้ายเว็บ ══ */
footer {
background: #050505;
border-top: 2px solid var(--red);
padding: 26px 60px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
}
.footer-logo {
font-family: var(--font-display);
font-size: 22px; letter-spacing: 0.12em;
color: var(--white); text-decoration: none;
}
.footer-links { display: flex; gap: 26px; list-style: none; flex-wrap: wrap; }
.footer-links a {
font-family: var(--font-th);
font-size: 13.5px; font-weight: 400;
color: var(--muted); text-decoration: none;
transition: color 0.15s;
}
.footer-links a:hover { color: var(--white); }
.footer-copy {
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.1em;
color: rgba(255,255,255,0.25);
}
/* ══ ปุ่มลอย LINE / Messenger ══ */
.float-btns {
position: fixed; bottom: 28px; right: 24px;
display: flex; flex-direction: column; gap: 10px;
z-index: 200;
}
.float-btn {
width: 50px; height: 50px;
display: flex; align-items: center; justify-content: center;
text-decoration: none; color: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,0.6);
transition: transform 0.15s;
border: none; cursor: pointer;
clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
position: relative;
}
.float-btn:hover { transform: scale(1.08); }
.float-line { background: #06c755; }
.float-fb { background: #1877f2; }
.float-label {
position: absolute; right: 60px;
background: rgba(0,0,0,0.9);
color: #fff;
font-family: var(--font-th);
font-size: 12.5px; font-weight: 400;
padding: 5px 12px; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 0.15s;
}
.float-btn:hover .float-label { opacity: 1; }
/* ══ หน้าต่างเลือกช่องทางติดต่อ ══ */
.modal-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(0,0,0,0.9);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.25s;
padding: 20px;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
background: #0e0e0e;
border-top: 3px solid var(--red);
border-left: 1px solid var(--outline);
border-right: 1px solid var(--outline);
border-bottom: 1px solid var(--outline);
max-width: 460px; width: 100%;
padding: 38px 34px;
transform: translateY(16px);
transition: transform 0.25s;
position: relative;
max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: none; }
.modal-title {
font-family: var(--font-th);
font-size: 24px; font-weight: 600;
color: var(--white); margin-bottom: 4px;
}
.modal-sub {
font-family: var(--font-th);
font-size: 14px; font-weight: 300;
color: var(--muted); margin-bottom: 24px;
}
.modal-close {
position: absolute; top: 14px; right: 16px;
background: none; border: none; color: var(--muted);
font-size: 22px; cursor: pointer; line-height: 1;
transition: color 0.15s;
}
.modal-close:hover { color: var(--red); }
.modal-options { display: flex; flex-direction: column; gap: 10px; }
.modal-btn {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; text-decoration: none;
color: var(--white);
font-family: var(--font-th);
font-size: 16px; font-weight: 500;
border: 1px solid var(--outline);
transition: border-color 0.15s;
background: none; width: 100%;
}
.modal-btn:hover { border-color: var(--red); }
.modal-btn-icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.modal-btn-sub {
font-family: var(--font-th);
font-size: 12px; font-weight: 300;
color: var(--muted);
display: block; margin-top: 1px;
}
.modal-prep {
margin-top: 20px;
border-top: 1px solid var(--outline);
padding-top: 16px;
font-size: 13px; font-weight: 300;
color: var(--muted); line-height: 1.8;
}
.modal-prep strong { color: var(--gold); font-weight: 500; }
/* ══ กล่อง QR WeChat ══ */
.qr-box { text-align: center; }
.qr-box img {
width: 230px; max-width: 100%;
background: #fff;
padding: 12px;
display: block;
margin: 0 auto 16px;
}
.qr-id {
font-family: var(--font-th);
font-size: 15px; font-weight: 500;
color: var(--white);
}
.qr-note {
font-size: 13px; font-weight: 300;
color: var(--muted); margin-top: 6px; line-height: 1.7;
}
/* ══ เอฟเฟกต์ค่อยๆ โผล่ตอนเลื่อน ══ */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
/* ══ เท็กซ์เจอร์เกรนบางๆ ทั้งหน้า ══ */
body::after {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.028;
pointer-events: none;
z-index: 9999;
}
/* ══ ลดแอนิเมชันสำหรับคนที่ตั้งค่าไว้ ══ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-bg img { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.hero-scroll { animation: none; }
/* หมายเหตุ: แถบวิ่ง (.marquee-track) ตั้งใจให้วิ่งตลอด แม้เครื่องจะเปิดโหมด
"ลดการเคลื่อนไหว" ไว้ — Aum สั่งให้วิ่งเสมอ
ถ้าอยากให้หยุดตามการตั้งค่าเครื่อง เพิ่มบรรทัดนี้กลับเข้ามา:
.marquee-track { animation: none; flex-wrap: wrap; } */
}
/* ══ จอเล็ก (มือถือ/แท็บเล็ต) ══ */
@media (max-width: 900px) {
section { padding: 72px 20px; }
nav { padding: 0 20px; }
.nav-links { display: none; }
.btn-nav { display: none; }
.nav-hamburger { display: flex; }
.hero { padding: 100px 0 90px 0; }
.hero-content { padding: 0 24px; }
.hero-scroll { left: 24px; }
.hero-video-ctrl { bottom: 88px; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.legacy-grid { grid-template-columns: 1fr; gap: 48px; }
.contact-grid { grid-template-columns: 1fr; gap: 48px; }
.size-measure-grid { grid-template-columns: 1fr; }
.step-arrow { display: none; }
.process-step { min-width: 45%; max-width: none; margin-bottom: 36px; }
.pricing-hero-card { padding: 36px 24px; }
.pricing-cta-row { flex-direction: column; align-items: flex-start; }
.team-card { padding: 22px 24px; }
.ship-timeline { flex-wrap: wrap; gap: 20px 0; }
.ship-timeline::before { display: none; }
.ship-step { flex: 1 1 33%; }
footer { flex-direction: column; text-align: center; padding: 24px 20px; }
}
@media (max-width: 520px) {
.gallery-grid { grid-template-columns: 1fr; }
.hero h1 { font-size: clamp(56px, 17vw, 84px); }
}