/* ========================================================================== Healthy2FitNFirm — Design Tokens คัดลอกจาก Claude Design (tokens/*.css) — แก้ค่าที่นี่ที่เดียว ทั้งเว็บเปลี่ยนตาม ========================================================================== */ /* ฟอนต์ย้ายไปโหลดด้วย ใน ของทุกหน้าแล้ว @import ในไฟล์ CSS ทำให้เบราว์เซอร์ต้องโหลด CSS เสร็จก่อนจึงเริ่มโหลดฟอนต์ กลายเป็นลูกโซ่ที่ทำให้ตัวหนังสือขึ้นช้า กระทบคะแนน LCP */ :root { /* ---------- Fonts ---------- */ --font-display: "Kanit", "Noto Sans Thai", system-ui, sans-serif; --font-body: "Noto Sans Thai", "Kanit", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace; /* ---------- Brand base ---------- Vivid "healthy active" palette: saturated emerald, hot coral, electric lime. Cream ground kept light so the saturated colors can shout. */ --green-900: #06392C; --green-800: #0A5B45; --green-700: #0E8C68; /* Primary — เขียวมรกตสด */ --green-600: #12AC7E; --green-500: #1ECB93; --mint-300: #6FE7BE; --mint-200: #A8F2D8; --mint-100: #DDFBEF; --peach-700: #C63C10; --peach-600: #EE5220; --peach-500: #FF6A35; /* Accent — CTA, coral ส้มสด */ --peach-300: #FF9E73; --peach-100: #FFE8DC; --lime-500: #8FD91C; --lime-300: #C4F062; --lime-100: #EEFBD3; --cream-100: #FFFDF7; --cream-200: #FBF4E4; /* Secondary — พื้นหลังครีมสว่าง */ --cream-300: #F0E6CF; --cream-400: #DFD1B2; --ink-900: #23262B; /* body text — ไม่ใช้ดำสนิท */ --ink-700: #4B4F55; --ink-500: #737880; --ink-300: #A6ABB3; --white: #FFFFFF; --lemon-500: #FFC01E; --berry-500: #E03457; /* ---------- Semantic colors ---------- */ --text-body: var(--ink-900); --text-muted: var(--ink-500); --text-heading: var(--green-800); --text-on-primary: var(--white); --text-on-accent: #FFFFFF; --text-on-lime: #1E3B00; --text-link: var(--green-700); --text-link-hover: var(--green-800); --surface-page: var(--cream-200); --surface-card: var(--white); --surface-raised: var(--cream-100); --surface-sunken: var(--cream-300); --surface-primary: var(--green-700); --surface-primary-hover: var(--green-800); --surface-accent: var(--peach-500); --surface-accent-hover: var(--peach-600); --surface-mint: var(--mint-100); --surface-lime: var(--lime-100); --surface-inverse: var(--green-900); --border-subtle: var(--cream-300); --border-default: var(--cream-400); --border-strong: var(--ink-300); --border-primary: var(--green-700); --border-focus: var(--green-600); --status-success: var(--green-600); --status-success-bg: var(--mint-100); --status-warning: #A8761A; --status-warning-bg: #FFF4D8; --status-error: var(--berry-500); --status-error-bg: #FDEAEE; --focus-ring: 0 0 0 3px rgba(18, 172, 126, 0.42); --overlay-scrim: rgba(6, 57, 44, 0.58); /* ---------- Typography scale (mobile-first) ---------- */ --text-hero: 34px; --text-hero-desktop: 56px; --text-h1: 28px; --text-h1-desktop: 42px; --text-h2: 23px; --text-h2-desktop: 32px; --text-h3: 19px; --text-h3-desktop: 24px; --text-lead: 18px; --text-body-lg: 17px; --text-body-md: 16px; --text-body-sm: 15px; --text-caption: 13px; --text-micro: 12px; --leading-tight: 1.22; --leading-snug: 1.4; --leading-normal: 1.6; --leading-loose: 1.85; /* ภาษาไทยต้องมีที่ว่างให้วรรณยุกต์ */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; /* ---------- Spacing / layout ---------- */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --gutter-mobile: 20px; --gutter-desktop: 32px; --section-y-mobile: 56px; --section-y-desktop: 96px; --content-max: 1120px; --prose-max: 62ch; --tap-min: 48px; /* mobile-first: ห้ามต่ำกว่า 44px */ /* ---------- Radius ---------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --radius-card: var(--radius-lg); --radius-button: var(--radius-pill); --radius-input: var(--radius-md); /* ---------- Elevation (เงาอุ่น ไม่ใช้ดำล้วน) ---------- */ --shadow-xs: 0 1px 2px rgba(43, 43, 43, 0.06); --shadow-sm: 0 2px 6px rgba(43, 43, 43, 0.07); --shadow-card: 0 6px 18px rgba(14, 140, 104, 0.14); --shadow-card-hover: 0 12px 28px rgba(14, 140, 104, 0.22); --shadow-cta: 0 8px 20px rgba(255, 106, 53, 0.38); --shadow-float: 0 10px 30px rgba(6, 57, 44, 0.24); --shadow-inset-sunken: inset 0 1px 2px rgba(43, 43, 43, 0.06); --scrim-bottom: linear-gradient(to top, rgba(6, 57, 44, 0.80), rgba(6, 57, 44, 0)); /* ---------- Motion ---------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.22, 0.7, 0.28, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.4, 1); --ease-soft-back: cubic-bezier(0.34, 1.3, 0.64, 1); --press-scale: 0.97; } /* ---------- Base reset ---------- */ *, *::before, *::after { box-sizing: border-box } [hidden] { display: none !important } html { scroll-behavior: smooth; scroll-padding-top: 80px } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } } body { margin: 0; font-family: var(--font-body); font-size: var(--text-body-md); line-height: var(--leading-loose); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-heading); margin: 0 0 var(--space-3); } p { margin: 0 0 var(--space-4) } a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid rgba(30, 111, 92, 0.3); transition: color var(--dur-fast) var(--ease-out) } a:hover { color: var(--text-link-hover); border-bottom-color: currentColor } :focus-visible { outline: none; box-shadow: var(--focus-ring) } img { max-width: 100% } /* ซ่อนแบบยังอ่านได้ด้วย screen reader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* เป็นแค่ตัวห่อไว้สลับไฟล์ webp/jpg ไม่ควรมีผลกับการจัดวาง display:contents ทำให้เบราว์เซอร์มองข้ามกล่องนี้ไป เหมือนไม่มีอยู่ */ picture{display:contents} /* display:contents ทำให้ กลายเป็นลูกของ grid/flex ไปด้วย แล้วไปกินช่องหนึ่งช่องจนภาพตกลงไปแถวล่าง จึงต้องสั่งไม่ให้มันมีกล่อง */ picture>source{display:none}