/* --------------------------------------------------------------------------- * morluang.css — ชั้น override ของ "หมอหลวง" ที่ทับบน theme 24HOS (Themesflat) * * กติกา: * 1. ห้ามแก้ styles.css ของธีมโดยตรง — ถ้าจะปรับสี/ระยะ ให้เขียนทับที่ไฟล์นี้ * เพื่อให้ยัง re-compile theme-src/scss ทับของเดิมได้โดยไม่เสียงานเรา * 2. ธีมผูกสีทั้งชุดไว้กับตัวแปร CSS ใน :root — เปลี่ยนแบรนด์ให้แก้ที่ตัวแปร * ไม่ต้องไล่แก้รายคลาส * 3. โหลดไฟล์นี้เป็นไฟล์สุดท้ายของ เสมอ (หลัง styles.css และหลัง Tailwind) * ------------------------------------------------------------------------- */ :root { /* ═══ จานสีแบรนด์ — ยึดจากโลโก้หมอหลวง ═══════════════════════════════════ * โลโก้ (src/components/theme/Logo.astro) มีสองสีเท่านั้น * #2E37A4 น้ำเงินคราม แกนตั้ง + แขนซ้ายของกากบาท * #DC2626 แดง แขนขวาของกากบาท * ก่อนหน้านี้เว็บใช้เขียวมิ้น (#006c68 / #00D3C7) ตาม inno.24hos.com * ซึ่งเป็นสีของ 24HOS ไม่ใช่ของเรา จึงเปลี่ยนมาใช้สีโลโก้ตัวเองทั้งชุด * * ⚠️ ชื่อตัวแปร --red / --red-2 เป็นของธีม ห้ามเปลี่ยนชื่อ ทั้งธีมอ้างชื่อนี้ * (ชื่อมาจากสีเดิมของ template ที่เป็นแดงส้ม #FF3F25) */ /* accent หลักของธีมทั้งใบ — ปุ่ม ไอคอน ลิงก์ เส้นใต้หัวข้อ hover */ --red: #2E37A4; /* accent รอง — ในเว็บนี้ถูกใช้เป็น "สีตัวหนังสือ/ไอคอนบนพื้นเข้ม" ทั้งหมด * (ตรวจแล้ว: ไม่มีที่ไหนใช้เป็นพื้นหลัง คลาส bg-red-2/style-bg-red-2 ของธีม * ไม่ถูกใช้ในหน้าใดเลย) จึงต้องเป็นแดงที่ "สว่างพอ" ไม่ใช่แดงโลโก้ตรง ๆ * #DC2626 บนพื้น ink #0C171A ได้แค่ 3.77:1 ตก WCAG AA (ต้องการ 4.5) * #F87171 เป็นสีเดียวกัน (hue 0 เท่ากัน) แต่สว่างกว่า ได้ 6.6:1 * สีมิ้นเดิมไม่เจอปัญหานี้เพราะ #00D3C7 สว่างอยู่แล้ว * ถ้าจะเอาแดงโลโก้เป็นพื้นทึบ ให้ใช้ --mor-red (ขาวบนนั้นได้ 5.2:1 ผ่าน) */ --red-2: #F87171; /* โทเคนของหมอหลวงเอง ใช้ตอนต้องการสีแบรนด์ตรง ๆ */ --mor-navy: #2E37A4; --mor-navy-dark: #232A82; /* ตัวหนังสือเข้มบนพื้นอ่อน */ --mor-red: #DC2626; --mor-tint: #EEF0FA; /* พื้นอ่อนของแบรนด์ (เดิมเป็นมิ้นอ่อน #E6FAF8) */ --mor-ink: #0C171A; } /* --- พื้นอ่อนของธีม: ฟ้าอมเขียว -> น้ำเงินอ่อน ------------------------------ * ธีม 24HOS ใช้พื้นอ่อนโทนฟ้าอมเขียวคู่กับ accent เขียวมิ้นของเขา * พอเราเปลี่ยน accent เป็นน้ำเงินคราม พื้นพวกนี้เลยอมเขียวตีกับน้ำเงินทันที * (พื้นที่ใหญ่ที่สุดของเว็บคือ .section-department-inner เช่นบล็อก "โมดูลครบทุกแผนก") * * เลือกสีใหม่โดยยึด "ความสว่างเท่าเดิม" เพื่อไม่ให้โครงน้ำหนักของดีไซน์เปลี่ยน * --gray-light #D6E8EB (hue 189, luminance .780) -> #DDE6F6 (hue 218, .786) * --gray-1 #EFF8FA (hue 191, luminance .924) -> #F3F6FD (hue 222, .921) * ไม่ใช้ tint ของ #2E37A4 ตรง ๆ เพราะออกมา hue 236 อมม่วง อ่านเป็นเทา-ลาเวนเดอร์ * มากกว่าน้ำเงิน hue ~218-222 อ่านเป็นฟ้า-น้ำเงินสะอาดกว่า * คอนทราสต์ดีขึ้นเล็กน้อยด้วย: ตัวอักษรเข้ม 14.40 -> 14.50, ปุ่มน้ำเงิน 7.55 -> 7.61 */ :root { --gray-light: #DDE6F6; --gray-1: #F3F6FD; } /* ธีม hardcode สีเดิมไว้ในกราเดียนต์อีก 3 จุด ไม่ผูกกับตัวแปร * ตัวที่สำคัญที่สุดคือฝ้าที่ทาบบนรูปฮีโร่ ถ้าไม่เปลี่ยนตามจะเขียวตีกับ * บล็อกน้ำเงินอ่อนที่อยู่ถัดลงมาทันที (rgb เดิม 214,232,235 -> 221,230,246) */ .page-title-home .page-title-home-inner::before { background: linear-gradient(270deg, rgba(221, 230, 246, 0) 35%, #DDE6F6 70%); } .education-specia .image::before { background: linear-gradient(180deg, rgba(221, 230, 246, 0) 45%, #DDE6F6 100%); } .section-appointment.p-make .image::before { background: linear-gradient(180deg, rgba(221, 230, 246, 0) 0%, #DDE6F6 100%); } /* --- สีหมึกของธีม: ดำอมเขียว -> ดำอมน้ำเงิน -------------------------------- * ธีม 24HOS ใช้ #0C171A เป็น "สีดำ" ของเขา ซึ่งไม่ใช่ดำจริง แต่เป็น hue 193 * (ฟ้าอมเขียว) ให้เข้ากับ accent เขียวมิ้นของเขา พอเราเปลี่ยนแบรนด์เป็นน้ำเงิน * บล็อกทึบ (.mor-dark) กับหัวข้อทั้งเว็บเลยยังอมเขียวค้างอยู่ * * เปลี่ยนเป็น #0E1525 = hue 222 เท่ากับพื้นน้ำเงินอ่อนที่ตั้งไว้ข้างบน * โดยยึด "ความสว่างเท่าเดิม" เหมือนเดิม: luminance .007655 -> .007633 (ต่างกัน * 0.3%) คอนทราสต์กับขาวจึงคงที่ 18.21 -> 18.22 และ --red-2 บนพื้นนี้ยังได้ 6.59 * เท่าเดิม — ไม่มีจุดไหนที่ผ่าน/ตก WCAG ต่างจากเดิม * * ⚠️ ธีม hardcode สีนี้ไว้อีก 9 จุดที่ไม่ผูกกับตัวแปร (rgb 12,23,26 -> 14,21,37) * ตัวที่เห็นจริงบนเว็บเราคือฝ้าดำบนหัวหน้าเพจ (.page-title-content) ที่ใช้ทุกหน้ารอง * ที่เหลือเป็นเซกชันของ template ที่เรายังไม่ได้ใช้ แต่ override ไว้ก่อน * เผื่อหยิบมาใช้ทีหลังจะได้ไม่โผล่สีเขียวกลับมา */ :root { --black: #0E1525; --color-title: #0E1525; --border-7: rgba(14, 21, 37, 0.1); --color-text-2: rgba(14, 21, 37, 0.5); --color-text-5: rgba(14, 21, 37, 0.2); --mor-ink: #0E1525; } /* ฝ้าดำบนหัวหน้าเพจ — ใช้ทุกหน้ารอง (components/theme/PageTitle.astro) * * ธีมไล่ฝ้าจากทึบซ้ายไปโปร่งที่ 60% เพราะรูปเดโมของธีมมืดอยู่แล้ว แต่รูปหัวเพจ * ที่เราใช้ (page-title-1 / -2 / -h4-2) สว่างเกือบขาวทางขวา หัวเรื่องสีขาวจึงลอย * อยู่บนพื้นสว่างที่ 1.33-1.37:1 — อ่านแทบไม่ออก และเป็นแบบนี้ทุกหน้ารอง * * แก้ด้วยการตั้ง "พื้นฝ้าขั้นต่ำ" ที่ 0.6 ตลอดแนว ยังไล่จากเข้มซ้ายไปจางขวา * ตามดีไซน์เดิม แต่ไม่มีจุดไหนโปร่งจนตัวหนังสือหาย: ขาวบนฝ้า 0.6 ทับพื้นขาวล้วน * (กรณีแย่สุดที่เป็นไปได้) ยังได้ 4.77:1 ผ่าน AA * * ⚠️ ถ้าเปลี่ยนรูปหัวเพจเป็นชุดใหม่ที่มืดอยู่แล้ว ลดค่าพวกนี้ลงได้ * วัดซ้ำด้วย D:\tmp\scrim2.mjs (ซ่อนตัวอักษรแล้ววัดพื้นหลังจริง) */ .page-title .page-title-content::before { background: linear-gradient(90deg, #0E1525 0%, rgba(14, 21, 37, 0.86) 40%, rgba(14, 21, 37, 0.68) 70%, rgba(14, 21, 37, 0.60) 100%); } /* เซกชันของ template ที่ยังไม่ได้ใช้ — override ไว้กันสีเขียวย้อนกลับ */ .tf-post-grid.style-absolute .image::before, .section-lab.h-1 .image::before, .section-appointment.h-3 .image.image-1::before, .section-team.p-about .image-section::before { background: linear-gradient(180deg, rgba(14, 21, 37, 0) 0%, #0E1525 100%); } .section-appointment.p-make .text-overlay { background: linear-gradient(180deg, rgba(14, 21, 37, 0.05) 0%, rgba(14, 21, 37, 0) 100%); } .portfolio-item .image::before { background: rgba(14, 21, 37, 0.7); } .tf-post-list.small-2 .metas-item::before, .section-history.p-history .sw-history .swiper-pagination-bullet::before { background: rgba(14, 21, 37, 0.2); } /* --- ฟอนต์ ----------------------------------------------------------------- * ⚠️ ลำดับต้องเป็น Rethink Sans ก่อน ไม่ใช่ Noto Sans Thai * Rethink Sans คือฟอนต์ที่ธีมออกแบบมา ถ้าเอา Noto Sans Thai ขึ้นก่อน * ข้อความละติน (เมนู ปุ่ม หัวข้ออังกฤษ) จะเปลี่ยนไปใช้อีกฟอนต์ที่ความกว้าง * และน้ำหนักไม่เท่ากัน หน้าตาจะเพี้ยนจากเว็บต้นฉบับทันที — เทียบกับ * inno.24hos.com แล้วต่างกันชัดเจน * อักษรไทยที่ไม่มีใน Rethink Sans จะตกไป Noto Sans Thai เองตามลำดับ * (เว็บต้นฉบับไม่ได้ประกาศ fallback ไทยไว้ ปล่อยให้เป็นฟอนต์ระบบ) */ body { font-family: 'Rethink Sans', 'Noto Sans Thai', system-ui, -apple-system, sans-serif; } .font-thai { font-family: 'Prompt', 'Noto Sans Thai', system-ui, sans-serif; } /* หน้าอังกฤษไม่ควรโดน Prompt บีบ ให้ใช้ Rethink Sans ตามดีไซน์ต้นฉบับ */ html[lang="en"] .font-thai { font-family: 'Rethink Sans', 'Noto Sans Thai', system-ui, sans-serif; } /* --- กันไม่ให้อักษรไทยหล่นไปเป็นฟอนต์ระบบ ------------------------------------ * ธีมประกาศ `font-family: "Rethink Sans", sans-serif` ไว้ 3 ที่โดยไม่มีฟอนต์ไทย * ต่อท้าย (styles.css บรรทัด 263 = body/button/input/select/textarea, 595 = h1-h6 * และ 8067 = ตัวเลข counter) เราแก้ให้ body แล้วแต่ selector อื่นยังไม่ได้แก้ * * Rethink Sans ไม่มีอักษรไทยเลย (วัดแล้ว: ข้อความไทย 40px กว้างเท่ากับ sans-serif * เป๊ะ ๆ = เบราว์เซอร์ตกไปใช้ฟอนต์ระบบ) ผลคือหัวข้อและช่องกรอกที่ไม่ได้ใส่คลาส * .font-thai จะแสดงไทยด้วยฟอนต์ของ Windows คนละตัวกับทั้งเว็บ **โดยไม่มีอะไรฟ้อง** * ที่เจอจริง: หัวคอลัมน์ฟุตเตอร์, หัวข้อ breadcrumb, placeholder ฟอร์มติดต่อ, * ช่องค้นหาใน offcanvas,