/* ════════════════════════════════════════════════════════════════
INNOLIGENT AUTOMATION — Design System v2
ไฟล์นี้ใช้ร่วมกันทุกหน้า แก้ที่เดียวเปลี่ยนทั้งเว็บ
ลำดับ: ฟอนต์ → ตัวแปร → พื้นฐาน → ระบบแอนิเมชัน → คอมโพเนนต์ → responsive
════════════════════════════════════════════════════════════════ */
/* ── ฟอนต์หัวข้อ: Kanit self-host (subset ไทย+ละติน แปลงเป็น woff2 แล้ว 16 KB/น้ำหนัก) ── */
@font-face{
font-family:'Kanit'; font-style:normal; font-weight:400; font-display:swap;
src:url('fonts/kanit-400.woff2') format('woff2');
}
@font-face{
font-family:'Kanit'; font-style:normal; font-weight:500; font-display:swap;
src:url('fonts/kanit-500.woff2') format('woff2');
}
@font-face{
font-family:'Kanit'; font-style:normal; font-weight:600; font-display:swap;
src:url('fonts/kanit-600.woff2') format('woff2');
}
/* ฟอนต์เนื้อความ Anuphan + ตัวเลขเทคนิค IBM Plex Mono
โหลดผ่าน ใน ของแต่ละหน้า เร็วกว่า @import ตรงนี้ */
:root{
/* ── รูปภาพ: เปลี่ยน path ตรงนี้ที่เดียว ─────────────────────
★ กติกา: หนึ่งไฟล์ = หนึ่งช่อง ห้ามใช้ไฟล์เดียวกันสองที่ ★
ช่องที่ยังไม่มีไฟล์จะตกไปใช้ไล่สีที่เขียนต่อท้ายแทน ไม่พัง
และสไลด์ hero ที่ยังไม่มีไฟล์ JS จะถอดออกให้เอง ไม่มีสไลด์ว่างคั่น
prompt เจนภาพที่ยังขาดอยู่ใน image-prompts.txt */
/* สไลด์พื้นหลัง hero — แนวนอน 16:9 สว่าง ★ ซ้าย 45% ต้องโล่ง ★ */
--img-hero: url('img/hero-station.png');
--img-hero-2: url('img/hero-fleet.png'), linear-gradient(120deg,#CFE2EE,#EAF2F7);
--img-hero-3: url('img/hero-laundry.png'), linear-gradient(120deg,#D3E4F2,#EDF3F8);
--img-hero-4: url('img/hero-control.png'), linear-gradient(120deg,#CADEEB,#E9F1F6);
/* บล็อกผลงานเรือธง PT — เกือบจัตุรัส แผ่นป้ายลอยอยู่มุมล่างซ้าย
ครึ่งล่างของภาพจะโดนไล่สีเข้มทับ ของสำคัญให้อยู่ครึ่งบน */
--img-case: url('img/case-pt.png'), linear-gradient(155deg,#0E6C86 0%,#0B3A52 48%,#082033 100%);
/* showcase.png = ภาพตัดถังใต้ดิน ★ ยังไม่ได้ใช้บนหน้าแรกแล้ว ★
จองไว้ให้หน้า atg.html ที่จะทำ พร้อมกับเนื้อหา "น้ำมันหายได้ 3 จุด" */
--img-showcase: url('img/showcase.png'), linear-gradient(150deg,#0E6C86,#082033);
/* แถบ 3 ช่องแยกกลุ่มลูกค้า — เกือบจัตุรัส เนื้อหาอยู่ขอบล่าง */
--img-seg-1: url('img/seg-station.png');
--img-seg-2: url('img/seg-fleet.png');
--img-seg-3: url('img/seg-upgrade.png');
/* แถบหัวการ์ดโซลูชัน — แนวนอนแบน ครึ่งบนเห็นภาพ ครึ่งล่างมีป้ายทับ */
--img-atg: url('img/prod-atg.png');
--img-pos: url('img/prod-pos.png');
--img-ffm: url('img/prod-ffm.png');
--img-crystal: url('img/prod-crystal.jpg'); /* ภาพเรนเดอร์ร้านจริงของ Crystal */
/* รูปใหญ่ในหัวข้อเกี่ยวกับเรา — แนวตั้ง มีคำบรรยายขาวที่ขอบล่าง */
--img-about: url('img/team-onsite.png');
/* บล็อกขั้นตอนการทำงาน — สีเข้ม ยังไม่มีไฟล์ก็ใช้ไล่สีสำรองไปก่อน */
--img-process: url('img/bg-process.png'), linear-gradient(155deg,#0C2740,#071B2D);
/* บล็อกใบรับรอง — พื้นสว่าง ต้องจางพอที่ตัวหนังสือสีเข้มยังอ่านสบาย */
--img-certs: url('img/bg-certs.png');
/* แถบปิดท้าย — แนวนอนยาว ยึดขอบล่างของภาพ */
--img-cta: url('img/bg-cta.png');
/* og-cover.png ไม่ได้อยู่ในลิสต์นี้เพราะไม่ได้แสดงบนหน้าเว็บ
มันอยู่ในแท็ก og:image ของแต่ละหน้า คือภาพตอนเอาลิงก์ไปแปะใน LINE/Facebook */
/* ── สีพื้น ── */
--bg: #F4F8FB;
--bg-2: #ECF3F9;
--surface: #FFFFFF;
--tint: #E9F2F8;
--ink: #082033; /* หัวข้อ + แผงเข้ม + footer */
--ink-2: #123449;
--body: #3D586E;
--muted: #718DA3;
--line: #E3ECF3;
--line-2: #CBDAE6;
/* ── สีแบรนด์ ── */
--brand: #00738F; /* ปุ่ม/ลิงก์ ผ่านค่าคอนทราสต์บนขาว */
--brand-dk: #005872;
--brand-dp: #00435A;
--brand-lt: #00C8F0; /* ⚠ ใช้บนพื้นเข้มเท่านั้น คอนทราสต์บนขาวไม่ผ่าน */
--brand-50: #F1F8FB;
--brand-100: #DFEFF5;
--brand-200: #B9DEEB;
--amber: #B4740A;
--amber-lt: #F5A623;
--green: #12855D;
--green-lt: #3FD9A0;
/* ── แผงอุปกรณ์สีเข้ม (คือหน้าจอ Console ของจริง ห้ามทำให้สว่าง) ── */
--dev: #071B2D;
--dev-2: #0B2740;
--dev-3: #0E2B47;
--dev-line: #1B4665;
--dev-text: #DCEEF7;
--dev-dim: #8FAEC4;
/* ── ฟอนต์ ── */
--f-display: 'Kanit', 'Anuphan', system-ui, sans-serif; /* หัวข้อ ปุ่ม เมนู ตัวเลขใหญ่ */
--f: 'Anuphan', system-ui, -apple-system, sans-serif; /* เนื้อความ */
--f-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ค่าที่วัดได้ */
/* ── ระยะและรูปทรง ── */
--w: 1240px;
--r-xs: 8px;
--r-sm: 12px;
--r: 18px;
--r-lg: 26px;
--r-xl: 34px;
--pill: 999px;
/* ── เงา: หลายชั้น ผสมสีน้ำเงินของแบรนด์ ไม่ใช่สีดำล้วน ── */
--sh-1: 0 1px 2px rgba(8,32,51,.05), 0 2px 8px -4px rgba(8,32,51,.09);
--sh-2: 0 2px 4px rgba(8,32,51,.04), 0 14px 30px -16px rgba(8,32,51,.24);
--sh-3: 0 4px 10px rgba(8,32,51,.04), 0 30px 60px -30px rgba(8,32,51,.34);
--sh-4: 0 10px 20px rgba(8,32,51,.05), 0 54px 96px -48px rgba(8,32,51,.52);
--sh-brand: 0 18px 40px -20px rgba(0,115,143,.5);
/* ── จังหวะการเคลื่อนไหว ── */
--ease: cubic-bezier(.22,1,.36,1); /* หลัก: ออกตัวเร็ว จบนุ่ม */
--ease-soft: cubic-bezier(.4,0,.2,1);
--t-fast: .18s;
--t: .32s;
--t-slow: .62s;
}
/* ════════════════════════════════════════════════════════════
พื้นฐาน
════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; -webkit-text-size-adjust:100%; }
body{
margin:0; background:var(--bg); color:var(--body);
font-family:var(--f); font-weight:300; font-size:17px; line-height:1.8;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:clip;
}
body.lock{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0; max-width:66ch; }
::selection{ background:var(--brand-200); color:var(--ink); }
h1,h2,h3,h4{
margin:0; font-family:var(--f-display); color:var(--ink);
font-weight:600; line-height:1.34;
}
/* Kanit เป็นฟอนต์ทรงสูง ภาษาไทยต้องการที่ว่างให้สระบนกับวรรณยุกต์ จึงไม่บีบ line-height */
h1{ font-size:clamp(2.1rem, 1.25rem + 3.4vw, 3.55rem); line-height:1.26; letter-spacing:-.015em; }
h2{ font-size:clamp(1.6rem, 1.15rem + 1.9vw, 2.45rem); line-height:1.3; letter-spacing:-.012em; }
h3{ font-size:1.16rem; line-height:1.45; }
h4{ font-size:1rem; }
b,strong{ font-weight:500; color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px; }
.skip{
position:absolute; left:16px; top:-70px; z-index:200;
background:var(--brand); color:#fff; padding:12px 22px; border-radius:var(--pill);
font-family:var(--f-display); font-size:.92rem; text-decoration:none;
transition:top var(--t) var(--ease);
}
.skip:focus{ top:16px; }
/* ── โครงหน้า ── */
.wrap{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:26px; }
.sect{ padding-block:clamp(74px, 7.5vw, 112px); position:relative; }
.sect--tight{ padding-block:clamp(56px, 5vw, 76px); }
.sect--tint{ background:var(--tint); border-block:1px solid var(--line); }
/* บล็อกใบรับรองมีภาพกราฟิกจางๆ รองอยู่ ทับด้วยสีพื้นเดิมแบบโปร่ง 72%
เพื่อกดให้จางพอที่ตัวหนังสือสีเข้มยังอ่านสบาย */
.sect--tint.has-bg{
background-color:var(--tint);
background-image:linear-gradient(rgba(233,242,248,.72), rgba(233,242,248,.72)), var(--img-certs);
background-size:cover; background-position:center;
}
.sect--white{ background:var(--surface); border-block:1px solid var(--line); }
.head{ max-width:60ch; margin-bottom:clamp(38px, 4vw, 56px); }
.head--center{ margin-inline:auto; text-align:center; }
.head--center p{ margin-inline:auto; }
.head p{ color:var(--muted); margin-top:16px; font-size:1.06rem; }
/* ════════════════════════════════════════════════════════════
ชั้นตกแต่งพื้นหลัง — CSS ล้วน ไม่เพิ่มไฟล์ภาพสักไฟล์
ตรงกลางหน้ามีบล็อกพื้นเรียบติดกัน 8 บล็อก อ่านแล้วเหมือนเอกสาร
ชั้นพวกนี้ทำให้พื้นมีชีวิตโดยไม่แย่งสายตาจากเนื้อหา
ใช้ isolation:isolate คู่กับ z-index:-1 เพื่อให้ชั้นตกแต่งอยู่เหนือ
พื้นหลังของบล็อก แต่ยังอยู่ใต้เนื้อหา โดยไม่ต้องไปยุ่งกับ z-index ของ .wrap
════════════════════════════════════════════════════════════ */
.deco{ position:relative; isolation:isolate; overflow:hidden; }
.deco::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* ก้อนแสงนุ่ม วางคนละมุมในแต่ละบล็อก จะได้ไม่ดูซ้ำกันตอนเลื่อนผ่าน */
.deco--a::before{
background:
radial-gradient(680px 460px at 6% -12%, rgba(0,200,240,.14), transparent 62%),
radial-gradient(560px 400px at 97% 110%, rgba(0,115,143,.11), transparent 60%);
}
.deco--b::before{
background:
radial-gradient(640px 440px at 100% -8%, rgba(0,200,240,.13), transparent 60%),
radial-gradient(540px 390px at 2% 106%, rgba(0,115,143,.10), transparent 62%);
}
.deco--c::before{
background:radial-gradient(1000px 320px at 50% -4%, rgba(0,200,240,.11), transparent 66%);
}
/* ตารางเส้นบางแบบแบบงานวิศวกรรม จางมาก มีไว้ไม่ให้พื้นขาวตาย
มาสก์ให้จางหายไปทางล่าง จะได้ไม่ตัดกับบล็อกถัดไป */
.deco--grid::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:
linear-gradient(rgba(8,32,51,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,32,51,.05) 1px, transparent 1px);
background-size:60px 60px;
-webkit-mask-image:radial-gradient(92% 74% at 50% 0%, #000, transparent 74%);
mask-image:radial-gradient(92% 74% at 50% 0%, #000, transparent 74%);
}
/* ════════════════════════════════════════════════════════════
บล็อกสีเข้ม — ใช้คั่นจังหวะไม่ให้หน้าสว่างยาวเกินไป
cyan สด --brand-lt ใช้ได้เฉพาะบนพื้นเข้มแบบนี้เท่านั้น
════════════════════════════════════════════════════════════ */
.sect--dark{
color:#C3D8E6; border-block:1px solid rgba(255,255,255,.09);
background-color:var(--ink);
background-image:
radial-gradient(820px 520px at 12% 0%, rgba(0,200,240,.16), transparent 62%),
radial-gradient(720px 480px at 88% 100%, rgba(0,115,143,.24), transparent 64%),
var(--img-process);
background-size:cover; background-position:center bottom;
position:relative; isolation:isolate; overflow:hidden;
}
.sect--dark::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size:26px 26px;
}
.sect--dark h2, .sect--dark h3{ color:#fff; }
.sect--dark .head p{ color:#9DB8CB; }
.sect--dark .kicker{
background:rgba(0,200,240,.1); border-color:rgba(0,200,240,.26); color:#7FE3FF;
}
.sect--dark .kicker::before{ background:var(--brand-lt); }
/* ไทม์ไลน์บนพื้นเข้ม */
.sect--dark .steps::before{ background:linear-gradient(90deg, var(--brand-lt), rgba(0,200,240,.14)); }
.sect--dark .step::before{
background:rgba(255,255,255,.05); border-color:var(--brand-lt); color:var(--brand-lt);
}
.sect--dark .step:hover::before{ background:var(--brand-lt); color:var(--ink); }
.sect--dark .step p{ color:#9DB8CB; }
.sect--dark .step .when{
background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); color:#DCEEF7;
}
.kicker{
display:inline-flex; align-items:center; gap:9px;
font-family:var(--f-display); font-size:.8rem; font-weight:500; letter-spacing:.02em;
color:var(--brand-dk); background:var(--brand-50);
border:1px solid var(--brand-100); border-radius:var(--pill);
padding:6px 16px 6px 13px; margin-bottom:20px;
align-self:flex-start; /* ไม่งั้นในกล่อง flex column มันจะยืดเต็มความกว้าง */
}
.kicker::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex-shrink:0; }
/* ── ปุ่ม ── */
.btn{
position:relative; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:15px 30px; border-radius:var(--pill); text-decoration:none;
font-family:var(--f-display); font-size:.98rem; font-weight:500; line-height:1.5;
border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
transition:background var(--t) var(--ease), color var(--t) var(--ease),
border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
transform var(--t) var(--ease);
}
.btn > *{ position:relative; z-index:1; }
/* แสงกวาดผ่านตอน hover */
.btn::after{
content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
transform:translateX(-130%); transition:transform .62s var(--ease);
}
.btn:hover::after{ transform:translateX(130%); }
.btn:active{ transform:translateY(1px); }
.btn--fill{ background:var(--brand); color:#fff; box-shadow:var(--sh-brand); }
.btn--fill:hover{ background:var(--brand-dk); box-shadow:0 22px 46px -20px rgba(0,115,143,.62); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-2); transform:translateY(-2px); }
.btn--line{ background:var(--surface); border-color:var(--line-2); color:var(--ink); }
.btn--line:hover{ border-color:var(--brand); color:var(--brand); box-shadow:var(--sh-2); transform:translateY(-2px); }
.btn--white{ background:#fff; color:var(--ink); }
.btn--white:hover{ box-shadow:var(--sh-3); transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(255,255,255,.34); color:#fff; }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn--sm{ padding:11px 22px; font-size:.9rem; }
.btn--block{ width:100%; }
.btn__ar{ transition:transform var(--t) var(--ease); flex-shrink:0; }
.btn:hover .btn__ar{ transform:translateX(4px); }
/* ════════════════════════════════════════════════════════════
ระบบแอนิเมชันตอนเลื่อน
ซ่อนเฉพาะเมื่อ JS ทำงาน (html.js) — ปิด JS แล้วยังอ่านเนื้อหาได้ครบ
ขยับด้วย transform/opacity เท่านั้น จึงลื่นระดับ 60fps
════════════════════════════════════════════════════════════ */
.js [data-reveal]{
opacity:0;
transform:translate3d(var(--rv-x,0), var(--rv-y,24px), 0) scale(var(--rv-s,1));
transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
transition-delay:var(--rv-d, 0ms);
will-change:opacity, transform;
}
.js [data-reveal="left"] { --rv-x:-28px; --rv-y:0; }
.js [data-reveal="right"]{ --rv-x:28px; --rv-y:0; }
.js [data-reveal="zoom"] { --rv-y:14px; --rv-s:.965; }
.js [data-reveal="up"] { --rv-y:42px; }
.js [data-reveal].in{ opacity:1; transform:none; will-change:auto; }
/* ════════════════════════════════════════════════════════════
แถบบนสุด + เมนู
════════════════════════════════════════════════════════════ */
.topbar{ background:var(--ink); color:#A9C4D6; font-size:.82rem; position:relative; z-index:1; }
.topbar__in{ display:flex; align-items:center; gap:22px; height:40px; }
.topbar a{ text-decoration:none; transition:color var(--t-fast) var(--ease-soft); }
.topbar a:hover{ color:#fff; }
.topbar__sp{ margin-left:auto; }
.topbar__lang{ display:flex; gap:7px; align-items:center; }
.topbar__lang b{ color:#fff; font-weight:500; font-family:var(--f-display); }
.topbar__dot{
display:inline-block; width:6px; height:6px; border-radius:50%;
background:var(--green-lt); margin-right:8px; vertical-align:middle;
animation:pulseDot 2.6s ease-out infinite;
}
@keyframes pulseDot{
0% { box-shadow:0 0 0 0 rgba(63,217,160,.6); }
70% { box-shadow:0 0 0 7px rgba(63,217,160,0); }
100%{ box-shadow:0 0 0 0 rgba(63,217,160,0); }
}
/* ── แถบเมนูแบบกระจกฝ้า ──
★★ backdrop-filter ต้องอยู่ที่ ::before ห้ามอยู่ที่ .nav เอง ★★
เพราะธาตุที่มี backdrop-filter จะกลายเป็น "กรอบอ้างอิง" ให้ลูกที่เป็น
position:fixed ทุกตัว ซึ่งลิ้นชักเมนูมือถือ .nav__links เป็น fixed
และเป็นลูกของ .nav พอดี ผลคือ bottom:0 ของลิ้นชักไปวัดจากขอบล่างของ
แถบเมนูแทนที่จะเป็นขอบจอ ลิ้นชักเลยสูงแค่ 132px เมนูโดนตัดหายเกือบหมด
★ ย้ายมาไว้ที่ pseudo-element แล้วปัญหาหายไป ★ เพราะ ::before
ไม่ได้ทำให้ตัวแม่กลายเป็นกรอบอ้างอิงให้ลูกตัวอื่น
ความโปร่งต่ำสุดอยู่ที่ 62% ขาว ★ ห้ามลดต่ำกว่านี้ ★
เพราะตอนแถบเมนูลอยผ่านเวทีมืด พื้นหลังจะกลายเป็นเทากลาง
ตัวหนังสือสีเข้มบนพื้นนั้นได้คอนทราสต์ราว 6.4:1 ซึ่งยังผ่าน
ถ้าลดเหลือ 50% จะตกลงมาเหลือราว 4.3:1 ซึ่งไม่ผ่านแล้ว */
.nav{
position:sticky; top:0; z-index:100;
border-bottom:1px solid rgba(8,32,51,.07);
transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
/* ชั้นกระจกของ "แถบเต็มความกว้าง" ใช้ตอนอยู่บนสุดของหน้า */
.nav::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(rgba(255,255,255,.56), rgba(255,255,255,.4));
box-shadow:inset 0 1px 0 rgba(255,255,255,.7); /* ขอบบนวาววับแบบขอบกระจก */
transition:opacity var(--t) var(--ease), background var(--t) var(--ease);
}
/* ── ชั้นกระจกของ "แคปซูลลอย" ใช้ตอนเลื่อนหน้าลงมา ──
★ ทำไมถึงเป็น pseudo-element ไม่ใช่พื้นหลังของ .nav__in เอง ★
สองเหตุผล
1. .nav__links (ลิ้นชักมือถือ) เป็น position:fixed และเป็นลูกของ .nav__in
ถ้าเอา backdrop-filter ไปใส่ที่ .nav__in ลิ้นชักจะพังแบบเดียวกับที่เคยพังตอนอยู่ที่ .nav
2. แคปซูลต้องเตี้ยกว่าแถบ (เว้นขอบบน-ล่างข้างละ 10px) แต่ ★ ความสูงของ nav
ต้องคงที่ 76px เสมอ ★ ถ้าไปย่อ .nav__in จริงๆ ทั้งหน้าจะถูกดันขยับ
pseudo-element ย่อได้โดยไม่แตะ layout เลย */
.nav__in::before{
/* แนวนอนหด 8px เข้ามาจากขอบของ .wrap เพื่อให้แคปซูลไม่ชนขอบจอบนจอแคบ
บนจอกว้างกว่า 1240px ยังได้ระยะห่างเพิ่มจากการจัดกึ่งกลางของ .wrap อยู่แล้ว */
content:""; position:absolute; inset:10px 8px; z-index:-1; pointer-events:none;
border-radius:var(--pill);
background:linear-gradient(rgba(255,255,255,.56), rgba(255,255,255,.4));
box-shadow:
0 20px 44px -22px rgba(8,32,51,.55),
0 2px 8px -3px rgba(8,32,51,.16),
inset 0 1px 0 rgba(255,255,255,.78);
opacity:0; transform:scale(.985);
transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav::before,
.nav__in::before{
-webkit-backdrop-filter:blur(22px) saturate(190%);
backdrop-filter:blur(22px) saturate(190%);
}
}
/* เบราว์เซอร์ที่ไม่รองรับ backdrop-filter ต้องทึบเกือบเต็ม
ไม่งั้นเนื้อหาที่ไหลผ่านข้างหลังจะทับกับตัวหนังสือในเมนูจนอ่านไม่ออก */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav::before{ background:rgba(255,255,255,.97); }
.nav__in::before{ background:rgba(255,255,255,.97); }
}
/* สลับสองชั้นตอนเลื่อน — แถบเต็มจางออก แคปซูลจางเข้า
★ สลับด้วย opacity อย่างเดียว ★ ไม่มีอะไรเปลี่ยนขนาดจริง หน้าจึงไม่ขยับ */
.nav--stuck{ border-bottom-color:transparent; }
.nav--stuck::before{ opacity:0; }
.nav--stuck .nav__in::before{ opacity:1; transform:none; }
/* ── กระจกปรับความขุ่นตามสิ่งที่อยู่ข้างหลัง ──
★ ค่าพวกนี้คำนวณจากคอนทราสต์จริง ไม่ได้เลือกด้วยตา ★
ปกติใส 56% → 40% ซึ่งใสพอที่จะเห็นเนื้อหาไหลผ่านชัดเจน
ใช้ได้เพราะเกือบทั้งหน้าเป็นพื้นสว่าง กระจกใสบนพื้นสว่างยังได้พื้นที่สว่างอยู่ดี
แต่ตอนลอยผ่านบล็อกพื้นเข้ม (เวทีผลงาน / ขั้นตอนการทำงาน / แถบปิดท้าย / footer)
พื้นหลังกลายเป็นเทาเข้ม ตัวหนังสือสีเข้มจะอ่านไม่ออก ต้องขุ่นขึ้นเป็น 78% → 64%
★ ตรงนั้นใสกว่านี้ไม่ได้ตราบใดที่ตัวหนังสือยังเป็นสีเข้ม ★
ทางที่จะทำให้ใสได้คือเปลี่ยนเป็นกระจกสีเข้ม + ตัวหนังสือสีอ่อน
แต่ติดที่ INA.png เป็นโลโก้พื้นสว่างที่กลับสีไม่ได้ (แถบดำมีตัวหนังสือขาวอยู่ข้างใน
พอ invert แล้วทั้งแถบกลายเป็นขาวล้วน ตัวหนังสือหายไปเลย)
ต้องมีโลโก้เวอร์ชันสำหรับพื้นเข้มก่อน ถึงจะทำได้ */
.nav--on-dark::before,
.nav--on-dark .nav__in::before{
background:linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.64));
}
/* ★ ความสูงของ nav ต้องคงที่เสมอ ห้าม transition ★
nav เป็น sticky ซึ่งอยู่ในสายการไหลของหน้า ถ้าความสูงเปลี่ยน
เนื้อหาทั้งหน้าจะถูกดันขยับตามทุกเฟรม เห็นเป็นอาการหน้าสั่น
ของเดิมย่อจาก 76 เหลือ 66 ซึ่งดันทั้งหน้าขึ้นลง 10px
ตอนนี้ให้ความรู้สึกว่า nav หดด้วยการย่อโลโก้ด้วย transform แทน
ซึ่งไม่แตะ layout เลย */
.nav__in{ position:relative; display:flex; align-items:center; gap:28px; height:76px; }
.nav__brand{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
/* โลโก้มีชื่อบริษัทอยู่ในตัวแล้ว จึงไม่ต้องมีข้อความข้างๆ */
.nav__logo{
height:52px; width:auto;
transform-origin:left center;
transition:transform var(--t) var(--ease);
}
.nav--stuck .nav__logo{ transform:scale(.84); }
.nav__links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav__links > a, .drop > button{
position:relative;
/* ★ เข้มกว่าเนื้อความทั่วไป ★ เพราะตัวหนังสือชุดนี้ต้องอ่านออกบนกระจกใส
ที่มีเนื้อหาของหน้าไหลผ่านอยู่ข้างหลัง ไม่ใช่บนพื้นทึบ
--body #3D586E อ่อนเกินไปสำหรับงานนี้ ทดสอบแล้วตกเกณฑ์ */
font-family:var(--f-display); font-size:.94rem; font-weight:400; color:var(--ink);
background:none; border:none; cursor:pointer; text-decoration:none;
padding:10px 15px; border-radius:var(--r-xs);
display:inline-flex; align-items:center; gap:7px;
transition:color var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}
/* ขีดใต้ที่วิ่งออกจากกึ่งกลาง */
.nav__links > a::after, .drop > button::after{
content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px;
background:var(--brand); border-radius:2px;
transform:scaleX(0); transform-origin:center;
transition:transform var(--t) var(--ease);
}
/* เดิมชี้แล้วเปลี่ยนจาก --body เป็น --ink แต่ตอนนี้ฐานเป็น --ink อยู่แล้ว
เลยย้ายไปใช้สีแบรนด์แทน จะได้ยังรู้สึกว่ามีอะไรตอบสนอง */
.nav__links > a:hover, .drop > button:hover{ color:var(--brand); }
.nav__links > a.on{ color:var(--ink); }
.nav__links > a:hover::after, .drop > button:hover::after,
.nav__links > a.on::after, .drop--open > button::after{ transform:scaleX(1); }
/* ── ปุ่มขอใบเสนอราคาในเมนู ──
★ ต้องเขียนเป็น `.nav__links > a.nav__cta` ★ ไม่ใช่แค่ `.nav__cta`
เพราะกฎ `.nav__links > a` ข้างบนตั้ง background:none กับ color:var(--ink) ไว้
ซึ่ง specificity สูงกว่า `.btn--fill` (0,2,0 เทียบกับ 0,1,0)
ผลของบั๊กเดิม: ปุ่มที่สำคัญที่สุดของเว็บกลายเป็นลิงก์ธรรมดา ไม่มีพื้นสี
ทั้งบนเดสก์ท็อปและในลิ้นชักมือถือ */
.nav__links > a.nav__cta{
margin-left:14px; padding:11px 21px; font-weight:500;
background:var(--brand); color:#fff;
border-radius:var(--pill); box-shadow:var(--sh-brand);
}
.nav__links > a.nav__cta:hover{
background:var(--brand-dk); color:#fff;
box-shadow:0 22px 46px -20px rgba(0,115,143,.62);
transform:translateY(-2px);
}
.nav__cta::after{ display:none; }
.drop > button svg{ transition:transform var(--t) var(--ease); }
.drop:hover > button svg, .drop--open > button svg{ transform:rotate(180deg); }
.drop{ position:relative; }
.drop__menu{
position:absolute; top:calc(100% + 12px); left:50%; min-width:330px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--sh-3); padding:10px;
opacity:0; visibility:hidden; transform:translate(-50%,-8px) scale(.98);
transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.drop:hover .drop__menu, .drop:focus-within .drop__menu, .drop--open .drop__menu{
opacity:1; visibility:visible; transform:translate(-50%,0) scale(1);
}
.drop__menu a{
display:flex; gap:13px; align-items:flex-start;
padding:12px 14px; border-radius:var(--r-sm); text-decoration:none;
font-family:var(--f-display); font-size:.93rem; font-weight:400; color:var(--ink);
transition:background var(--t-fast) var(--ease-soft);
}
.drop__menu a small{
display:block; font-family:var(--f); font-size:.8rem; color:var(--muted);
font-weight:300; line-height:1.6; margin-top:2px;
}
.drop__menu a:hover{ background:var(--brand-50); }
.drop__menu hr{ border:none; border-top:1px solid var(--line); margin:8px 6px; }
.drop__ic{
flex-shrink:0; width:34px; height:34px; border-radius:10px;
background:var(--brand-50); color:var(--brand);
display:grid; place-items:center; margin-top:2px;
transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
.drop__menu a:hover .drop__ic{ background:var(--brand-100); transform:scale(1.07); }
.drop__ic svg{ width:18px; height:18px; }
/* ── ปุ่มเมนูมือถือ ── */
/* ── ปุ่มเมนูมือถือ ──
ของเดิมเป็นกล่องสี่เหลี่ยมขาวมุมมน 8px ขอบเทา ซึ่งเป็นของชิ้นเดียวในหน้าที่หน้าตาแบบนั้น
มันเลยดูเหมือนของที่หลุดมาจากเว็บอื่น โดยเฉพาะตอนไปวางบนแคปซูลกระจก
ตอนนี้เปลี่ยนเป็น ★ ชิปไอคอนกลม ★ ซึ่งเป็นภาษาเดียวกับไอคอนอื่นทั้งเว็บ
(`.drop__ic` ในเมนูย่อย · `.stat__ico` ในแถบตัวเลข · `.job__chev` ในการ์ดตำแหน่งงาน)
ทุกตัวใช้สูตรเดียวกัน พื้น brand-50 + ขอบ brand-100 + ไอคอนสี brand
และทรงกลมยังเข้าชุดกับปุ่มลอยอีกสองตัวที่มุมขวาล่างด้วย
ตอนกางเมนู กลายเป็นวงกลมทึบสีแบรนด์ + กากบาทขาว
ให้มันชัดว่ากดแล้วเกิดอะไรขึ้น และเข้าชุดกับปุ่มขอใบเสนอราคาที่ก้นลิ้นชัก */
.burger{
display:none; margin-left:auto; position:relative; z-index:130;
width:44px; height:44px; padding:0; cursor:pointer;
background:var(--brand-50); border:1px solid var(--brand-100);
border-radius:50%; color:var(--brand);
transition:background var(--t) var(--ease), border-color var(--t) var(--ease),
color var(--t) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.burger:hover{ background:var(--brand-100); border-color:var(--brand-200); }
.burger:active{ transform:scale(.93); }
.burger i{
display:block; width:17px; height:2px; background:currentColor; border-radius:2px;
transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease-soft);
}
.burger i + i{ margin-top:4.6px; }
/* ระยะ 6.6px = (ความสูงเส้น 2 + ช่องไฟ 4.6) เพื่อให้เส้นบนกับล่างมาซ้อนกลางพอดี
★ ถ้าเปลี่ยนความหนาเส้นหรือช่องไฟ ต้องคิดเลขนี้ใหม่ ★ ไม่งั้นกากบาทจะเบี้ยว */
.burger[aria-expanded="true"]{
background:var(--brand); border-color:var(--brand); color:#fff;
}
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
.scrim{
position:fixed; inset:0; z-index:95; background:rgba(8,32,51,.45);
opacity:0; visibility:hidden; transition:opacity var(--t) var(--ease), visibility var(--t);
}
@supports (backdrop-filter:blur(1px)){ .scrim{ backdrop-filter:blur(3px); } }
.scrim.on{ opacity:1; visibility:visible; }
/* ════════════════════════════════════════════════════════════
Hero
════════════════════════════════════════════════════════════ */
.hero{
position:relative; overflow:hidden; border-bottom:1px solid var(--line);
background-color:#E3EDF4;
background-image:radial-gradient(1100px 720px at 78% 18%, #C7DDEA, #EBF2F7 72%);
}
/* ── ชั้นสไลด์ภาพ ──
ทุกสไลด์ซ้อนทับกัน สลับด้วย opacity อย่างเดียว จึงลื่นและไม่กินแรงเครื่อง
ภาพค่อยๆ ซูมออกช้าๆ ระหว่างที่แสดงอยู่ ให้ภาพนิ่งไม่ดูตาย */
.hero__slides{ position:absolute; inset:0; }
.hero__slides i{
position:absolute; inset:0; display:block; opacity:0;
background-size:cover; background-position:center;
transform:scale(1.05);
transition:opacity 2.2s var(--ease-soft), transform 9s linear;
}
.hero__slides i.on{ opacity:1; transform:scale(1); }
.hero__slides i:nth-child(1){ background-image:var(--img-hero); }
/* สไลด์ที่เหลือรอ JS ใส่คลาส ready หลังหน้าโหลดเสร็จ
จะได้ไม่ต้องดาวน์โหลดภาพทั้งสี่พร้อมกันตั้งแต่วินาทีแรก */
.hero__slides.ready i:nth-child(2){ background-image:var(--img-hero-2); }
.hero__slides.ready i:nth-child(3){ background-image:var(--img-hero-3); }
.hero__slides.ready i:nth-child(4){ background-image:var(--img-hero-4); }
/* ผ้าคลุมขาวไล่จากซ้าย ทำให้ตัวหนังสืออ่านออกไม่ว่าสไลด์จะเป็นภาพอะไร */
.hero__veil{
position:absolute; inset:0;
background:linear-gradient(100deg,
rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 42%,
rgba(255,255,255,.45) 74%, rgba(255,255,255,.08) 100%);
}
/* ก้อนแสงนุ่มลอยช้าๆ ให้พื้นหลังไม่ตาย */
.hero__glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__glow i{ position:absolute; display:block; border-radius:50%; filter:blur(72px); opacity:.5; }
.hero__glow i:nth-child(1){
width:520px; height:520px; top:-160px; right:-90px;
background:radial-gradient(circle, rgba(0,200,240,.42), transparent 68%);
animation:drift1 22s ease-in-out infinite alternate;
}
.hero__glow i:nth-child(2){
width:420px; height:420px; bottom:-180px; right:24%;
background:radial-gradient(circle, rgba(0,115,143,.3), transparent 68%);
animation:drift2 27s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(-70px,60px,0) scale(1.14); } }
@keyframes drift2{ to{ transform:translate3d(80px,-50px,0) scale(1.1); } }
/* ตารางจุดจางๆ อ่านว่าเป็นงานวิศวกรรม */
.hero::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(rgba(8,32,51,.075) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:linear-gradient(105deg, transparent 44%, #000 100%);
mask-image:linear-gradient(105deg, transparent 44%, #000 100%);
}
/* ── จุดเลือกสไลด์ ── */
/* ── จุดบอกสไลด์ ──
ตั้งใจให้แทบมองไม่เห็นจนกว่าจะมองหา หน้าที่มันคือบอกว่าอยู่สไลด์ไหนเท่านั้น
ไม่ใช่ของที่ต้องแย่งความสนใจไปจากหัวข้อกับปุ่ม
เดิมมีกล่องขาวฝ้ารองอยู่ ซึ่งทำให้มันกลายเป็นวัตถุลอยอยู่บนภาพ */
.hero__dots{
position:absolute; z-index:4;
right:clamp(20px,3vw,40px); bottom:clamp(20px,2.6vw,32px);
display:flex; align-items:center; gap:8px;
}
/* ★ ขีดต้องอ่านออกทั้งบนภาพเช้าฟ้าใสและภาพกลางคืน ★
ของเดิมเป็นสีเข้มล้วน ซึ่งจมหายไปทันทีถ้าภาพตรงมุมนั้นเข้ม
แก้ด้วยขีดสีขาวที่มีเส้นขอบเข้มบางๆ ล้อมอยู่
บนพื้นสว่างเห็นเพราะเส้นขอบ บนพื้นมืดเห็นเพราะตัวขีดเอง */
.hero__dots button{
position:relative; width:18px; height:3px; padding:0; border:none; border-radius:3px;
background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(8,32,51,.42);
cursor:pointer;
transition:width var(--t) var(--ease), background var(--t) var(--ease);
}
/* ขีดกว้าง 3px กดยาก ขยายพื้นที่กดด้วยชั้นใสที่มองไม่เห็น ให้นิ้วโดนง่าย */
.hero__dots button::after{ content:""; position:absolute; inset:-12px -5px; }
.hero__dots button:hover{ background:#fff; box-shadow:0 0 0 1px rgba(8,32,51,.7); }
.hero__dots button.on{ width:36px; background:var(--brand-lt); }
.hero__dots button:focus-visible{ outline-offset:7px; }
.hero__in{ position:relative; z-index:2; padding-block:clamp(64px,7vw,100px) clamp(80px,8vw,116px); }
.hero h1{ max-width:19ch; margin-top:4px; }
.hero h1 em{
font-style:normal;
background:linear-gradient(100deg, var(--brand), #0098BC);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* ── บรรทัดที่พิมพ์ ──
ต้องเป็น block เพื่อให้อยู่บรรทัดของตัวเองเสมอ
ถ้าปล่อยให้ไหลต่อท้ายบรรทัดบน ตอนคำยังสั้นมันจะขึ้นไปอยู่บรรทัดเดียวกับหัวข้อ
แล้วพอพิมพ์ยาวขึ้นถึงตกลงมา หัวข้อจะสลับระหว่าง 1 กับ 2 บรรทัดตลอดเวลา
ส่วน min-height ให้ JS วัดคำที่ยาวที่สุดแล้วจองไว้ ทำงานทุกขนาดจอเอง */
.hero h1 .type-line{ display:block; }
/* ── ตัวชี้ที่กระพริบท้ายคำที่กำลังพิมพ์ ──
ใช้ step-end เพื่อให้กระพริบเป็นจังหวะตัดชัดแบบเคอร์เซอร์จริง
ไม่ใช่ค่อยๆ จางซึ่งจะดูเป็นเอฟเฟกต์ตกแต่งมากกว่าเคอร์เซอร์ */
.hero h1 .caret{
display:inline-block; width:3px; height:.82em; border-radius:2px;
margin-left:.06em; vertical-align:-.06em;
background:linear-gradient(180deg, var(--brand), #0098BC);
animation:caret 1.05s step-end infinite;
}
@keyframes caret{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
.hero__lead{ margin-top:22px; font-size:1.11rem; max-width:50ch; color:var(--body); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero__note{ display:flex; align-items:center; gap:9px; margin-top:20px; font-size:.86rem; color:var(--muted); }
.hero__note svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; }
/* ── แถบพาร์ทเนอร์เลื่อนต่อเนื่อง ── */
.trust{ position:relative; z-index:2; margin-top:clamp(42px,4.6vw,60px); }
.trust__label{ font-size:.82rem; color:var(--muted); margin-bottom:14px; }
.marq{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marq__t{ display:flex; width:max-content; animation:marq 40s linear infinite; }
.marq:hover .marq__t{ animation-play-state:paused; }
/* ระยะห่างอยู่ใน set ทั้งหมด ทำให้ -50% ตรงกับหนึ่งชุดพอดี ไม่มีอาการกระตุก */
/* ระยะห่างอยู่ใน set ทั้งหมด ทำให้ -50% ตรงกับหนึ่งชุดพอดี ไม่มีอาการกระตุก
ตอนมีกล่องแคปซูล ระยะระหว่างโลโก้ = 24 (padding ขวา) + 12 (gap) + 24 (padding ซ้าย) = 60px
พอถอดกล่องออกต้องเอาระยะนั้นมาไว้ที่ gap แทน แล้วเผื่ออีกนิดตามที่ขอ */
.marq__set{ display:flex; align-items:center; gap:70px; padding-right:70px; }
@keyframes marq{ to{ transform:translate3d(-50%,0,0); } }
/* ไม่มีกล่องแคปซูลแล้ว เหลือแค่ตัวโลโก้ลอยบนพื้น
ความสูงคงที่ยังต้องมี เพื่อให้ทุกอันวางอยู่บนเส้นกึ่งกลางเดียวกัน */
.trust__item{
display:inline-flex; align-items:center; justify-content:center;
height:52px; flex-shrink:0;
/* สำรองไว้เผื่อรายไหนยังไม่มีโลโก้ ยังใช้ชื่อเป็นตัวหนังสือได้ */
font-family:var(--f-display); font-weight:400; font-size:.86rem; color:var(--ink);
white-space:nowrap;
}
/* ── โลโก้ในแถบ ──
พักไว้เป็นสีเทาสีเดียวทั้งแถบ ไม่งั้นโลโก้หกสีเรียงกันจะรกและแย่งสายตาจากปุ่ม
แล้วกลับเป็นสีจริงตอนเอาเมาส์ไปวาง ซึ่งเป็นจังหวะเดียวกับที่แถบหยุดเลื่อนพอดี
ถ้าอยากให้เป็นสีเต็มตลอดเวลา ลบบรรทัด filter ทิ้งบรรทัดเดียว */
.lg{
display:block; width:auto;
/* เงาขาวบางๆ เป็นตาข่ายกันพลาด — บนพื้นสว่างมองไม่เห็นเลย
แต่ถ้าโลโก้เลื่อนไปทับส่วนที่ภาพ hero เข้ม มันจะดันโลโก้ให้ยังอ่านออก
จำเป็นเพราะถอดกล่องขาวที่เคยรับประกันคอนทราสต์ออกไปแล้ว */
filter:grayscale(1) drop-shadow(0 0 3px rgba(255,255,255,.9)) opacity(.78);
transition:filter var(--t) var(--ease);
}
.marq:hover .lg{ filter:none; }
/* ความสูงรายตัว ไล่ให้ "ดูเท่ากันด้วยตา" ไม่ใช่เท่ากันด้วยตัวเลข
โลโก้ทรงจัตุรัสต้องสูงกว่าทรงยาว ไม่งั้นจะดูเล็กกว่าเพื่อน */
.lg--ceva { height:24px; } /* CEVA Logistics */
.lg--pt { height:38px; } /* PT Station — ทรงเกือบจัตุรัส */
.lg--tnt { height:23px; } /* ไทยน้ำทิพย์ — ทรงยาวที่สุดในชุด */
.lg--ptgl { height:24px; } /* PTG Logistics */
.lg--tbl { height:24px; } /* TBL Thai Beverage Logistics */
.lg--punthai { height:40px; } /* พันธุ์ไทย — มีตัวหนังสือใต้โลโก้ ต้องสูงกว่าเพื่อน */
.lg--mitsu { height:46px; } /* Mitsubishi — ทรงแนวตั้ง ตัวหนังสืออยู่ใต้เครื่องหมาย
ต้องสูงที่สุดในชุด ไม่งั้นคำว่า MITSUBISHI MOTORS อ่านไม่ออก */
/* ── หัวหน้ารอง สำหรับหน้าที่ไม่ใช่หน้าแรก ── */
.hero--page{
background-color:transparent;
background-image:
radial-gradient(760px 420px at 88% -10%, rgba(0,200,240,.16), transparent 70%),
linear-gradient(180deg, #fff, var(--bg));
}
.hero--page::after{ display:none; }
.hero--page .hero__glow{ display:none; }
.hero--page .hero__in{ padding-block:clamp(44px,5vw,66px) clamp(44px,5vw,58px); }
.crumb{ font-size:.86rem; color:var(--muted); margin-bottom:14px; }
.crumb a{ text-decoration:none; transition:color var(--t-fast) var(--ease-soft); }
.crumb a:hover{ color:var(--brand); }
/* ════════════════════════════════════════════════════════════
แถบสาระหลัก ลอยทับขอบล่างของ hero
เป็นการ์ดสว่างให้กลมกลืนกับธีมทั้งเว็บ
════════════════════════════════════════════════════════════ */
/* เดิมลอยทับขอบล่างของ hero ด้วย margin-top ติดลบ
แต่มันไปแย่งที่กับ hero จนดูอึดอัด ตอนนี้ให้อยู่เป็นบล็อกของตัวเอง มีที่หายใจ
ระยะห่างจาก hero มาจาก padding ของ section ที่ห่ออยู่ ไม่ใช่ margin ของตัวเอง */
.showcase{ position:relative; }
.showcase__card{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3);
display:grid; grid-template-columns:.92fr 1.08fr; align-items:stretch;
}
.showcase__img{
position:relative; min-height:400px; background-color:var(--tint); overflow:hidden;
}
.showcase__img::before{
content:""; position:absolute; inset:0;
background-image:var(--img-showcase);
background-size:cover; background-position:center;
transition:transform 1s var(--ease);
}
.showcase__card:hover .showcase__img::before{ transform:scale(1.04); }
/* เคลือบสีแบรนด์บางๆ ให้ภาพกลืนกับระบบสี ไม่ใช่รูปถ่ายลอยมาแปะ */
.showcase__img::after{
content:""; position:absolute; inset:0;
background:linear-gradient(155deg, rgba(0,115,143,.14), rgba(8,32,51,.3));
}
/* ════════════════════════════════════════════════════════════
เวทีมืดของบล็อกผลงาน
─────────────────────────────────────────────────────────────
ก่อนหน้านี้การ์ดลอยอยู่บนพื้นสว่าง ซึ่งไม่เข้ากับตัวการ์ดเองที่มี
ภาพเข้มอยู่ครึ่งซ้ายและแถบสถิติเข้มอยู่ข้างล่าง มันเลยดูเป็นของ
ที่วางผิดที่ ตอนนี้ให้ทั้งช่วงเป็นเวทีมืด การ์ดจะนั่งอยู่บนเวที
ไม่ใช่ลอยอยู่บนความว่าง
ใช้ .sect--dark เป็นฐาน เพื่อได้กติกาสีตัวหนังสือบนพื้นเข้มมาทั้งชุด
แล้วเปลี่ยนพื้นหลังเป็นแสงที่ไหลเองด้วย CSS ★ ไม่ใช้ไฟล์ภาพ ★
เพราะ bg-process.png ถูกจองให้บล็อกขั้นตอนการทำงานไปแล้ว (หนึ่งไฟล์ = หนึ่งช่อง)
และหน้านี้หนัก 30 MB อยู่แล้ว ไม่ควรเพิ่มอีก
════════════════════════════════════════════════════════════ */
.sect--stage{ background-image:none; background-color:#06192A; }
/* แสงสามดวงลอยไล่กันคนละจังหวะ ★ ขยับด้วย transform อย่างเดียว ★
ห้ามไป animate width/height/left/top เด็ดขาด จะทำให้คำนวณ layout ใหม่ทุกเฟรม
จังหวะยาว 38-52 วินาที และไม่ลงตัวกัน จึงไม่มีจุดที่ทั้งสามดวงกลับมาซ้ำที่เดิม
คนดูเลยไม่จับได้ว่ามันวน */
.aur{ position:absolute; inset:-20%; z-index:-2; pointer-events:none; }
.aur i{ position:absolute; display:block; border-radius:50%; }
.aur i:nth-child(1){
width:58vw; height:58vw; left:-10%; top:-26%;
background:radial-gradient(circle closest-side, rgba(0,200,240,.34), rgba(0,200,240,0));
animation:aur-a 38s var(--ease-soft) infinite alternate;
}
.aur i:nth-child(2){
width:54vw; height:54vw; right:-12%; bottom:-26%;
background:radial-gradient(circle closest-side, rgba(0,115,143,.46), rgba(0,115,143,0));
animation:aur-b 46s var(--ease-soft) infinite alternate;
}
/* ดวงที่สามเป็นเขียวจางๆ ไว้รับกับชายคาสีเขียวในภาพ PT ให้เวทีกับการ์ดเป็นเรื่องเดียวกัน */
.aur i:nth-child(3){
width:42vw; height:42vw; left:32%; top:48%;
background:radial-gradient(circle closest-side, rgba(18,222,108,.17), rgba(18,222,108,0));
animation:aur-c 52s var(--ease-soft) infinite alternate;
}
@keyframes aur-a{
from{ transform:translate3d(0,0,0) scale(1); }
to { transform:translate3d(12%,9%,0) scale(1.22); }
}
@keyframes aur-b{
from{ transform:translate3d(0,0,0) scale(1.12); }
to { transform:translate3d(-13%,-8%,0) scale(.9); }
}
@keyframes aur-c{
from{ transform:translate3d(0,0,0) scale(.88); opacity:.5; }
to { transform:translate3d(-11%,-15%,0) scale(1.32); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.aur i{ animation:none; }
}
/* ── ขอบออโรร่ารอบการ์ด ──
ตัวขอบคือ padding 2px ของ .showcase__glow ที่มีแผ่นแสงหมุนอยู่ข้างใต้
ตัวการ์ดทับอยู่ข้างบนและทึบแสง จึงเหลือให้เห็นแค่ขอบ 2px รอบนอก
★ ทำไมถึงหมุนแผ่นแสงแทนที่จะขยับ background-position ★
เพราะกติกาของโปรเจคนี้คือ animate ได้แค่ transform กับ opacity
ขยับ background-position ทำให้เบราว์เซอร์ระบายสีใหม่ทุกเฟรม
ส่วน rotate อยู่บน compositor ไม่แตะ layout และไม่ระบายสีใหม่
★ แผ่นแสงต้องเป็นจัตุรัสที่กว้างกว่าเส้นทแยงมุมของการ์ด ★
ไม่งั้นตอนหมุนไปบางองศาจะมีมุมโหว่ ของการ์ดกว้าง ~1146 สูง ~791
เส้นทแยงมุม ~1393 คิดเป็น 122% ของความกว้าง เลยตั้งไว้ 132% เผื่อไว้ */
.showcase__glow{
position:relative; isolation:isolate; overflow:hidden;
padding:2px; border-radius:calc(var(--r-xl) + 2px);
background:#0C2A40; /* สีสำรอง เผื่อแผ่นแสงยังไม่ทันวาด */
box-shadow:
0 0 54px -14px rgba(18,222,108,.34),
0 0 120px -34px rgba(0,200,240,.34),
0 54px 104px -46px rgba(0,0,0,.92);
}
.showcase__spin{
position:absolute; top:50%; left:50%;
width:132%; aspect-ratio:1; z-index:-1;
translate:-50% -50%;
background:conic-gradient(from 0deg,
#12DE6C 0%, #00C8F0 22%, #00738F 40%, #0B2941 52%,
#00738F 64%, #00C8F0 80%, #12DE6C 100%);
animation:spin-aur 22s linear infinite;
}
@keyframes spin-aur{ to{ rotate:360deg; } }
/* จอเล็กการ์ดกลายเป็นทรงสูงมาก แผ่นจัตุรัสที่คลุมได้จะใหญ่จนกินหน่วยความจำ
เลยเปลี่ยนเป็นขอบไล่สีนิ่งๆ แทน ยังสวยและไม่กินแบตมือถือ */
@media (max-width:1040px){
.showcase__spin{ display:none; }
.showcase__glow{
background:linear-gradient(150deg,#12DE6C,#00C8F0 42%,#00738F 72%,#0B2941);
}
}
@media (prefers-reduced-motion: reduce){
.showcase__spin{ animation:none; }
}
.sect--stage .showcase__card{ border:0; color:var(--ink); box-shadow:none; }
/* ★★ ดึงสีตัวหนังสือกลับมาให้การ์ด ★★
.sect--dark ตั้งสีไว้สำหรับ "เนื้อหาที่วางบนพื้นเข้ม" ซึ่งถูกสำหรับเวที
แต่การ์ดที่นั่งอยู่บนเวทีเป็นพื้นขาว กฎพวกนั้นเลยไหลเข้าไปผิดที่
ที่หนักที่สุดคือ .sect--dark h2 { color:#fff } ทำให้หัวข้อในการ์ด
กลายเป็นขาวบนขาว = หายไปทั้งบรรทัด
★ ถ้าวันหลังเติมกฎ .sect--dark ใหม่ ต้องเช็กว่ามันไหลเข้าการ์ดหรือเปล่า ★ */
.sect--stage .showcase__card h2,
.sect--stage .showcase__card h3{ color:var(--ink); }
.sect--stage .showcase__card .kicker{
background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-dk);
}
.sect--stage .showcase__card .kicker::before{ background:var(--brand); }
/* ── แผงซ้ายของบล็อกผลงานเรือธง ──
ภาพเต็มแผง + แผ่นป้ายระบุลูกค้าลอยอยู่มุมล่างซ้าย
★ ไม่มีตัวเลข 2,000+ ตรงนี้แล้ว ★ เพราะแถบ KPI ที่อยู่ถัดลงไปไม่ถึงหนึ่งจอ
ใช้เลขเดียวกัน พูดซ้ำสองครั้งติดกันทำให้ทั้งคู่ดูอ่อนลง ปล่อยให้ KPI ถือไว้คนเดียว */
.case__panel{
position:relative; overflow:hidden; min-height:400px;
display:flex; align-items:flex-end; padding:clamp(22px,2.3vw,32px);
background-color:var(--ink);
}
.case__panel::before{
content:""; position:absolute; inset:0;
background-image:var(--img-case); background-size:cover; background-position:center;
transition:transform 1s var(--ease);
}
.showcase__card:hover .case__panel::before{ transform:scale(1.04); }
/* ไล่สีเข้มจากล่างขึ้น เพื่อให้แผ่นป้ายมีที่ยืนไม่ว่าภาพตรงนั้นจะสว่างแค่ไหน
บวกแสงสีแบรนด์จางๆ จากมุมบนขวา ให้ภาพกลืนกับระบบสีของเว็บ */
.case__panel::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(520px 380px at 88% 4%, rgba(0,200,240,.2), transparent 66%),
linear-gradient(to top, rgba(8,32,51,.86) 0%, rgba(8,32,51,.2) 46%, rgba(8,32,51,.06) 100%);
}
.case__plate{
position:relative; z-index:1;
display:flex; align-items:center; gap:13px;
padding:11px 20px 11px 11px; border-radius:var(--r-sm);
background:rgba(255,255,255,.95); box-shadow:var(--sh-3);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
/* โลโก้ PT มีเขียวกับแดง ต้องมีแผ่นรองขาวเสมอ ไม่งั้นจมกับพื้นน้ำเงิน */
.case__logo{
display:grid; place-items:center; flex-shrink:0;
width:52px; height:52px; border-radius:12px; background:#fff;
}
.case__logo img{ height:40px; width:auto; display:block; }
.case__id b{
display:block; font-family:var(--f-display); font-weight:600;
font-size:1.02rem; color:var(--ink); line-height:1.25;
}
.case__id > span{ display:block; font-size:.8rem; color:var(--muted); margin-top:2px; }
.showcase__body{ padding:clamp(28px,3.2vw,44px); display:flex; flex-direction:column; justify-content:center; }
.showcase__lead{ color:var(--muted); margin-top:14px; font-size:1.02rem; }
/* ── ลำดับ 3 จุด พร้อมเส้นเชื่อมแนวตั้ง ── */
.flow{ list-style:none; margin:30px 0 0; padding:0; counter-reset:f; display:grid; gap:22px; }
.flow li{ position:relative; padding-left:52px; counter-increment:f; }
.flow li::before{
content:counter(f); position:absolute; left:0; top:0;
width:32px; height:32px; border-radius:50%;
background:var(--brand-50); border:1.5px solid var(--brand-200); color:var(--brand-dk);
font-family:var(--f-mono); font-size:.8rem; font-weight:500;
display:grid; place-items:center;
transition:background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
/* เส้นต่อลงไปยังจุดถัดไป */
.flow li::after{
content:""; position:absolute; left:15.5px; top:36px; bottom:-22px; width:1.5px;
background:linear-gradient(180deg, var(--brand-200), var(--line));
}
.flow li:last-child::after{ display:none; }
.flow li:hover::before{ background:var(--brand); border-color:var(--brand); color:#fff; transform:scale(1.08); }
.flow b{ display:block; font-family:var(--f-display); font-weight:500; font-size:1.04rem; color:var(--ink); }
.flow span{ display:block; font-size:.92rem; color:var(--muted); margin-top:5px; line-height:1.7; }
.showcase__note{
display:flex; align-items:flex-start; gap:10px; margin-top:30px; padding-top:22px;
border-top:1px solid var(--line);
font-size:.93rem; color:var(--body);
}
.showcase__note svg{ width:17px; height:17px; color:var(--green); flex-shrink:0; margin-top:6px; }
/* ════════════════════════════════════════════════════════════
ตัวเลข
════════════════════════════════════════════════════════════ */
/* ── แถบสถิติ = แถวล่างของการ์ดผลงาน ──
เดิมเป็นการ์ดขาว 4 ใบลอยอยู่ใต้การ์ดผลงาน ซึ่งอ่านเป็นของคนละชิ้นกัน
ตอนนี้ยุบเข้ามาเป็นแถวล่างของการ์ดใบเดียวกัน แล้วทำเป็นสีเข้ม
เพื่อให้จับคู่กับแผงภาพมุมบนซ้ายที่เข้มอยู่แล้ว การ์ดทั้งใบเลยอ่านเป็นก้อนเดียว
โดยมีเนื้อหาสีขาวเป็นแถบสว่างคั่นกลาง */
.stats{
grid-column:1 / -1; /* กินเต็มความกว้างของการ์ด ทั้งสองคอลัมน์ */
position:relative; overflow:hidden;
display:grid; grid-template-columns:repeat(4,1fr);
/* ★ ต้องสว่างกว่าเวทีมืดที่อยู่ข้างหลัง ★ ตอนแรกใช้ --ink เท่ากับพื้นเวที
ผลคือขอบล่างของการ์ดหายไปเลย มองไม่ออกว่าการ์ดจบตรงไหน */
background-image:linear-gradient(180deg,#123650,#0B2941);
}
.stats::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:
radial-gradient(680px 280px at 10% 0%, rgba(0,200,240,.2), transparent 66%),
radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
background-size:auto, 24px 24px;
}
.stat{
position:relative; z-index:1;
padding:26px clamp(16px,1.7vw,26px) 26px;
border-left:1px solid rgba(255,255,255,.09);
transition:background var(--t) var(--ease);
}
.stat:first-child{ border-left:0; }
.stat:hover{ background:rgba(255,255,255,.05); }
.stat__ico{
display:grid; place-items:center;
width:34px; height:34px; border-radius:11px; margin-bottom:15px;
background:rgba(0,200,240,.12); border:1px solid rgba(0,200,240,.28);
color:var(--brand-lt); /* cyan สดใช้ได้ เพราะพื้นตรงนี้เข้ม */
}
.stat__ico svg{ width:18px; height:18px; }
.stat b{
display:block; font-family:var(--f-display);
font-size:clamp(1.65rem,2.05vw,2.05rem); font-weight:600; color:#fff;
line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.stat b + span{
display:block; margin-top:9px; font-size:.83rem; line-height:1.62; color:#9DB8CB;
}
/* ════════════════════════════════════════════════════════════
การ์ดโซลูชัน
════════════════════════════════════════════════════════════ */
.prods{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; counter-reset:pd; }
.prod{
/* สามระบบน้ำมันใช้สีแบรนด์ INA ร่วมกัน ส่วน Crystal เป็นแบรนด์คนละตัว มีสีของตัวเอง */
--ac:var(--brand); --ac-wash:var(--brand-50);
position:relative; counter-increment:pd;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.prod--alt{ --ac:#1556A3; --ac-wash:#EEF4FC; }
.prod:hover{ border-color:var(--ac); box-shadow:var(--sh-3); transform:translateY(-6px); }
/* เส้นสีบางที่ขอบบน วิ่งออกจากซ้ายตอน hover */
.prod::after{
content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
background:var(--ac); transform:scaleX(0); transform-origin:left;
transition:transform var(--t-slow) var(--ease);
}
.prod:hover::after{ transform:scaleX(1); }
/* ── แถบภาพหัวการ์ด ── */
.prod__img{ position:relative; height:214px; overflow:hidden; background-color:var(--ink); }
.prod__img::before{
content:""; position:absolute; inset:0;
background-size:cover; background-position:center;
transition:transform .8s var(--ease);
}
.prod:hover .prod__img::before{ transform:scale(1.06); }
/* ไล่เข้มจากบนลงล่าง ครึ่งบนเห็นภาพชัด ครึ่งล่างเข้มพอให้ป้ายอ่านออก
ของเดิมทับทึบ 74-88% ทั้งแถบ ภาพเลยกลายเป็นก้อนสีขุ่นแยกไม่ออกว่าเป็นอะไร */
.prod__img::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(8,32,51,.1) 0%, rgba(8,32,51,.28) 44%, rgba(8,32,51,.8) 100%);
}
.prod--alt .prod__img::after{
background:linear-gradient(180deg, rgba(10,32,66,.1) 0%, rgba(10,32,66,.3) 44%, rgba(9,34,72,.82) 100%);
}
.prod:nth-child(1) .prod__img::before{ background-image:var(--img-atg); }
.prod:nth-child(2) .prod__img::before{ background-image:var(--img-pos); }
.prod:nth-child(3) .prod__img::before{ background-image:var(--img-ffm); }
.prod:nth-child(4) .prod__img::before{ background-image:var(--img-crystal); }
/* เลขกำกับมุมขวาบน — นับเองด้วย CSS counter ไม่ต้องพิมพ์ใน HTML */
.prod__no{
position:absolute; z-index:2; top:18px; right:22px;
font-family:var(--f-mono); font-size:.74rem; letter-spacing:.09em;
color:rgba(255,255,255,.62);
}
.prod__no::before{ content:counter(pd,decimal-leading-zero); }
/* ── ป้ายชื่อสินค้า: ไอคอนในกล่องกระจกฝ้า + ชื่อ ── */
.prod__tag{
position:absolute; z-index:2; left:24px; right:24px; bottom:20px;
display:flex; align-items:center; gap:14px; color:#fff;
}
.prod__tag i{
flex-shrink:0; width:46px; height:46px; border-radius:14px;
background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
display:grid; place-items:center;
transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
@supports (backdrop-filter:blur(1px)){ .prod__tag i{ backdrop-filter:blur(10px); } }
.prod:hover .prod__tag i{ background:rgba(255,255,255,.27); transform:scale(1.07); }
.prod__tag i svg{ width:23px; height:23px; color:#fff; }
.prod__tag b{
display:block; font-family:var(--f-display); font-size:1.28rem; font-weight:600;
letter-spacing:-.02em; color:#fff; line-height:1.25;
}
.prod__tag small{ display:block; font-size:.82rem; opacity:.84; margin-top:2px; line-height:1.4; }
/* ── เนื้อหาการ์ด ── */
.prod__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.prod__body p{ font-size:.96rem; }
.prod__list{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.prod__list li{ display:flex; gap:12px; font-size:.9rem; align-items:flex-start; line-height:1.65; }
.prod__list svg{
width:20px; height:20px; flex-shrink:0; margin-top:4px; padding:3.5px;
color:var(--ac); background:var(--ac-wash); border-radius:50%;
}
.prod__more{
margin-top:auto; padding-top:26px; color:var(--ac);
font-family:var(--f-display); font-weight:500; font-size:.94rem;
display:inline-flex; align-items:center; gap:9px;
}
.prod__more svg{ width:15px; height:15px; transition:transform var(--t) var(--ease); }
.prod:hover .prod__more svg{ transform:translateX(5px); }
/* ════════════════════════════════════════════════════════════
แถบแยกกลุ่มลูกค้า
════════════════════════════════════════════════════════════ */
.seg-intro{ padding-block:clamp(64px,6vw,92px) clamp(30px,3vw,42px); }
.seg-intro .head{ margin-bottom:0; }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); }
.seg__i{
position:relative; min-height:470px; overflow:hidden; text-decoration:none;
display:flex; align-items:flex-end; /* ชิดขอบล่าง ไม่ใช่กึ่งกลาง */
padding:46px 38px 42px; background-color:var(--ink);
}
/* ชั้นภาพ แยกออกมาเพื่อให้ขยายตอน hover ได้โดยไม่ดึง scrim ไปด้วย */
.seg__i::before{
content:""; position:absolute; inset:0;
background-image:var(--seg); background-size:cover; background-position:center;
transition:transform .9s var(--ease);
}
.seg__i:nth-child(1){ --seg:var(--img-seg-1); }
.seg__i:nth-child(2){ --seg:var(--img-seg-2); }
.seg__i:nth-child(3){ --seg:var(--img-seg-3); }
.seg__i:hover::before{ transform:scale(1.06); }
/* ชั้นบังตัวหนังสือ ไล่จากบนลงล่างเหมือนการ์ดโซลูชัน ให้ภาษาเดียวกันทั้งเว็บ
ของเดิมเข้มกลางช่องพอดีกับที่ตัวหนังสืออยู่ จึงอ่านยากในช่องที่ภาพรก */
.seg__i::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(8,32,51,.08) 0%, rgba(8,32,51,.34) 40%, rgba(8,32,51,.9) 100%);
transition:opacity var(--t-slow) var(--ease);
}
.seg__i:hover::after{ opacity:.86; } /* ภาพสว่างขึ้นเล็กน้อยตอนชี้ */
/* เส้นคั่นระหว่างช่อง ใช้เงาด้านในแทน border จะได้ไม่ดันเลย์เอาต์ */
.seg__i + .seg__i{ box-shadow:inset 1px 0 0 rgba(255,255,255,.16); }
.seg__b{
position:relative; z-index:2; width:100%;
display:flex; flex-direction:column; align-items:flex-start; gap:15px;
text-align:left; transition:transform var(--t-slow) var(--ease);
}
.seg__i:hover .seg__b{ transform:translateY(-8px); }
/* ไอคอนกระจกฝ้า ชุดเดียวกับป้ายบนการ์ดโซลูชัน */
.seg__ic{
width:48px; height:48px; border-radius:14px; margin-bottom:3px;
background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32);
display:grid; place-items:center; color:#fff;
transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
@supports (backdrop-filter:blur(1px)){ .seg__ic{ backdrop-filter:blur(10px); } }
.seg__i:hover .seg__ic{ background:rgba(255,255,255,.28); transform:scale(1.07); }
.seg__ic svg{ width:24px; height:24px; }
.seg__i h3{ color:#fff; font-size:clamp(1.4rem,1.9vw,1.62rem); font-weight:500; }
.seg__i p{ color:rgba(255,255,255,.85); font-size:.95rem; max-width:30ch; }
/* ปุ่มโปร่งที่เติมขาวเมื่อชี้ที่ช่อง ไม่ใช่ต้องชี้ที่ปุ่มเอง */
.seg__i .btn{ margin-top:5px; }
.seg__i:hover .btn--ghost{ background:#fff; color:var(--ink); border-color:#fff; }
/* ════════════════════════════════════════════════════════════
การ์ดทั่วไป / ใบรับรอง
════════════════════════════════════════════════════════════ */
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid2{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,3.4vw,44px); }
.card{
position:relative; background:var(--surface); border:1px solid var(--line);
border-radius:var(--r); padding:28px;
transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.card p{ font-size:.9rem; color:var(--muted); margin-top:10px; line-height:1.72; }
.card h3{ font-size:1rem; }
.card--lift:hover{ border-color:var(--brand-200); box-shadow:var(--sh-2); transform:translateY(-4px); }
.card__ico{
width:46px; height:46px; border-radius:13px; margin-bottom:18px;
background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand);
display:grid; place-items:center;
transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
.card__ico svg{ width:23px; height:23px; }
.card--lift:hover .card__ico{ background:var(--brand-100); transform:scale(1.07) rotate(-3deg); }
.card__no{ position:absolute; top:22px; right:24px; font-family:var(--f-mono); font-size:.76rem; color:var(--line-2); }
/* ── ไทม์ไลน์ขั้นตอน ── */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:s; }
/* เส้นเชื่อมที่ค่อยๆ วาดตัวเองตอนเลื่อนถึง */
.steps::before{
content:""; position:absolute; top:13px; left:12px; right:12px; height:2px;
background:linear-gradient(90deg, var(--brand), var(--brand-200));
border-radius:2px; transform:scaleX(0); transform-origin:left;
transition:transform 1.5s var(--ease) .15s;
}
.steps.in::before{ transform:scaleX(1); }
.step{ position:relative; padding-top:44px; }
.step::before{
counter-increment:s; content:counter(s,decimal-leading-zero);
position:absolute; top:0; left:0; width:27px; height:27px; border-radius:50%;
background:var(--surface); border:2px solid var(--brand); color:var(--brand);
font-family:var(--f-mono); font-size:.68rem; font-weight:500;
display:grid; place-items:center;
transition:background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.step:hover::before{ background:var(--brand); color:#fff; transform:scale(1.1); }
.step h3{ font-size:1.04rem; }
.step p{ font-size:.9rem; color:var(--muted); margin-top:10px; line-height:1.72; }
.step .when{
display:inline-flex; align-items:center; gap:7px; margin-top:14px;
font-family:var(--f-mono); font-size:.78rem; color:var(--ink);
background:var(--tint); border:1px solid var(--line); border-radius:var(--pill); padding:4px 14px;
}
.step .when::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--amber-lt); }
/* ── ป้ายข้อความ / ผลงาน ── */
.ref__logos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.ref__logos span{
border:1px solid var(--line-2); border-radius:var(--pill); padding:8px 18px;
font-size:.85rem; color:var(--body); background:var(--surface);
transition:border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.ref__logos span:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
/* ── บล็อกรูปใหญ่ ── */
.figure{
position:relative; overflow:hidden; border-radius:var(--r-lg);
min-height:400px; background-color:var(--ink);
display:flex; align-items:flex-end; padding:32px; box-shadow:var(--sh-3);
}
.figure::before{
content:""; position:absolute; inset:0;
background-image:linear-gradient(158deg, rgba(0,115,143,.5), rgba(8,32,51,.92)), var(--img-about);
background-size:cover; background-position:center;
transition:transform .9s var(--ease);
}
.figure:hover::before{ transform:scale(1.05); }
.figure p{ position:relative; z-index:2; color:#fff; font-size:1.02rem; }
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:34px; }
.feat h3{ font-size:1rem; display:flex; align-items:center; gap:9px; }
.feat h3 svg{ width:18px; height:18px; color:var(--brand); flex-shrink:0; }
.feat p{ font-size:.89rem; color:var(--muted); margin-top:8px; line-height:1.7; }
/* ── แถบปิดท้าย ── */
.cta{
position:relative; overflow:hidden; color:#C3D8E6;
background-color:var(--ink);
}
/* ชั้นภาพ
แถบนี้สัดส่วนราว 4.8:1 ส่วนภาพเป็น 16:9 พอสั่ง cover จะเหลือแค่แถบกลางของภาพ
ซึ่งเป็นพื้นเปล่า เส้นคลื่นกับจุดเชื่อมทั้งหมดอยู่ครึ่งล่าง จึงต้องยึด bottom ไว้ */
.cta::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:var(--img-cta);
background-size:cover; background-position:center bottom;
filter:saturate(1.2) brightness(1.18);
}
/* ชั้นบังตัวหนังสือ เข้มฝั่งซ้ายที่มีหัวข้อ จางฝั่งขวาที่ปล่อยให้เห็นกราฟิก */
.cta::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(100deg,
rgba(8,32,51,.95) 0%,
rgba(8,32,51,.84) 40%,
rgba(8,32,51,.46) 72%,
rgba(8,32,51,.3) 100%);
}
.cta__in{
position:relative; z-index:1;
display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:center;
padding-block:clamp(56px,6vw,78px);
}
.cta h2{ color:#fff; }
.cta p{ margin-top:14px; }
.cta__btns{ display:flex; flex-direction:column; gap:12px; }
/* ════════════════════════════════════════════════════════════
ฟอร์ม
════════════════════════════════════════════════════════════ */
.form{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); box-shadow:var(--sh-2);
}
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:block; margin-bottom:18px; }
.field > span{
display:block; font-family:var(--f-display); font-size:.84rem; font-weight:400;
color:var(--body); margin-bottom:8px;
}
.field input, .field select, .field textarea{
width:100%; background:var(--bg); border:1.5px solid var(--line-2); border-radius:var(--r-sm);
color:var(--ink); font-family:var(--f); font-weight:300; font-size:.97rem; padding:13px 15px;
transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.field textarea{ resize:vertical; min-height:118px; line-height:1.75; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:.75; }
.field input:focus, .field select:focus, .field textarea:focus{
border-color:var(--brand); background:#fff; outline:none;
box-shadow:0 0 0 4px rgba(0,115,143,.11);
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; }
.chip{ position:relative; }
.chip input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.chip span{
display:flex; align-items:center; gap:8px;
background:var(--bg); border:1.5px solid var(--line-2); border-radius:var(--pill);
padding:9px 18px; font-size:.88rem; cursor:pointer;
transition:border-color var(--t) var(--ease), color var(--t) var(--ease),
background var(--t) var(--ease), transform var(--t) var(--ease);
}
.chip span::before{
content:""; width:7px; height:7px; border-radius:50%;
border:1.5px solid var(--line-2); flex-shrink:0;
transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.chip:hover span{ border-color:var(--brand-200); }
.chip input:checked + span{ border-color:var(--brand); color:var(--brand-dk); background:var(--brand-50); }
.chip input:checked + span::before{ background:var(--brand); border-color:var(--brand); transform:scale(1.25); }
.chip input:focus-visible + span{ outline:2.5px solid var(--brand); outline-offset:3px; }
.msg{
display:none; font-size:.92rem; margin-top:18px; padding:14px 18px;
border-radius:var(--r-sm); line-height:1.65; animation:msgIn var(--t) var(--ease);
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(-6px); } }
.msg.ok{ display:block; color:var(--green); background:#E9F7F1; border:1px solid #BEE6D6; }
.msg.err{ display:block; color:var(--amber); background:#FDF4E4; border:1px solid #F2DCB4; }
.note{ font-size:.8rem; color:var(--muted); margin-top:14px; }
/* ── รายการติดต่อ ── */
.contact{ margin:30px 0 0; display:grid; gap:20px; }
.contact dt{ font-size:.79rem; color:var(--muted); }
.contact dd{ margin:5px 0 0; color:var(--ink); }
.contact a{
color:var(--brand); text-decoration:none;
background-image:linear-gradient(var(--brand),var(--brand));
background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size var(--t) var(--ease);
}
.contact a:hover{ background-size:100% 1px; }
/* ════════════════════════════════════════════════════════════
ปุ่มลอยมุมจอ
════════════════════════════════════════════════════════════ */
.dock{
position:fixed; right:22px; bottom:22px; z-index:80;
display:flex; flex-direction:column; align-items:flex-end; gap:11px;
}
/* ── ปุ่มลอยคุยผ่าน LINE ──
★ โลโก้ LINE ต้องอยู่บนแผ่นกลมสีขาวเสมอ ★
ตัวโลโก้เป็นลูกโป่งสีเขียว ถ้าแปะลงบนพื้นปุ่มที่เขียวอยู่แล้วมันจะจมหายไป
ไฟล์ที่ใช้คือ assets/logos/line.png ซึ่งตัดกรอบสี่เหลี่ยมรอบนอกทิ้งแล้ว
เหลือแค่ลูกโป่ง ต้นฉบับเต็มอยู่ที่ _source/line-full.webp
สีตัวหนังสือเป็นเขียวเข้ม ไม่ใช่ขาว เพราะขาวบนเขียว #06C755
คอนทราสต์ได้แค่ราว 2.3:1 ซึ่งไม่ผ่าน แม้ LINE เองจะใช้ขาวก็ตาม */
/* ปกติเป็นก้อนกลม 52px มีแต่โลโก้ พอเอาเมาส์ไปวาง (หรือโฟกัสด้วยคีย์บอร์ด)
จะคลี่ออกเป็นแคปซูลแล้วตัวหนังสือค่อยเลื่อนตามเข้ามา
★ ตรงนี้เป็นข้อยกเว้นเดียวของกติกา "animate ได้แค่ transform กับ opacity" ★
เพราะการคลี่แคปซูลต้องเปลี่ยนความกว้างจริง จะปลอมด้วย scaleX ไม่ได้
ปลายโค้งของแคปซูลจะถูกยืดเป็นวงรี ดูออกทันที
ที่ยกเว้นได้เพราะ .dock เป็น position:fixed ซึ่งหลุดออกจากสายการไหลของหน้า
ความกว้างที่เปลี่ยนจึงคำนวณใหม่แค่ในกล่องเล็กๆ นี้ ไม่กระเพื่อมถึงหน้าเว็บเลย
★ ความกว้างตอนคลี่มาจาก --fab-w ที่ site.js วัดให้หลังฟอนต์โหลดเสร็จ ★
ถ้า JS ไม่ทำงาน จะตกไปใช้ 176px ที่เขียนสำรองไว้ ซึ่งพอดีกับข้อความปัจจุบัน */
.fab{
display:flex; align-items:center;
width:52px; overflow:hidden;
/* ★ min-width:0 ขาดไม่ได้ ★ ปุ่มนี้เป็นลูกของ .dock ที่เป็น flex
ซึ่งค่าเริ่มต้นของ flex item คือ min-width:auto แปลว่า
"ห้ามแคบกว่าเนื้อหาข้างใน" ทำให้ width:52px ถูกเมิน ปุ่มกางอยู่ตลอด 156px */
min-width:0;
padding:7px; flex-shrink:0;
background:linear-gradient(135deg,#12DE6C 0%,#06C755 52%,#05B44D 100%);
color:#04331A; text-decoration:none;
font-family:var(--f-display); font-weight:500; font-size:.94rem;
border-radius:var(--pill);
box-shadow:
0 16px 34px -14px rgba(6,199,85,.92),
0 2px 5px rgba(3,60,26,.18),
inset 0 1px 0 rgba(255,255,255,.42);
transition:width .5s var(--ease), transform var(--t) var(--ease),
box-shadow var(--t) var(--ease);
}
.fab__ico{
display:grid; place-items:center; flex-shrink:0;
width:38px; height:38px; border-radius:50%; background:#fff;
box-shadow:0 2px 6px rgba(3,60,26,.22);
}
.fab__ico img{ width:23px; height:23px; display:block; }
.fab__txt{
white-space:nowrap; padding:0 15px 0 11px;
opacity:0; transform:translateX(-10px);
transition:opacity .26s var(--ease), transform .46s var(--ease);
}
.fab:hover, .fab:focus-visible{
width:var(--fab-w, 176px);
transform:translateY(-3px);
box-shadow:
0 24px 44px -14px rgba(6,199,85,1),
0 3px 8px rgba(3,60,26,.22),
inset 0 1px 0 rgba(255,255,255,.5);
}
/* ตัวหนังสือรอให้แคปซูลคลี่ออกไปก่อนนิดนึงค่อยตามเข้ามา จะได้ไม่ดูอัดกัน */
.fab:hover .fab__txt, .fab:focus-visible .fab__txt{
opacity:1; transform:none; transition-delay:.12s;
}
.fab:active{ transform:translateY(-1px); }
/* ตอนวัดความกว้าง site.js จะใส่คลาสนี้ชั่วคราวเพื่อให้มันกางเต็มโดยไม่มีแอนิเมชัน */
.fab--measure{ width:auto !important; transition:none !important; }
.fab--measure .fab__txt{ opacity:0; transform:none; transition:none !important; }
@media (prefers-reduced-motion: reduce){
.fab, .fab__txt{ transition:none; }
}
/* ── ปุ่มกลับขึ้นบน + วงแหวนความคืบหน้าการเลื่อน ──
★ ทำไมย้ายความคืบหน้ามาไว้ตรงนี้ ★
ของเดิมเป็นเส้นตรงพาดใต้เมนู ซึ่งเป็นภาษาของ "แถบโหลด" ที่ไม่เข้ากับหน้านี้เลย
หน้านี้ทั้งหน้าเป็นก้อนลอยมุมมน พอเมนูยุบเป็นแคปซูล เส้นตรงยิ่งดูหลุด
วงแหวนรอบปุ่มที่ลอยอยู่แล้วเข้ากับภาษานั้นมากกว่า และไม่ไปแย่งที่กับเมนู
ข้อดีทางเทคนิค: วงกลมทำ stroke-dashoffset ได้ตรงๆ ไม่มีปัญหาเรื่องสัดส่วน
ถ้าไปทำขอบแคปซูลให้วิ่ง จะเจอปัญหาว่าแคปซูลกว้าง 1224 สูง 56
ด้านยาวกับปลายโค้งกินสัดส่วนเส้นรอบรูปต่างกันมาก ความคืบหน้าจะวิ่งไม่สม่ำเสมอ */
.top{
position:relative; width:46px; height:46px; border-radius:50%;
background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-2);
opacity:0; visibility:hidden; transform:translateY(10px);
transition:opacity var(--t) var(--ease), transform var(--t) var(--ease),
visibility var(--t), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.top.on{ opacity:1; visibility:visible; transform:none; }
.top:hover{ border-color:var(--brand); color:var(--brand); }
.top__ar{ width:17px; height:17px; }
.top__ring{
position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
transform:rotate(-90deg); /* ให้เริ่มนับที่ตำแหน่ง 12 นาฬิกา */
pointer-events:none; overflow:visible;
}
.top__track{ fill:none; stroke:rgba(8,32,51,.09); stroke-width:2.6; }
.top__fill{
fill:none; stroke:url(#progGrad); stroke-width:2.6; stroke-linecap:round;
/* pathLength="100" ทำให้เส้นรอบวงเป็น 100 หน่วย สูตรจึงตรงไปตรงมา
★ --sp ต้องประกาศที่ ★ ปุ่มนี้อยู่ใน .dock ไม่ได้อยู่ใน .nav
ถ้ายังเขียนไว้ที่ .nav เหมือนเดิม ค่าจะตกไม่ถึงตรงนี้ */
stroke-dasharray:100;
stroke-dashoffset:calc((1 - var(--sp,0)) * 100px);
filter:drop-shadow(0 0 4px rgba(0,200,240,.5));
}
/* ════════════════════════════════════════════════════════════
รายการตำแหน่งงาน (หน้า careers.html)
─────────────────────────────────────────────────────────────
ใช้ / ของเบราว์เซอร์ตรงๆ ★ ไม่ได้เขียน JS คุมการเปิดปิด ★
ได้การกดด้วยคีย์บอร์ดและการอ่านด้วยโปรแกรมอ่านหน้าจอมาฟรี
และถ้า JS ล่ม รายการที่โหลดมาแล้วก็ยังกางดูได้ตามปกติ
════════════════════════════════════════════════════════════ */
.jobs{ display:grid; gap:14px; margin-top:clamp(28px,3vw,40px); }
.jobs__msg{ color:var(--muted); padding:26px 2px; }
/* แถบเตือน "ของนี้ยังไม่ใช่ของจริง" ★ ต้องเห็นชัดจนเผลอ deploy ไม่ได้ ★
ใช้ร่วมกัน 2 ที่ — ตำแหน่งงานตัวอย่าง กับราคาสมมติในตัวประเมิน */
.warnbar{
display:flex; gap:11px; align-items:flex-start;
background:#FFF8E8; border:1px solid #EFD9A4; color:#7A5A12;
border-radius:var(--r-sm); padding:14px 18px; font-size:.9rem; line-height:1.6;
}
.warnbar svg{ width:19px; height:19px; flex-shrink:0; margin-top:2px; }
.job{
background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--sh-1); overflow:hidden;
transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.job[open]{ border-color:var(--brand-200); box-shadow:var(--sh-3); }
.job__sum{
display:flex; align-items:center; gap:18px; cursor:pointer;
padding:21px clamp(18px,2vw,28px);
list-style:none; /* ซ่อนสามเหลี่ยมของเบราว์เซอร์ */
}
.job__sum::-webkit-details-marker{ display:none; }
.job__sum::marker{ content:""; }
.job__hd{ flex:1; min-width:0; }
.job__hd h3{ font-size:1.08rem; margin:0 0 9px; }
.job__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.job__tag{
font-size:.78rem; color:var(--brand-dk); white-space:nowrap;
background:var(--brand-50); border:1px solid var(--brand-100);
border-radius:var(--pill); padding:3px 11px;
}
.job__chev{
flex-shrink:0; display:grid; place-items:center;
width:34px; height:34px; border-radius:50%;
background:var(--brand-50); color:var(--brand);
transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.job__chev svg{ width:17px; height:17px; }
.job:hover .job__chev{ background:var(--brand-100); }
.job[open] .job__chev{ transform:rotate(180deg); }
.job__body{ padding:0 clamp(18px,2vw,28px) 26px; }
.job__lead{
margin:0 0 22px; padding-top:19px; color:var(--body);
border-top:1px solid var(--line);
}
.job__cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.job__cols h4{
font-family:var(--f-display); font-weight:500; font-size:.95rem;
color:var(--ink); margin:0 0 11px;
}
.job__cols ul{
margin:0; padding-left:19px; display:grid; gap:8px;
font-size:.92rem; color:var(--body); line-height:1.7;
}
.job__cols li::marker{ color:var(--brand-200); }
.job__foot{
display:flex; flex-wrap:wrap; align-items:center; gap:14px;
margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
}
.job__note{ font-size:.85rem; color:var(--muted); }
@media (max-width:640px){
.job__cols{ grid-template-columns:1fr; gap:20px; }
.job__sum{ gap:12px; }
}
/* ════════════════════════════════════════════════════════════
ตัวประเมินราคาเบื้องต้น (หน้า quote.html)
─────────────────────────────────────────────────────────────
★ ตัวเลขทั้งหมดมาจาก pricing.json ไม่มีตัวเลขไหนเขียนอยู่ใน CSS หรือ HTML ★
════════════════════════════════════════════════════════════ */
.est{ margin-top:clamp(26px,3vw,40px); }
.est__msg{ color:var(--muted); padding:26px 2px; }
/* บรรทัดบอกสาเหตุตอนโหลดไฟล์ข้อมูลไม่ได้
ตั้งใจให้เล็กและจาง ลูกค้าทั่วไปจะไม่สนใจ แต่แอดมินที่มาไล่หาปัญหาจะเห็น */
.why{
display:inline-block; margin-top:9px; font-size:.8rem; line-height:1.6;
color:#8A6A1E; background:#FFF8E8; border:1px solid #EFD9A4;
border-radius:var(--r-xs); padding:7px 12px;
}
.est__grid{
display:grid; grid-template-columns:1.2fr .9fr;
gap:clamp(18px,2.2vw,28px); align-items:start; margin-top:18px;
}
/* ── ฝั่งซ้าย: ตัวเลือก ── */
.est__panel{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); padding:clamp(20px,2.2vw,28px); box-shadow:var(--sh-1);
}
.est__step + .est__step{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.est__lbl{
display:flex; align-items:center; gap:10px; margin-bottom:14px;
font-family:var(--f-display); font-weight:500; font-size:1rem; color:var(--ink);
}
.est__no{
flex-shrink:0; display:grid; place-items:center; width:26px; height:26px;
border-radius:50%; background:var(--brand-50); border:1px solid var(--brand-100);
color:var(--brand); font-family:var(--f-mono); font-size:.82rem;
}
/* ── การ์ดเลือกสินค้า ── */
.est__prods{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.pick{
position:relative; display:flex; gap:12px; align-items:flex-start; cursor:pointer;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
padding:15px; transition:border-color var(--t) var(--ease), background var(--t) var(--ease),
box-shadow var(--t) var(--ease);
}
/* ซ่อน radio ตัวจริงแต่ไม่ใช้ display:none เพราะยังต้องโฟกัสด้วยคีย์บอร์ดได้ */
.pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.pick:hover{ border-color:var(--brand-200); }
.pick input:focus-visible + .pick__ic{ outline:2.5px solid var(--brand); outline-offset:3px; }
.pick.on{
border-color:var(--brand); background:var(--brand-50);
box-shadow:0 0 0 1px var(--brand) inset;
}
.pick__ic{
flex-shrink:0; display:grid; place-items:center; width:38px; height:38px;
border-radius:11px; background:var(--brand-50); border:1px solid var(--brand-100);
color:var(--brand); transition:background var(--t) var(--ease);
}
.pick.on .pick__ic{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pick__ic svg{ width:19px; height:19px; }
.pick b{ display:block; font-family:var(--f-display); font-weight:500; font-size:.95rem; color:var(--ink); }
.pick small{ display:block; font-size:.82rem; color:var(--muted); line-height:1.6; margin-top:3px; }
/* ── ช่องนับจำนวน ── */
.cnt{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:12px 0;
}
.cnt + .cnt{ border-top:1px solid var(--line); }
.cnt__t b{ display:block; font-family:var(--f-display); font-weight:400; font-size:.95rem; color:var(--ink); }
.cnt__t small{ display:block; font-size:.8rem; color:var(--muted); margin-top:2px; }
.cnt__stp{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.cnt__b{
width:34px; height:34px; padding:0; cursor:pointer; flex-shrink:0;
display:grid; place-items:center; border-radius:50%;
background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand);
transition:background var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-soft);
}
.cnt__b:hover{ background:var(--brand-100); }
.cnt__b:active{ transform:scale(.92); }
.cnt__b:disabled{ opacity:.4; cursor:not-allowed; }
.cnt__b svg{ width:15px; height:15px; }
.cnt__v{
width:68px; text-align:center; font-family:var(--f-mono); font-size:.98rem; color:var(--ink);
border:1px solid var(--line-2); border-radius:var(--r-xs); padding:8px 4px; background:var(--surface);
}
/* ── ตัวเลือกเสริม ── */
.opt{
display:flex; gap:12px; align-items:flex-start; cursor:pointer;
padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
background:var(--surface); transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.opt + .opt{ margin-top:8px; }
.opt:hover{ border-color:var(--brand-200); }
.opt.on{ border-color:var(--brand); background:var(--brand-50); }
.opt input{ width:17px; height:17px; margin-top:2px; accent-color:var(--brand); flex-shrink:0; }
.opt b{ display:block; font-family:var(--f-display); font-weight:400; font-size:.94rem; color:var(--ink); }
.opt small{ display:block; font-size:.82rem; color:var(--muted); line-height:1.6; margin-top:2px; }
.est__none{ color:var(--muted); font-size:.92rem; }
/* ── ฝั่งขวา: ผลลัพธ์ ──
พื้นเข้มเหมือนแถบสถิติในหน้าแรก ให้เป็นภาษาเดียวกันทั้งเว็บ
sticky เพื่อให้ตัวเลขอยู่ในสายตาตลอดตอนเลื่อนเลือกตัวเลือก */
.est__out{
position:sticky; top:96px; overflow:hidden;
border-radius:var(--r-lg); padding:clamp(22px,2.3vw,30px);
background-color:var(--ink); color:#9DB8CB;
background-image:
radial-gradient(520px 260px at 12% 0%, rgba(0,200,240,.22), transparent 66%),
radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
background-size:auto, 22px 22px;
}
.est__out h3{ color:#fff; font-size:1.02rem; margin:0 0 4px; }
.est__hint{ font-size:.85rem; line-height:1.65; margin:0 0 18px; }
.est__num{
font-family:var(--f-display); font-weight:600; color:#fff;
font-size:clamp(1.6rem,2.5vw,2.05rem); line-height:1.2; letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
.est__unit{ font-size:.9rem; color:#9DB8CB; margin-top:6px; }
/* ป้ายติดกับตัวเลขเลย ไม่ใช่แค่แถบเตือนที่อยู่ไกลออกไป
★ ตราบใดที่ pricing.json ยังบอกว่าไม่ใช่ราคาจริง ป้ายนี้ต้องอยู่ ★ */
.est__fake{
display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
background:rgba(255,193,64,.15); border:1px solid rgba(255,193,64,.45); color:#FFD37A;
border-radius:var(--pill); padding:5px 13px; font-size:.8rem; font-weight:500;
font-family:var(--f-display);
}
.est__rows{ margin:20px 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:9px; }
.est__row{ display:flex; justify-content:space-between; gap:14px; font-size:.87rem; }
.est__row span:last-child{ color:#DCEEF7; font-family:var(--f-mono); white-space:nowrap; }
.est__row--sub span:first-child{ padding-left:12px; }
.est__cta{ margin-top:22px; }
.est__cta .btn{ width:100%; justify-content:center; }
.est__note{ font-size:.78rem; line-height:1.65; margin:14px 0 0; color:#7F9CB2; }
/* Crystal ไม่คิดเงินกับเจ้าของพื้นที่ ผลลัพธ์เลยเป็นคนละหน้าตา */
.est__split{ display:grid; gap:16px; margin-top:16px; }
.est__split h4{
font-family:var(--f-display); font-weight:500; font-size:.88rem; color:#fff; margin:0 0 8px;
}
.est__split ul{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:.85rem; line-height:1.6; }
.est__split li::marker{ color:var(--brand-lt); }
@media (max-width:1040px){
.est__grid{ grid-template-columns:1fr; }
.est__out{ position:static; }
}
@media (max-width:640px){
.est__prods{ grid-template-columns:1fr; }
.cnt{ flex-wrap:wrap; }
}
/* ════════════════════════════════════════════════════════════
Footer
════════════════════════════════════════════════════════════ */
.ft{ background:var(--ink); color:#9DB8CB; padding-block:64px 30px; font-size:.9rem; }
.ft__top{
display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px;
padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.11);
}
.ft h4{ font-family:var(--f-display); color:#fff; font-size:.94rem; font-weight:500; margin-bottom:16px; }
.ft a{
/* block เพื่อให้ขึ้นบรรทัดใหม่เสมอ + fit-content เพื่อให้พื้นที่ hover กว้างเท่าตัวหนังสือ
ถ้าใช้ inline-block ลิงก์จะไหลมาต่อกันในบรรทัดเดียวเมื่อคอลัมน์กว้างพอ */
display:block; width:fit-content; text-decoration:none; padding:4px 0;
transition:color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-soft);
}
.ft a:hover{ color:#fff; transform:translateX(3px); }
/* โลโก้บนพื้นเข้ม ต้องมีแผ่นรองขาว เพราะตัวโลโก้มีแถบสีดำ */
.ft__logo{ display:inline-block; background:#fff; border-radius:14px; padding:12px 16px; margin-bottom:18px; }
.ft__logo img{ height:54px; width:auto; }
.ft__btm{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:24px; font-size:.83rem; }
/* ════════════════════════════════════════════════════════════
Responsive
════════════════════════════════════════════════════════════ */
@media (max-width:1040px){
.burger{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nav__links{
position:fixed; top:0; right:0; bottom:0; left:auto;
width:min(400px,86vw); margin-left:0; z-index:125;
background:var(--surface); box-shadow:var(--sh-4);
display:flex; flex-direction:column; align-items:stretch; gap:2px;
padding:96px 24px 36px; overflow-y:auto;
transform:translateX(102%); transition:transform .44s var(--ease);
}
.nav__links.open{ transform:none; }
.nav__links > a, .drop > button{ width:100%; justify-content:flex-start; padding:13px 14px; font-size:1rem; }
.nav__links > a::after, .drop > button::after{ display:none; }
.nav__links > a:hover, .nav__links > a.on{ background:var(--tint); }
.drop > button{ justify-content:space-between; }
/* ── เมนูย่อยในลิ้นชักมือถือ ──
★★ ต้องเขียนทับ `.drop--open .drop__menu` ด้วย ไม่ใช่แค่ `.drop__menu` ★★
เพราะกฎเดสก์ท็อปนั้น specificity สูงกว่า (0,2,0 เทียบกับ 0,1,0)
ถึงกฎมือถือจะอยู่ทีหลังในไฟล์ ก็ยังแพ้อยู่ดี
บั๊กที่เกิดจริงตอนยังไม่ได้เขียนทับ: `transform:translate(-50%,0)` ของเดสก์ท็อป
ยังทำงานอยู่ เมนูย่อยเลยถูกเลื่อนไปทางซ้ายครึ่งหนึ่งของความกว้างตัวเอง
ทะลุออกนอกลิ้นชัก แล้วโดนขอบลิ้นชักตัดตัวหนังสือหายไปครึ่งบรรทัด */
.drop__menu{
position:static; min-width:0; margin:2px 0 4px;
padding:4px 0 4px 14px; background:transparent; border:none; box-shadow:none;
border-left:2px solid var(--line); /* เส้นบอกว่าเป็นของที่ซ้อนอยู่ใต้ "โซลูชัน" */
display:none; opacity:1; visibility:visible; transform:none;
}
/* บนมือถือไม่เอา hover เพราะการแตะเพื่อเลื่อนหน้าจะไปกระตุ้นให้เมนูกางเอง
ให้เปิดด้วยการกดปุ่มอย่างเดียว (ปุ่มเป็นตัวใส่คลาส drop--open) */
.drop:hover .drop__menu,
.drop:focus-within .drop__menu{ display:none; transform:none; }
.drop--open .drop__menu{ display:block; transform:none; }
/* เมนูย่อยมี "ขอใบเสนอราคา" ซ้ำกับปุ่มใหญ่ที่ก้นลิ้นชักอยู่แล้ว
บนจอแคบที่ต้องเลื่อนยาว การมีของซ้ำทำให้คนลังเลว่ากดอันไหนดี */
.drop__menu hr,
.drop__menu > a[href="quote.html"]{ display:none; }
/* ย่อรายการย่อยลงหน่อย ไม่งั้นลิ้นชักยาวเกินจนต้องเลื่อนหลายรอบ */
.drop__menu a{ padding:10px 12px; gap:11px; }
.drop__ic{ width:30px; height:30px; border-radius:9px; }
.drop__ic svg{ width:16px; height:16px; }
/* ในลิ้นชักให้เป็นปุ่มเต็มความกว้าง จะได้กดง่ายด้วยนิ้วโป้ง
★ ต้องใช้เซเลกเตอร์เดียวกับข้างบน ★ ไม่งั้นโดน `.nav__links > a` ทับอีก */
.nav__links > a.nav__cta{
margin:20px 0 0; padding:15px 18px; justify-content:center;
border-radius:var(--pill); box-shadow:var(--sh-2);
}
.nav__links > a.nav__cta:hover{ background:var(--brand-dk); transform:none; }
.showcase__card{ grid-template-columns:1fr; }
.showcase__img, .case__panel{ min-height:280px; }
.stats{ grid-template-columns:1fr 1fr; }
.stat:nth-child(odd){ border-left:0; }
.stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.09); }
.prods, .grid3{ grid-template-columns:1fr; }
.seg{ grid-template-columns:1fr; }
.seg__i{ min-height:340px; padding:38px 28px 34px; }
.seg__i + .seg__i{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.grid4{ grid-template-columns:1fr 1fr; }
.grid2{ grid-template-columns:1fr; }
.steps{ grid-template-columns:1fr 1fr; row-gap:38px; }
.steps::before{ display:none; }
.cta__in{ grid-template-columns:1fr; }
.ft__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
body{ font-size:16px; }
.wrap{ padding-inline:20px; }
.showcase{ margin-top:clamp(44px,7vw,58px); }
.showcase__card{ border-radius:var(--r-lg); }
.showcase__img, .case__panel{ min-height:230px; }
.stats{ grid-template-columns:1fr; }
.stat{ padding:22px 20px; border-left:0; border-top:1px solid rgba(255,255,255,.09); }
.stat:first-child{ border-top:0; }
.stat__ico{ margin-bottom:13px; }
.grid4{ grid-template-columns:1fr; }
.steps{ grid-template-columns:1fr; row-gap:28px; }
.feat{ grid-template-columns:1fr; gap:22px; }
.row2{ grid-template-columns:1fr; gap:0; }
.ft__top{ grid-template-columns:1fr; gap:32px; }
.topbar__in{ gap:15px; }
.topbar .hide-sm{ display:none; } /* ครอบทั้ง span และ a — ของเดิมเจาะจงแค่ span อีเมลเลยไม่ยอมซ่อน */
.nav__logo{ height:40px; }
.nav--stuck .nav__logo{ transform:none; } /* จอเล็กโลโก้เล็กอยู่แล้ว ย่ออีกจะอ่านไม่ออก */
.ft__logo img{ height:46px; }
.dock{ right:16px; bottom:16px; }
/* จอเล็กแตะแล้วไปเลย ไม่มีจังหวะ hover ให้คลี่ ปล่อยเป็นก้อนกลมตลอด
★ ห้ามใช้ display:none กับ .fab__txt ★ ไม่งั้น site.js จะวัดความกว้างไม่ได้
ตอนที่ผู้ใช้หมุนจอกลับมาเป็นแนวนอน */
.fab:hover, .fab:focus-visible{ width:52px; }
.fab:hover .fab__txt, .fab:focus-visible .fab__txt{ opacity:0; }
.figure{ min-height:300px; }
.hero__cta .btn{ width:100%; }
/* ปุ่ม LINE ลอยอยู่มุมล่างขวา จุดบอกสไลด์เลยต้องหลบไปซ้าย */
.hero__dots{ left:20px; right:auto; bottom:18px; }
}
/* ════════════════════════════════════════════════════════════
เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของผู้ใช้ — ปิดทุกอย่าง
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
html{ scroll-behavior:auto; }
.js [data-reveal]{ opacity:1 !important; transform:none !important; }
.steps::before{ transform:scaleX(1) !important; }
.hero h1 .caret{ display:none; }
}