:root{ --bg:#fcf9f4; --ink:#14151A; --ink-soft:#20201f; --accent:#2f629b; --accent-soft:rgba(13,71,161,0.1); --line:rgba(32,32,31,1); --line-strong:rgba(32,32,31,1); --card-bg:#FFFFFF; --card-border:#20201f; --font-display:'Mitr',sans-serif; --font-body:'Mitr',sans-serif; --font-mono:'Mitr',sans-serif; /* หาอ่าน brand palette */ --brand-yellow:#eac653; --brand-navy:#2f629b; --brand-peach:#f99a7d; --brand-sage:#d9dfd3; --brand-orange-red:#ef6343; --brand-dark-navy:#2a3c51; --brand-ochre:#af8358; --brand-ice-blue:#d8e2e9; --brand-dark-grey:#3f3f3f; /* ===== สีไอคอน — แก้ตรงนี้ที่เดียว ปุ่มไอคอนทั้งเว็บ (about, donate, ปิด modal, ลิงก์ ↗) จะเปลี่ยนตาม ===== หมายเหตุ: ไอคอนพวกนี้เป็น svg ที่ใช้ stroke/fill="currentColor" เวลา inspect เลยไม่เห็นค่าสีตรงๆ ในตัว svg เอง ต้องไล่ขึ้นไปดูที่ property "color" ของ element ที่ครอบมันอยู่แทน (เช่น .icon-btn) ซึ่งตอนนี้ผูกกับ ตัวแปรสองตัวนี้แล้ว */ --icon-color:var(--ink-soft); /* สีไอคอนตอนปกติ */ --icon-color-hover:var(--accent); /* สีไอคอนตอน hover/โฟกัส */ /* ===== สีตัวอักษร/ไอคอนตอนอยู่บนพื้นหลังที่ใส่สีทึบแล้ว (ปุ่ม active, hover ที่เปลี่ยนพื้นเป็นสี, badge ผล การเช็คสถานะ, ปุ่มค้นหา) เดิมกระจายเป็น #fff ซ้ำๆ กันหลายจุดในไฟล์นี้ รวบมาไว้ตัวเดียวตรงนี้ ===== */ --fg-inverse:#fff; /* ===== พื้นหลังทึบ/เงา — อิงจากสี --ink (20,21,26) เดิมพิมพ์เลข rgb ซ้ำๆ กันหลายจุด ปรับแค่ความโปร่งใส ต่างกันตามแต่ละจุดใช้งาน (modal เข้มน้อยสุด, loading เข้มสุด) ===== */ --overlay-modal:rgba(20,21,26,0.45); /* ฉากหลังทึบตอนเปิด modal */ --overlay-loading:rgba(20,21,26,0.6); /* ฉากหลังทึบตอนโหลด */ --overlay-tutorial:rgba(20,21,26,0.4); /* ฉากหลังทึบตอนโชว์ tutorial สไลด์การ์ดมือถือ */ --shadow-card-hover:rgba(20,21,26,0.06); /* เงาการ์ดตอน hover บน desktop */ --shadow-stack-card:rgba(20,21,26,0.12); /* เงาการ์ดแบบ stack บนมือถือ */ --shadow-magnifier:rgba(0,0,0,0.45); /* เงาไอคอนแว่นขยายตอน loading */ --arrow-glow:rgba(255,255,255,0.92); /* สีลูกศร swipe tutorial บนมือถือ */ /* ===== ชุดตัวแปรสไตล์ "neobrutalism" (ขอบดำหนา + เงาทึบ offset ไม่มี blur) — แยกจากตัวแปรด้านบนทั้งหมด ใช้คู่กับ class .neo-card / .neo-image / .neo-btn / .neo-pill ด้านล่างของไฟล์นี้เท่านั้น ไม่กระทบสไตล์เดิม ปรับค่าตรงนี้ที่เดียว ทุกจุดที่ใส่ class .neo-* จะเปลี่ยนตาม ===== */ --neo-border-color:#14151A; --neo-border-width:2.5px; --neo-shadow-color:#14151A; --neo-shadow-offset:6px; --neo-radius-card:10px; --neo-radius-image:10px; --neo-radius-pill:999px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* ===== SEO: ซ่อนไว้ทางสายตา แต่ search engine / screen reader ยังอ่านได้ (มาตรฐานทั่วไป ไม่ใช่การโกง) ใช้กับ H1 ของหน้าแรก เพราะ header จริงเป็นโลโก้รูปภาพ ไม่อยากยัดข้อความยาวๆ ลงไปทับ design ที่ยังพัฒนาอยู่ ถ้าวันไหน design นิ่งแล้วอยากโชว์ H1 นี้จริงๆ ลบ class นี้ออกจาก

ใน index.html ได้เลย ===== */ .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; min-height:100vh; } a,button,select,input{font-family:inherit;} button{cursor:pointer;} /* ---------- Top bar ---------- */ .topbar{ max-width:1220px; margin:0 auto; padding:48px 32px 28px; /* padding-top ของ (ไม่ใช่ตรงนี้) ถูกตั้งค่าด้วย JS (applyLandingOffset ใน index.html) ตอนอยู่ใน สถานะ "landing" เพื่อดัน topbar ทั้งก้อนลงไปกึ่งกลางจอ (เดิมเคยลองใช้ margin-top ตรงนี้ตรงๆ แต่ margin ของลูกคนแรกใน body จะ collapse ทะลุออกไปนอก body ทำให้หน้าเว็บสูงเกิน viewport เปลี่ยนไปใช้ padding-top บน body แทนแล้ว) ตั้งใจไม่ใส่ transition ไว้ตรงนี้แบบถาวร เพราะตอนโหลดหน้าครั้งแรกจะเห็น topbar เลื่อนแบบ ไม่ได้ตั้งใจ (อยากให้ตอนโหลดครั้งแรกกระโดดไปอยู่ตำแหน่ง landing เลยทันที ไม่มี animation) — transition จะถูกเติมด้วย JS เฉพาะตอนออกจากสถานะ landing เท่านั้น (ดูฟังก์ชัน leaveLandingMode) */ } /* สถานะหน้า landing (ก่อนค้นหาครั้งแรก) */ /* 1) ซ่อนผลลัพธ์/ข้อความ empty-state ไว้ก่อน เพราะตอนนี้ยังไม่มีอะไรให้โชว์อยู่แล้ว (ยังไม่ได้ค้นหา) การซ่อนไว้ ช่วยไม่ให้ข้อความ "พิมพ์ชื่อหนังสือ..." โผล่มาแทรกใต้ topbar ที่จัดกลางจอ */ body.landing #results{display:none;} /* 2) บีบ .topbar ให้แคบลงเป็นก้อนกะทัดรัดกึ่งกลางจอ (แทนที่จะกว้างเต็ม 1220px แบบปกติ) — จุดประสงค์หลักคือ ทำให้ .search-row (ช่องค้นหา + ปุ่ม) แคบลงเหมือนกล่องค้นหาของ Google ไม่ใช่ยืดเต็มจอ ใช้ max-width เพราะ animate แบบ smooth ตอน leaveLandingMode() ได้ (ดู JS) ต่าง .topbar-head ด้านล่างที่ overwrite justify-content ตรงๆ เลย เพราะแค่บีบความกว้างเฉยๆ ไม่พอที่จะดึง logo (ชิดซ้าย) กับปุ่มไอคอน (ชิดขวา) เข้ามาเป็นกลุ่มกึ่งกลางเดียวกันได้ — space-between จะยังดันสุดขอบซ้าย/ขวาของกล่อง 640px อยู่ดี ต้อง เปลี่ยนเป็น center ตรงๆ ถึงจะได้ผลลัพธ์แบบในภาพ mockup (justify-content เปลี่ยนค่าแบบ animate ไม่ได้ก็จริง แต่ไม่มีปัญหา เพราะการสลับเกิดพร้อมกับตอนเอา class landing ออก ซึ่งเนื้อหาข้างในมันแคบพอที่จะขยับแค่ นิดเดียวจนแทบไม่สังเกตเห็นการกระตุก) */ body.landing .topbar{max-width:640px;} body.landing .topbar-head{justify-content:center;} /* 3) meta-row (แถวใต้ช่องค้นหา) ปกติใช้ space-between: result-summary (ข้อความ "เจอ N เล่ม") ชิดซ้าย, meta-controls (ปุ่ม "ใกล้ฉันที่สุด" + dropdown filter) ชิดขวา — ตอน landing ยังไม่ได้ค้นหา result-summary เลยว่างเปล่าอยู่แล้ว (แค่  ) เลยซ่อนไปเลย แล้วสลับ meta-row เป็น center แทน ทำให้เหลือแค่ meta-controls กลุ่มเดียวลอยอยู่กึ่งกลาง เหมือนใน mockup */ body.landing .result-summary{display:none;} body.landing .meta-row{justify-content:center;} .brand{ display:flex; align-items:center; } .brand img{height:100px;width:auto;display:block;} @media (max-width:640px){ .brand img{height:74px;} } .topbar-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .topbar-actions{display:flex; gap:8px; flex-shrink:0;} .icon-btn{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--card-bg); display:flex; align-items:center; justify-content:center; color:var(--icon-color); flex-shrink:0; transition:border-color .15s ease, background .15s ease, color .15s ease; outline:none; } .icon-btn svg{width:19px; height:19px;} .icon-btn:hover{border-color:var(--icon-color-hover); color:var(--icon-color-hover); background:var(--accent-soft);} .icon-btn:focus-visible{outline:2px solid var(--icon-color-hover); outline-offset:2px;} /* ---------- Search ---------- */ .search-row{ display:flex; gap:10px; align-items:stretch; margin-top:6px; } .search-box{ flex:1; min-width:0; background:var(--card-bg); border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; font-size:16px; font-family:var(--font-body); color:var(--ink); outline:none; transition:border-color .15s ease, box-shadow .15s ease; } .search-box:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } .search-box::placeholder{color:var(--ink-soft);} .search-box:disabled{opacity:.6; cursor:not-allowed;} .search-btn{ flex-shrink:0; background:var(--brand-dark-grey); color:var(--fg-inverse); border:none; border-radius:12px; padding:0 26px; font-size:15px; font-weight:600; font-family:var(--font-display); letter-spacing:0.01em; transition:background .15s ease, opacity .15s ease; } .search-btn:hover:not(:disabled){background: var(--brand-orange-red);;} .search-btn:disabled{opacity:.5; cursor:not-allowed;} .meta-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; } .result-summary{ font-size:13px; color:var(--ink-soft); font-family:var(--font-mono); min-height:18px; } .source-select{ appearance:none; -webkit-appearance:none; background:var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; border:1.5px solid var(--line); border-radius:10px; height:44px; box-sizing:border-box; padding:0 34px 0 14px; /* line-height สูงกว่าปกติ เพื่อกันไม่ให้วรรณยุกต์ไทย (เช่น ไม้โท) ที่ลอยเหนือตัวอักษรโดนตัดขอบบน (บั๊กที่พบใน native