/* ===== จันทน์นิยม — Global Theme Tokens ===== */ /* ตั้งค่าที่ ผ่าน data-theme attribute (ดู js/chanNiyom.js) */ /* ค่า Default (ไม่ตั้ง data-theme) = โหมดสว่าง สดใส อบอุ่น ตามภาพหน้าร้านจริง */ :root { --cn-bg: #FFFDF8; /* พื้นหลังหลัก ครีมขาวอุ่นๆ ไม่ใช่ขาวจั๊วะ */ --cn-bg-alt: #FFF6E4; /* พื้นหลังสลับ Section เหลืองอ่อนมาก */ --cn-fg: #2E2416; /* ตัวอักษรหลัก น้ำตาลเข้ม ไม่ใช่ดำสนิท อ่านสบายตา */ /* §75: เดิม #8A7A64 ให้ contrast แค่ 3.87–4.16:1 ซึ่ง "ตก" เกณฑ์ WCAG 2.1 AA (ต้อง ≥ 4.5:1) ทั้งที่สีนี้ใช้กับข้อความรองเกือบทั้งเว็บ — คำอธิบายเมนู ข้อความกำกับ ฟุตเตอร์ เข้มขึ้นเป็น #78684F ได้ 5.02–5.40:1 ผ่านสบาย แต่ยังเป็นน้ำตาลอุ่นโทนเดิม */ --cn-fg-muted: #78684F; /* ตัวอักษรรอง */ --cn-yellow: #FDB813; /* สีแบรนด์หลัก */ --cn-yellow-deep: #E5A300; /* Hover ของปุ่มเหลือง — ใช้เป็น "พื้น" เท่านั้น */ /* §75: สีลิงก์/ข้อความเน้นโทนเหลือง ⚠️ ห้ามใช้ --cn-yellow-deep เป็นสีตัวอักษรบนพื้นสว่าง: #E5A300 บนพื้นขาวได้แค่ 2.19:1 (คนสายตาปกติยังอ่านยาก) แต่จะเอามาทำให้เข้มขึ้นตรงๆ ก็ไม่ได้ เพราะตัวเดียวกันนี้ ถูกใช้เป็นพื้นตอน Hover ปุ่มเหลืองด้วย ถ้าเข้มลงตัวอักษรบนปุ่มจะตกเกณฑ์แทน จึงต้องแยกเป็นคนละตัวแปร: ตัวนี้สำหรับ "ตัวอักษร" ตัวนั้นสำหรับ "พื้น" */ --cn-link: #8F6200; /* บนพื้นสว่าง 4.99–5.36:1 */ --cn-card: #FFFFFF; /* พื้นการ์ด */ --cn-border: rgba(46,36,22,0.10); --cn-nav-bg: rgba(255,253,248,0.92); --cn-shadow: 0 4px 20px rgba(46,36,22,0.06); /* §75: สีที่ "เข้มเสมอ" ไม่ว่าธีมไหน — เพราะสีเหลืองแบรนด์ #FDB813 ไม่เปลี่ยนตามธีม ตัวอักษรที่วางบนพื้นเหลืองจึงต้องเข้มเสมอเช่นกัน ห้ามผูกกับ --cn-fg ที่พลิกเป็นสีครีมในธีมมืด */ --cn-ink: #2E2416; /* พื้นเข้มคงที่ (การ์ดเข้ม/ปุ่มลอย) */ --cn-on-yellow: #2E2416; /* ตัวอักษรบนพื้นเหลือง — คู่นี้ contrast ~8.6:1 ผ่าน WCAG AAA */ --cn-on-ink: #FFFFFF; /* ตัวอักษรบนพื้นเข้ม */ /* §75: สีสถานะที่ต้องอ่านออกทั้งสองธีม (เดิมทุกหน้าฮาร์ดโค้ดสีอ่อนไว้ พอสลับธีมมืดแล้วจม) */ --cn-danger: #C0392B; --cn-danger-bg: #FDECEA; --cn-success: #1E7B34; --cn-success-bg: #DFF5E1; --cn-field-bg: #FFFFFF; /* พื้นช่องกรอก */ --cn-muted-surface: #E3DCCF; /* แถบ/จุดที่ยัง "ไม่ถึง" เช่นไทม์ไลน์สถานะออเดอร์ */ /* ===== Alias ชื่อตัวแปรเก่าที่หลายหน้า (Login, Register, Cart, Checkout, MyPoints, OrderStatus, Menu) อ้างอิงอยู่ แต่ไม่เคยถูกประกาศไว้เอง ทำให้สีหายไปหมด เพิ่มตรงนี้ที่เดียว แก้ปัญหาทุกหน้าที่ใช้ชื่อเดิมพร้อมกันทันที ===== 🐛 §75: เดิมบรรทัด --dark-bg ชี้ไป var(--cn-bg) ซึ่ง "ผิดความหมาย" หน้าเก่าใช้ --dark-bg ในความหมาย "สีน้ำตาลเข้มของแบรนด์" (พื้นการ์ดเข้ม / ตัวอักษรบนปุ่มเหลือง) แต่ --cn-bg คือ "พื้นหลังหน้าเว็บ" = สีครีมเกือบขาว ผลคือ ราคาในหน้าเมนู / ปุ่มตะกร้าลอย / การ์ดแต้มสะสม กลายเป็นครีมบนขาว = มองไม่เห็นทั้งหมด ตอนนี้ชี้ไป --cn-ink ที่เข้มจริงตามความหมายเดิม */ --primary-yellow: var(--cn-yellow); --dark-bg: var(--cn-ink); --card-bg: var(--cn-card); --text-main: var(--cn-fg); --text-muted: var(--cn-fg-muted); } /* โหมดมืด: เทาอุ่นแบบมีมิติ (เหมือนเงาไม้ยามเย็น) ไม่ใช่ดำสนิทแบบจอปิด */ :root[data-theme="dark"] { --cn-bg: #3A342C; --cn-bg-alt: #423B31; --cn-fg: #F5EFE4; --cn-fg-muted: #C9BEA9; --cn-yellow: #FDB813; --cn-yellow-deep: #FFC940; --cn-link: #FFC940; /* ธีมมืด: บนพื้นการ์ด/พื้นหลัง 6.43–8.01:1 */ --cn-card: #4A4238; --cn-border: rgba(253,184,19,0.18); --cn-nav-bg: rgba(58,52,44,0.92); --cn-shadow: 0 4px 20px rgba(0,0,0,0.25); /* §75: สีสถานะเวอร์ชันธีมมืด — พื้นโปร่งใสทับพื้นการ์ด ตัวอักษรสว่างขึ้นให้ยังอ่านออก (--cn-ink / --cn-on-yellow / --cn-on-ink ไม่ประกาศซ้ำตรงนี้ เพราะต้องคงที่ทั้งสองธีม) */ --cn-danger: #FFA79B; --cn-danger-bg: rgba(192,57,43,0.22); --cn-success: #A7E4B6; --cn-success-bg: rgba(30,123,52,0.25); --cn-field-bg: #3F382F; --cn-muted-surface: #5A5145; } body { background-color: var(--cn-bg); color: var(--cn-fg); transition: background-color 0.25s ease, color 0.25s ease; } /* ปิดกรอบ Focus Outline ที่ได้มาจาก Blazor FocusOnNavigate */ h1:focus { outline: none; } /* ========================================= Theme Logo Switching & Aura Glow ========================================= */ @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(253, 184, 19, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(253, 184, 19, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 184, 19, 0); } } /* การสลับโลโก้ และใส่ออร่าเรืองแสงรอบรูปภาพ */ .brand-logo-dark { display: none; } .brand-logo-light { display: inline-block; width: 45px; height: 45px; border-radius: 50%; object-fit: cover; animation: pulseGlow 2s infinite; /* ออร่าเรืองแสงรอบโลโก้ */ background-color: #fff; /* กันขอบใส */ } /* เมื่อเป็นธีมมืด */ [data-theme="dark"] .brand-logo-light { display: none; } [data-theme="dark"] .brand-logo-dark { display: inline-block; width: 45px; height: 45px; border-radius: 50%; object-fit: cover; animation: pulseGlow 2s infinite; /* ออร่าเรืองแสงรอบโลโก้ */ background-color: var(--cn-bg); } /* คนที่ตั้งค่าเครื่องไม่ให้มี Animation (เช่นเวียนหัวง่าย) จะไม่เจอออร่ากระพริบที่โลโก้ (ขึ้นทุกหน้า มีผลกระทบเยอะสุด) */ @media (prefers-reduced-motion: reduce) { .brand-logo-light, .brand-logo-dark { animation: none; } } /* §71: มาสคอตเล็กในส่วนท้ายเว็บ — ปิดท้ายทุกหน้าด้วยหน้าตาที่ลูกค้าจำได้ ใช้ aria-hidden เพราะเป็นการตกแต่งล้วน ไม่ได้ให้ข้อมูลเพิ่ม โปรแกรมอ่านหน้าจอจะได้ไม่อ่านซ้ำซ้อน */ .cn-footer-mascot { width: clamp(64px, 9vw, 92px); height: auto; display: block; margin-bottom: 0.6rem; } /* ============================================================ 74: กรอบเนื้อหาหลักของทุกหน้า ⚠️ ต้นเหตุที่หลายหน้าตัวหนังสือชิดขอบจอ: .site-main ไม่เคยมี CSS เลย หน้าที่เขียน container ของตัวเอง (Home/Help/Terms/Refund/Activities) จึงดูปกติ ส่วนหน้าที่ไม่ได้เขียน (Menu/Cart/About/Contact/Privacy/Checkout/Account/ MyPoints/OrderStatus) เนื้อหาไปแปะขอบซ้ายสุด อ่านยากมากบนจอกว้าง แก้ที่ Layout จุดเดียวจึงซ่อมได้ทุกหน้าพร้อมกัน ไม่ต้องไล่แก้ทีละไฟล์ ============================================================ */ .site-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem); box-sizing: border-box; min-height: 60vh; /* หน้าเนื้อหาสั้นจะได้ไม่ดันส่วนท้ายเว็บลอยขึ้นมากลางจอ */ } /* หน้าที่มี Hero เต็มจอ (หน้าแรก) ต้องไม่มีกรอบมาบีบ — Hero ต้องกินเต็มความกว้าง */ .site-main:has(.cn-hero) { max-width: none; padding: 0; } /* ===== 74: ระยะและขนาดหัวข้อมาตรฐานของทุกหน้า ===== เดิมแต่ละหน้าใช้ h1 ขนาด Default ของเบราว์เซอร์ ทำให้หน้าตาไม่เป็นชุดเดียวกัน */ .site-main > h1, .cn-page-title { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.3; margin: 0 0 0.6rem; color: var(--cn-fg); } .cn-page-lead { margin: 0 0 2rem; max-width: 68ch; /* ความยาวบรรทัดที่อ่านสบายที่สุดคือ 60-75 ตัวอักษร */ color: var(--cn-fg-muted); font-size: 0.95rem; line-height: 1.75; } /* ===== 74: หน้าเอกสารกฎหมาย ===== ต้องอ่านง่ายเป็นพิเศษ เพราะเป็นเอกสารที่ลูกค้าต้องอ่านจริงเวลามีข้อพิพาท */ .cn-legal { max-width: 70ch; } .cn-legal h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cn-border); color: var(--cn-fg); } .cn-legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.5rem; } .cn-legal h3 { font-size: 0.98rem; margin: 1.25rem 0 0.35rem; color: var(--cn-fg); } .cn-legal p, .cn-legal li { font-size: 0.92rem; line-height: 1.85; color: var(--cn-fg-muted); } .cn-legal ul, .cn-legal ol { padding-left: 1.3rem; margin: 0.4rem 0 1rem; } .cn-legal li { margin-bottom: 0.35rem; } .cn-legal strong { color: var(--cn-fg); } /* กล่องข้อมูลติดต่อ/สรุปในเอกสารกฎหมาย */ .cn-legal-box { background: var(--cn-bg-alt); border: 1px solid var(--cn-border); border-radius: 12px; padding: 1rem 1.15rem; margin: 1rem 0 1.5rem; } .cn-legal-box p { margin: 0.25rem 0; } /* วันที่มีผลบังคับใช้ — ต้องเห็นชัดเพราะมีผลทางกฎหมาย */ .cn-legal-updated { display: inline-block; background: var(--cn-bg-alt); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.78rem; color: var(--cn-fg-muted); margin-bottom: 1rem; } /* ===== 74: เผื่อที่ว่างมุมล่างซ้ายให้ปุ่มผู้ช่วย ไม่ให้ทับเนื้อหาส่วนท้าย ===== */ .site-footer { padding-bottom: clamp(5rem, 10vw, 6rem); }