/* =============================================== Little Heart Book – Design System (base.css) Theme: Warm, pastel, playful, mother-friendly =============================================== */ /* Brand display font for the "Little Heart" wordmark. @import here means every page picks it up without editing each . */ @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); /* ---------- Self-hosted: DB HelvethaicaMon X ---------- ใช้ไฟล์ v3.2 ซึ่งเป็นเวอร์ชันล่าสุด font-display:swap → ป้องกัน invisible text ระหว่างโหลด */ @font-face { font-family: 'HelvethaicaMon'; src: url('font/DB HelvethaicaMon X.ttf') format('ttf'), url('font/DB HelvethaicaMon X.woff') format('woff'); } @font-face { font-family: 'Sarabun'; src: url('font/Sarabun.ttf') format('ttf'), url('font/Sarabun.woff') format('woff'); } /* ---------- CSS Variables ---------- */ :root { /* Brand colors – Primary = storybook cyan (from logo moon); Secondary = warm coral (price/sale) */ --lh-primary: #64C4F0; /* Little Heart sky blue — main CTA / brand */ --lh-primary-dark: #37A5DD; /* Hover/active (15% darker) */ --lh-primary-soft: #E0F5FF; /* Soft sky bg */ --lh-primary-rgb: 100, 196, 240; /* RGB triplet for rgba() use */ --lh-secondary: #ED7AA1; /* Warm coral — price, sale, urgency accent */ --lh-secondary-dark: #d75480; --lh-secondary-soft: #FDE8E3; --lh-secondary-rgb: 232, 106, 92; --lh-accent-yellow: #FFC857; /* Sunshine yellow – promo badge */ --lh-accent-yellow-soft: #FFF4D6; --lh-accent-pink: #F8B5C4; /* Soft pink – baby/mom tone */ --lh-accent-pink-soft: #FDECF0; --lh-accent-green: #A8D5A2; /* Fresh green – nature */ --lh-accent-green-soft: #E9F5E6; --lh-accent-mint: #B8E0D2; /* Neutrals */ --lh-cream: #EDF7FD; /* Page background – cool sky tint */ --lh-white: #FFFFFF; --lh-ink: #45606B; /* Body text (deep cool navy) */ --lh-ink-soft: #4A5D70; /* Secondary text */ --lh-mute: #9daebf; /* Muted / placeholder */ --lh-line: #D4EAF5; /* Divider/border – sky blue tint */ --lh-card: #FFFFFF; /* Semantic */ --lh-success: #2E8B57; --lh-warning: #F4A261; --lh-danger: #E63946; --lh-info: #4A90B8; /* Shadow (soft, card-like) */ --lh-shadow-sm: 0 2px 6px rgba(0, 60, 100, 0.07); --lh-shadow-md: 0 6px 20px rgba(0, 60, 100, 0.09); --lh-shadow-lg: 0 12px 36px rgba(0, 60, 100, 0.13); /* Radius – gentle rounded */ --lh-radius-xs: 6px; --lh-radius-sm: 10px; --lh-radius-md: 16px; --lh-radius-lg: 22px; --lh-radius-xl: 32px; --lh-radius-pill: 999px; /* Spacing scale */ --lh-space-1: 4px; --lh-space-2: 8px; --lh-space-3: 12px; --lh-space-4: 16px; --lh-space-5: 24px; --lh-space-6: 32px; --lh-space-7: 48px; --lh-space-8: 64px; /* Typography — Prompt for all headings (per design direction), Sarabun for body. Mali kept as last-resort fallback only. */ --lh-font-display: 'HelvethaicaMon', 'Prompt', 'Kanit', 'Sarabun', system-ui, sans-serif; --lh-font-heading: 'HelvethaicaMon', 'Prompt', 'Kanit', 'Sarabun', system-ui, sans-serif; --lh-font-body: 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif; /* Layout */ --lh-container: 1240px; --lh-header-h: 88px; --lh-transition: 180ms ease; /* ---------- Warm "mother-tone" refinements ---------- New tokens layered on top of brand colors. Used by cards, sections, and decorative elements to keep the whole site feeling like a soft picturebook page rather than a generic e-commerce template. */ --lh-paper: #FFFDF6; /* subtle cool-white page canvas */ --lh-cream-warm: #EBF7FE; /* light sky band for section dividers */ --lh-rose-blush: #FDE8E3; /* gentle peach-pink for hover halos (coral accent) */ --lh-warm-shadow-sm: 0 1px 4px rgba(232, 106, 92, 0.06); --lh-warm-shadow-md: 0 8px 24px rgba(232, 106, 92, 0.10); --lh-warm-shadow-lg: 0 18px 44px rgba(232, 106, 92, 0.16); /* Asymmetric "blob" radius — looks hand-drawn, used for hero halos */ --lh-radius-organic: 32% 68% 38% 62% / 48% 32% 68% 52%; /* Refined easing curve — feels like a gentle breath */ --lh-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --lh-transition-soft: 280ms var(--lh-ease-soft); } /* ---------- Reset ---------- */ * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; scroll-behavior: smooth; } body { font-family: var(--lh-font-body); font-size: 16px; line-height: 1.7; color: var(--lh-ink); /* ── BACKGROUND CANVAS ───────────────────────────────────────── body เป็น "ผ้าพื้นหลัง" ที่จะมองเห็นได้ด้านข้างของกล่องเนื้อหา (กล่องเนื้อหา #main มี max-width: 1200px ล้อมเนื้อหาไว้) ➜ ต้องการใส่ภาพ Background เพิ่มตรงนี้: background-image: url('../img/ชื่อไฟล์.jpg'), ; background-size: cover; หรือ background-repeat: repeat; ──────────────────────────────────────────────────────────────── */ /* ── BODY BACKGROUND ───────────────────────────────────────────── body คือพื้นหลังที่เห็นได้ด้านข้างของ #main (max-width 1200px) รูปจะแสดงตรงขอบซ้าย/ขวาเมื่อหน้าจอกว้างกว่า 1200px - cover → scale ให้เต็ม viewport ทั้งกว้างและสูง - no-repeat → ไม่ tile ซ้ำ - top center → ยึดจากขอบบน กึ่งกลาง */ background-color: #C3E8F8; /* fallback สีฟ้าอ่อนตอนรูปยังโหลดไม่เสร็จ */ background-image: url('image/pattern-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: top center; background-attachment: scroll; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.005em; /* breathe a little for Thai script */ } img { max-width: 100%; height: auto; display: block; } picture { display: block; } svg { display: block; } a { color: var(--lh-primary); text-decoration: none; transition: color var(--lh-transition); } a:hover { color: var(--lh-primary-dark); } button { font-family: inherit; cursor: pointer; border: 0; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--lh-font-heading); color: var(--lh-ink); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 var(--lh-space-3) 0; } h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.01em; } h2 { font-size: clamp(22px, 3.8vw, 48px); } h3 { font-size: clamp(19px, 2.2vw, 24px); } h4 { font-size: 18px; } h5 { font-size: 16px; } p { margin: 0 0 var(--lh-space-3) 0; } /* ---------- Typography utilities ---------- */ .display-font { font-family: var(--lh-font-display); } .text-center { text-align: center; } .text-muted { color: var(--lh-mute); } .text-ink-soft { color: var(--lh-ink-soft); } .text-primary { color: var(--lh-primary); } .text-bold { font-weight: 700; } .text-sm { font-size: 14px; } .text-xs { font-size: 13px; } .text-lg { font-size: 18px; } /* ---------- Container ---------- */ .container { width: 100%; max-width: var(--lh-container); margin: 0 auto; padding: 0 var(--lh-space-3); } @media (max-width: 768px) { .container { padding: 0 var(--lh-space-4); } } /* ---------- Section ---------- */ .section { padding: var(--lh-space-5) 0; } .section-sm { padding: var(--lh-space-4) 0; } @media (max-width: 768px) { .section { padding: var(--lh-space-4) 0; } .section-sm { padding: var(--lh-space-3) 0; } } @media (max-width: 480px) { .section { padding: var(--lh-space-3) 0; } } /* ---------- Section title ---------- */ /* The decorative bar uses coral→peach gradient (warm mother tone) instead of the previous cyan→pink (felt cold against cream background). The h2 picks up the display font with tight tracking for editorial feel. */ .section-title { display: flex; align-items: center; gap: var(--lh-space-3); margin-bottom: var(--lh-space-5); } .section-title h2 { font-family: var(--lh-font-display); color: var(--lh-primary-dark); font-weight: 700; margin: 0; letter-spacing: -0.005em; } .section-title::before { content: ''; width: 6px; height: 32px; /* background: linear-gradient(180deg, var(--lh-secondary) 0%, var(--lh-accent-pink) 60%, var(--lh-accent-yellow) 100%); */ background: var(--lh-secondary); border-radius: var(--lh-radius-pill); box-shadow: 0 2px 8px rgba(232, 106, 92, 0.20); } .section-title-decor { font-size: 14px; color: var(--lh-ink-soft); font-style: italic; margin-left: auto; padding-left: var(--lh-space-3); position: relative; } .section-title-decor::before { content: '✦'; color: var(--lh-secondary); margin-right: 6px; opacity: 0.6; font-style: normal; } @media (max-width: 640px) { .section-title-decor { display: none; } .section-title { margin-bottom: var(--lh-space-4); } .section-title::before { height: 26px; } } /* ── "ดูทั้งหมด" pill link — มุมขวาบนของ section header ─────────────────── กรณีที่ 1: ไม่มี .section-title-decor → margin-left:auto ดันปุ่มไปชิดขวา กรณีที่ 2: มี .section-title-decor (ซึ่งมี margin-left:auto อยู่แล้ว) → reset margin-left:0 ให้ปุ่มตามติด decor ทางขวาพอดี */ .btn-view-all { display: inline-flex; align-items: center; gap: 5px; font-family: var(--lh-font-heading); font-size: 16px; font-weight: 500; color: var(--lh-primary-dark); background: var(--lh-white); border: 2px solid var(--lh-primary); border-radius: var(--lh-radius-pill); padding: 6px 18px; text-decoration: none; white-space: nowrap; flex-shrink: 0; margin-left: auto; /* กรณี 1: ไม่มี decor */ transition: background var(--lh-transition), border-color var(--lh-transition); } .btn-view-all:hover { background: var(--lh-primary-soft); border-color: var(--lh-primary-dark); color: var(--lh-primary-dark); text-decoration: none; } .btn-view-all .btn-view-all-arrow { font-size: 18px; line-height: 1; } /* กรณี 2: decor อยู่ก่อน → decor ดูแล margin-left:auto แล้ว ปุ่มไม่ต้องการ */ .section-title-decor + .btn-view-all { margin-left: 0; } /* ---------- Grid helper ---------- */ .grid { display: grid; gap: var(--lh-space-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1024px) { .grid-5 { grid-template-columns: repeat(4, 1fr); } .grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ---------- Flex helpers ---------- */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: var(--lh-space-2); } .gap-3 { gap: var(--lh-space-3); } .gap-4 { gap: var(--lh-space-4); } .gap-5 { gap: var(--lh-space-5); } /* ---------- Scroll / skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 10px; background: var(--lh-ink); color: #fff; padding: 10px 20px; border-radius: var(--lh-radius-sm); z-index: 9999; } .skip-link:focus { left: 10px; } /* ---------- Focus style ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--lh-primary); outline-offset: 2px; } /* ---------- Visually hidden ---------- */ .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; } .promo-strip { background: var(--lh-paper); color: var(--lh-primary-dark); font-family: var(--lh-font-body); font-size: 12.5px; font-weight: 400; letter-spacing: 0.01em; padding: 6px 0; text-align: center; border-bottom: 1px solid rgba(0, 168, 228, 0.14); }