/* ============================================================ pm-base.css — reset · ฟอนต์ · heading h1–h6 · ลิงก์ · ฟอร์ม · focus ที่มา: docs/design.md §5, §6, §7.2, §7.4, §8.5, §10.2 ⛔ ห้ามมีค่า hex ในไฟล์นี้ (B-1) — ใช้ var(--color-*) เท่านั้น ============================================================ */ /* ---- @font-face — self-host (B-5 · C-9) · design.md §10.2 ---- ✅ ไฟล์มีจริงแล้วตั้งแต่ 11 ก.ย. 2026 — Latin subset (O-4: อังกฤษอย่างเดียว) 🔴 2 ไฟล์ ไม่ใช่ 4 — และไม่ใช่เพราะเลือกเอง: Google Fonts เสิร์ฟ Hanken Grotesk เป็น **variable font อย่างเดียว** ทั้ง endpoint v1 และ css2 (ขอ 400/500/600 แล้วได้ URL เดียวกันทั้งสามครั้ง และ wght@100..900 ตอบกลับมาว่า font-weight:100 900) จะได้ static 3 ไฟล์ต้อง instantiate เองด้วย fontTools ซึ่ง **กินไบต์มากกว่า และเพิ่ม request อีก 2 ครั้ง** → เลือกไฟล์ variable ตัวเดียว วัดจริง: 34,664 + 15,040 = **49,704 B** (ประมาณการ §10.5 คือ 75–95KB / 4 ไฟล์) B-5 คุมที่ "จำนวน family และน้ำหนัก" ไม่ใช่จำนวนไฟล์ → 2 family · ใช้ 400/500/600 ✅ ดู design.md §5.1 · §10.5 ที่ใส่หมายเหตุ superseded ไว้แล้ว ⛔ ห้ามเปลี่ยนเป็น format('woff2-variations') หรือ tech(variations) `format('woff2')` คู่กับช่วง font-weight คือการเขียนที่ถูกต้องของ variable font */ @font-face{ font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/instrument-serif-400.woff2') format('woff2'); } @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/hanken-grotesk-var.woff2') format('woff2'); } /* ---- reset ที่จำเป็น ---- */ *,*::before,*::after{ box-sizing:border-box; } body{ margin:0; background:var(--color-paper); color:var(--color-ink-body); font-family:var(--font-body); font-weight:400; font-size:var(--fs-body); line-height:1.65; /* §5.4 --text-body */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{ max-width:100%; height:auto; display:block; } svg{ stroke-width:1.5; } /* §8.6 — ไอคอน SVG เท่านั้น ห้าม emoji/icon font (B-8) */ /* ---- heading h1–h6 — design.md §10.2 + §5.3 ---- */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; color:var(--color-ink); margin:0; text-wrap:pretty; } h1{ font-size:var(--fs-d1); line-height:1.00; letter-spacing:-.018em; } h2{ font-size:var(--fs-d3); line-height:1.08; letter-spacing:-.014em; } h3{ font-size:var(--fs-d5); line-height:1.18; letter-spacing:-.008em; } h4{ font-size:var(--fs-d6); line-height:1.25; } h5,h6{ font-family:var(--font-body); font-weight:600; color:var(--color-ink); margin:0; } h5{ font-size:var(--fs-h5); line-height:1.40; } h6{ font-size:var(--fs-h6); line-height:1.35; text-transform:uppercase; /* ตัวใหญ่มาจากที่นี่เท่านั้น — HTML เขียน sentence case */ letter-spacing:.08em; } /* template บทความใช้ h1/h2 ที่เล็กลงหนึ่งขั้น */ .is-article h1{ font-size:var(--fs-d2); line-height:1.02; letter-spacing:0; } .is-article h2{ font-size:var(--fs-d4); line-height:1.15; letter-spacing:0; } /* ---- ข้อความระดับบล็อก ---- ระยะห่างย่อหน้าไม่ได้ระบุใน design.md — เลือกจากสเกล §8.1 (--s3 = 24px) ห้ามใช้ค่านอกสเกล */ p,ul,ol,figure,blockquote,table{ margin:0 0 var(--s3); } p:last-child,ul:last-child,ol:last-child{ margin-bottom:0; } .is-article p{ font-size:var(--fs-body-long); line-height:1.78; } /* §5.4 --text-body-long */ strong,b{ font-weight:600; } /* §5.1 — 600 = เน้นจริง · ไม่มี 700/800 ในระบบ */ small{ font-size:var(--fs-small); line-height:1.55; } /* §5.4 */ blockquote{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-d6); line-height:1.25; color:var(--color-ink); border-left:3px solid var(--color-line-strong); /* §7.5 — เส้น ไม่ใช่สี */ padding-left:var(--s3); } hr{ border:0; border-top:1px solid var(--color-line); margin:var(--s5) 0; } /* §3.1 เส้นประดับ */ /* ---- ลิงก์ในเนื้อความ (prose inline) — design.md §6 ---- หลักการ: สีไม่เคยเป็นสิ่งเดียวที่บอกว่านี่คือลิงก์ (WCAG 1.4.1) */ a{ color:var(--color-ink-body); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--color-line-strong); transition:color var(--dur-micro) ease, text-decoration-color var(--dur-micro) ease; } a:hover{ color:var(--color-brand-ink); text-decoration-color:var(--color-brand-ink); } /* :visited ไม่กำหนดสีต่างหาก — §6 ห้ามเพิ่มสีที่ 4 เข้าระบบ */ /* ---- Focus ring (F-2) — design.md §7.4 · บังคับผ่านก่อนส่งมอบ ---- ห้าม outline:none ทุกกรณีโดยไม่มีตัวแทนที่มองเห็นชัดกว่า */ *:focus-visible{ outline:2px solid var(--color-brand-ink); /* 6.85 บน paper */ outline-offset:3px; border-radius:2px; } /* กลับด้านบนพื้นเข้มและพื้น brand — §7.4 */ .on-night *:focus-visible, .on-brand *:focus-visible{ outline-color:var(--color-on-night); } /* 🔴 F-2 ตกอยู่เงียบ ๆ — เจอตอนตรวจรอบ 22 ก.ย. 2026 (ไม่ได้เกิดจากรอบนี้ มีมาก่อน) ธีมแม่ Bajaar ล้างวงแหวนโฟกัสของเบราว์เซอร์ทิ้งไว้ 5 ที่ (ไล่จาก stylesheet จริงบน staging): bajaar-style : a:active, a:focus, a:hover, a:visited { outline:0 } bajaar-style : a:focus, input, input:focus, textarea… { outline:0 } bajaar-style : button:focus { outline:0 } bajaar-woocommerce-style: button:focus { outline:-webkit-focus-ring-color auto 0 } bajaar-woocommerce-style: input:focus, select:focus, textarea:focus { outline:0 } ทุกตัว specificity (0,1,1) ซึ่ง **ชนะ `*:focus-visible` ข้างบนที่เป็น (0,1,0)** → ไล่ Tab ทั้งหน้า **ไม่มีวงแหวนโฟกัสเลย** ทั้งลิงก์ ปุ่ม และช่องกรอก วัดจริงบน staging ก่อนแก้: .pm-buy__btn (ปุ่ม Add to cart) → :focus-visible = true · outline = none 0px .pm-mega__link (ลิงก์ในเมนู) → :focus-visible = true · outline = none 0px box-shadow ก็เป็น none → ไม่เหลืออะไรให้มองเห็นแม้แต่อย่างเดียว ⛔ ห้ามแก้ด้วย `!important` — แค่เขียน selector ให้เท่ากัน (0,1,1) ก็พอ เพราะ pm-base.css โหลดหลัง bajaar-style · เสมอกันแล้วลำดับหลังชนะ (C-7) ⛔ ห้ามเติม `[tabindex]` / `[contenteditable]` เข้ารายการนี้ — สองตัวนั้นเป็น (0,2,0) จะไปเสมอกับ `.on-night *:focus-visible` ข้างบนแล้วชนะเพราะอยู่ทีหลัง → วงแหวนบนพื้นเข้มจะกลายเป็นสีเข้มจนมองไม่เห็น · รายการนี้จึงคุมไว้ที่ (0,1,1) ทั้งหมด ℹ️ ใช้ `:focus-visible` ไม่ใช่ `:focus` — คลิกด้วยเมาส์จึงยังไม่มีกรอบ (เรื่องเดียวกับที่แก้ให้การ์ดใน pm-components.css รอบนี้) ℹ️ กฎของ component ที่เขียน `:focus-visible` ไว้เองเป็น (0,2,0) อยู่แล้ว (.pm-chip · .pm-slider__btn · .pm-catlist__item) จึงยังชนะกฎนี้และทำงานเหมือนเดิมทุกตัว */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:2px solid var(--color-brand-ink); outline-offset:3px; } /* ---- ฟอร์ม (F-5) — design.md §7.2 ---- ทุกช่องต้องมี