/* Kanit เก็บไว้บนโฮสต์เอง ไม่ดึงจาก Google */ @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/kanit-300.woff2') format('woff2'); } @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'); } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kanit-700.woff2') format('woff2'); } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/kanit-800.woff2') format('woff2'); } /* HealthMate design tokens — shared by the marketing site and the app. Kanit is loaded via in each page's , not @import here, so the font request starts in parallel with this file instead of after it. */ :root { /* Brand */ --color-primary: #2F80ED; --color-primary-dark: #1E64C8; --color-accent: #4CC9F0; --color-primary-light: #EAF4FF; --color-bg: #F7FAFF; --color-white: #FFFFFF; /* Text */ --color-text: #1F2937; --color-text-muted: #6B7280; --color-text-faint: #6B7482; /* Status */ --color-success: #10B981; --color-success-light: #E7F9F1; --color-warning: #F59E0B; --color-warning-light: #FEF3E2; --color-danger: #EF4444; --color-danger-light: #FDEAEA; /* Elevation */ --shadow-sm: 0 2px 8px rgba(31, 61, 100, 0.06); --shadow-md: 0 8px 24px rgba(31, 61, 100, 0.08); --shadow-lg: 0 20px 48px rgba(31, 61, 100, 0.14); --shadow-glow: 0 0 0 1px rgba(47, 128, 237, 0.12), 0 12px 32px rgba(47, 128, 237, 0.18); /* Radius */ --radius-card: 24px; --radius-btn: 18px; --radius-input: 18px; --radius-pill: 999px; --radius-sm: 12px; /* Layout */ --container-max: 1180px; --header-h: 76px; /* ---------- ขนาดตัวอักษร ชุด ข ที่เจมส์เลือก 28 ส.ค. 69 ---------- ของเดิมใช้ขนาดต่างกัน 29 ค่าไล่ตั้งแต่ 10px ถึง 100px หลายคู่ห่างกันครึ่งพิกเซล ซึ่งตาแยกไม่ออกเลยไม่ได้บอกลำดับความสำคัญ แต่ทำให้หน้าดูไม่เป็นระเบียบ ชุดนี้เหลือ 8 ระดับ เนื้อหาหลัก 17px เพราะตัวไทยมีสระบนล่างเบียดกัน ที่ 16px ยังอ่านตึงกว่าตัวอังกฤษขนาดเดียวกัน ตัวเลขแสดงผลขนาดใหญ่ (คะแนน แคลอรี่) กับเครื่องหมายคำพูดตกแต่ง ไม่ได้ผูกกับชุดนี้ เพราะมันเป็นกราฟิก ไม่ใช่ข้อความที่ต้องอ่าน แก้ที่นี่ที่เดียวเปลี่ยนทั้งเว็บ ทั้ง 4 หน้าการตลาดและ 27 หน้าในระบบประเมิน */ --fs-note: 13.5px; --fs-small: 15.5px; --fs-body: 17px; --fs-lead: 18.5px; --fs-h3: 20px; --fs-h2s: 24px; --fs-h2: 31px; --fs-h1s: 38px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* The header/footer/topbar/bottomnav partials are injected into these wrapper divs by include.js. Without display:contents the wrapper is a block box sized to its content, so any position:sticky child (header, app-topbar, app-bottomnav) has no room to move within it and never actually sticks. */ /* ก่อน include เสร็จ ให้ placeholder เป็นกล่องจริงเพื่อจองความสูงไว้ กันเนื้อหากระโดดตอน header โผล่ พอ include เสร็จ include.js จะเปลี่ยนเป็น display:contents ให้ sticky ยึดกับ body ตามเดิม */ [data-include] { display: block; } [data-include][data-loaded] { display: contents; } [data-include$="header.html"]:not([data-loaded]) { min-height: calc(var(--header-h) + 1px); } [data-include$="app-topbar.html"]:not([data-loaded]) { min-height: 64px; } body { margin: 0; font-family: 'Kanit', 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius-btn); padding: 15px 28px; font-size: var(--fs-body); font-weight: 600; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } /* ของเดิมเป็นไล่สีจาก #4CC9F0 ไป #2F80ED ตัวหนังสือขาวบนหัวปุ่มได้คอนทราสต์ 1.92 ต่ำกว่าเกณฑ์ 4.5 อยู่เกินครึ่ง และ Lighthouse จับไม่ได้เพราะพื้นเป็นไล่สี ไม่ใช่สีเดียว น้ำเงินทึบ #17539F ได้ 7.57 ผ่านทุกจุด ใช้ร่วมกับปุ่มในฮีโร่ที่แก้ไปก่อนหน้าแล้ว */ .btn-primary { background: #17539F; color: #fff; box-shadow: 0 6px 18px rgba(23, 83, 159, 0.24); } .btn-primary:hover { background: #123F7A; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 83, 159, 0.30); } .btn-outline { background: var(--color-white); /* ใช้สีเข้มกว่า primary หนึ่งขั้น เพราะ #2F80ED บนพื้นขาวได้คอนทราสต์แค่ 3.87 ต่ำกว่าเกณฑ์ 4.5 */ color: var(--color-primary-dark); border: 1.5px solid #D6E6FB; } .btn-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); } .btn-ghost { background: transparent; color: var(--color-text); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* แถบโหลดตอนเปลี่ยนหน้า โผล่เฉพาะตอนที่หน้าถัดไปมาช้าจริง ๆ ไม่ใช่ขึ้นทุกครั้ง */ .nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary) 55%, var(--color-accent)); box-shadow: 0 0 10px rgba(47, 128, 237, 0.55); opacity: 0; z-index: 9999; pointer-events: none; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.22s ease; } .nav-progress.is-on { opacity: 1; } .nav-progress.is-done { transition: width 0.18s ease-out, opacity 0.3s ease 0.12s; } @media (prefers-reduced-motion: reduce) { .nav-progress { transition: opacity 0.2s ease; } }