/* ChubWai.com sales page โ€” STORY-1.2. Colours: var(--token) only, per CLAUDE.md design-system rules and SCREEN-CONTRACT.md. No hardcoded hex. ONE type scale (product owner decision, 2026-09-20). Every font-size on this page is one of the seven --fs-* tokens below; nothing else is allowed, and no font-size may be written inline in the HTML. Thai body text is 17px minimum. */ :root { --fs-micro: 13px; /* legal / trademark / sample badges only */ --fs-small: 15px; /* captions, chips, secondary lines */ --fs-body: 17px; /* default reading size โ€” never go below this for prose */ --fs-lead: 20px; /* section intro paragraphs */ --fs-h3: 24px; --fs-h2: 30px; --fs-h1: 38px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; color: var(--navy); background: var(--app-bg); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; } img, iframe { max-width: 100%; } a { color: inherit; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; overflow-x: hidden; } /* ๐Ÿšจ Do NOT put `overflow-wrap: anywhere` (or `break-word`) on Thai body text. Thai has no spaces between words, so the browser's own dictionary is the only thing that knows where a line may break โ€” and `` is what turns it on. `anywhere` overrides it and lets a break land mid-word, which is how `เน„เธกเนˆเน€เธ„เธข` ended up split across two lines in the S8 promise. It also hides real overflow by letting text break instead of pushing the layout wide. If one long token ever overflows (a URL, an e-mail, a code string), scope the property to that one element โ€” never to body text. */ :lang(th) { word-break: normal; line-break: normal; overflow-wrap: normal; } /* A Thai term the browser's dictionary would split even though it reads as one word (เน„เธกเนˆเน€เธ„เธข, เธ›เธฃเธฐเธกเธงเธฅเธœเธฅ). Use sparingly, and only on short terms: a long one would push the layout wide at 320px. */ .nb { white-space: nowrap; } .step-card > div, .status-card > div { min-width: 0; } section { padding: 28px 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* โ”€โ”€ type โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .eyebrow { color: var(--blue); font-weight: 600; font-size: var(--fs-small); margin: 0 0 8px; } h1 { font-size: var(--fs-h1); line-height: 1.2; color: var(--navy); margin: 0 0 12px; font-weight: 700; } h2 { font-size: var(--fs-h2); line-height: 1.25; color: var(--navy); margin: 0 0 8px; font-weight: 700; } h3 { font-size: var(--fs-h3); line-height: 1.35; color: var(--navy); margin: 0 0 6px; font-weight: 700; } .h-lead { font-size: var(--fs-lead); line-height: 1.4; } /* .sub = the lead paragraph that introduces a section (follows an h2). .copy = secondary prose further inside a section (follows an h3). */ .sub { color: var(--gray-700); font-size: var(--fs-lead); line-height: 1.5; margin: 0 0 16px; } .copy { color: var(--gray-700); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 16px; } .small { font-size: var(--fs-small); line-height: 1.6; color: var(--gray-700); } .tiny { font-size: var(--fs-micro); line-height: 1.6; color: var(--gray-400); } p { line-height: 1.6; } em.blue { color: var(--blue); font-style: normal; } /* โ”€โ”€ buttons โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-lg); font-weight: 700; font-size: var(--fs-body); padding: 14px 22px; text-decoration: none; border: none; cursor: pointer; min-height: 48px; } .btn-primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-card); } .btn-block { width: 100%; } .btn-outline { background: var(--white); color: var(--navy); border: 1px solid var(--gray-200); } /* Blue inline link. Used for in-page jumps and for the one share link in S14. */ .link-blue { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; text-decoration: none; font-size: var(--fs-body); margin-top: 12px; } .link-blue.inline { display: inline; margin: 0; } /* โ”€โ”€ badge: mandatory on every mock screen / report card โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .badge-sample { display: inline-block; font-size: var(--fs-micro); font-weight: 700; color: var(--navy); background: color-mix(in srgb, var(--sand) 88%, var(--white)); border-radius: var(--r-sm); padding: 4px 10px; margin-bottom: 8px; } .badge-inline { position: static; display: inline-block; margin-bottom: 6px; } .mock { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-card); } /* โ”€โ”€ phone mockups โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ The embedded screens are a fixed 390 ร— 844 design. The frame must SCALE that design down to whatever width it is given, never crop it, so the page never scrolls sideways at 320 px. tan(atan2(len, len)) casts a length ratio into the unitless number transform: scale() needs; the @supports guard leaves older engines on the previous (unscaled) behaviour. */ .mock-wrap { max-width: 390px; margin: 16px auto; container-type: inline-size; } .mock-wrap.sm { max-width: 320px; } .phone-frame { width: 100%; max-width: 390px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-float); position: relative; background: var(--white); aspect-ratio: 390 / 844; } .phone-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } @supports (container-type: inline-size) and (transform: scale(tan(atan2(1px, 2px)))) { .phone-frame iframe { width: 390px; height: 844px; max-width: none; /* beats the global img,iframe cap */ transform-origin: top left; transform: scale(tan(atan2(100cqw, 390px))); } } /* โ”€โ”€ scene card (S2) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .scene { background: color-mix(in srgb, var(--sand) 60%, var(--white)); border-radius: var(--r-lg); padding: 22px 20px; } .scene .stake { font-weight: 700; } /* โ”€โ”€ steps (S3) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .steps { display: grid; gap: 14px; } .step-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 16px; display: flex; gap: 14px; } .step-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-blue); color: var(--blue); font-weight: 700; display: flex; align-items: center; justify-content: center; } /* โ”€โ”€ tiers (S4) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .tier-nav { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; position: sticky; top: 0; background: var(--app-bg); z-index: 3; scrollbar-width: none; } .tier-nav::-webkit-scrollbar { display: none; } .tier-chip { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--navy); background: var(--white); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-card); text-decoration: none; } .tier { padding: 22px 0; border-top: 1px solid var(--gray-200); } .tier-chip-label { display: inline-block; background: var(--tint-blue); color: var(--blue); font-weight: 700; font-size: var(--fs-small); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; } .carousel { display: flex; gap: 14px; overflow-x: auto; padding: 6px 0 14px; scroll-snap-type: x mandatory; } .exhibit { flex: 0 0 84%; scroll-snap-align: start; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 14px; position: relative; } .exhibit .who { color: var(--gray-700); font-size: var(--fs-small); margin-bottom: 8px; } .bubble { background: var(--tint-blue); color: var(--navy); border-radius: var(--r-md); padding: 10px 14px; font-weight: 600; font-size: var(--fs-body); margin-bottom: 12px; display: inline-block; } .report-card { border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; position: relative; } .report-card .type-chip { font-size: var(--fs-micro); font-weight: 700; color: var(--blue); background: var(--tint-blue); border-radius: 999px; padding: 2px 8px; display: inline-block; margin-bottom: 8px; } .report-card .cap { margin: 0 0 6px; } .report-card .figure { font-size: var(--fs-h3); font-weight: 700; color: var(--navy); } .report-card .up { color: var(--teal); } .bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin: 8px 0; } .bars i { flex: 1; background: var(--blue); border-radius: 4px 4px 0 0; display: block; } .bars i.alt { background: var(--sky); } .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--gray-100); border-radius: 999px; padding: 6px 12px; font-size: var(--fs-small); font-weight: 600; color: var(--navy); white-space: normal; text-align: left; height: auto; } .next-step { font-size: var(--fs-small); color: var(--gray-700); margin-top: 10px; } /* status cards (tier 3) */ .status-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 12px; display: flex; gap: 12px; } .status-mascot { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; overflow: hidden; } .status-mascot img { width: 40px; height: 40px; } .status-mascot.placeholder { border: 1px dashed var(--gray-400); color: var(--gray-400); font-size: var(--fs-micro); line-height: 1.2; text-align: center; } /* Status marker. Orange = not proven yet, teal = works today. A named integration we cannot yet substantiate must carry one (CLAUDE.md ยง3). */ .status-chip { display: inline-block; font-size: var(--fs-small); font-weight: 700; color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, var(--white)); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; } .status-chip.ready { color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--white)); } .tier-chip-label + .status-chip { margin-left: 6px; } .tier-closer { background: var(--navy); color: var(--white); border-radius: var(--r-lg); padding: 18px; font-weight: 700; text-align: center; margin-top: 14px; } /* partner tier */ .partner-note { background: color-mix(in srgb, var(--sand) 70%, var(--white)); border-radius: var(--r-lg); padding: 16px; font-size: var(--fs-small); margin-top: 14px; } /* mid CTA */ .cta-band { background: var(--tint-blue); border-radius: var(--r-lg); padding: 24px 20px; text-align: center; margin-top: 20px; } /* grids */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tile { background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 14px 12px; text-align: center; font-weight: 600; font-size: var(--fs-body); } .tile .status-chip { display: block; margin: 6px auto 0; width: fit-content; } /* dashboards section */ .role-list div { display: flex; gap: 8px; font-size: var(--fs-body); padding: 4px 0; } .role-list b { flex: none; min-width: 90px; color: var(--navy); } /* โ”€โ”€ AI boundary card (S8) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Light card, three numbered steps, one clearly marked boundary line. Replaces the old dark navy band with low-contrast grey pills. */ .ai-band { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 22px 16px; } .ai-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .ai-step { display: flex; gap: 12px; background: var(--tint-blue); border-radius: var(--r-md); padding: 14px; } .ai-step.inside { background: color-mix(in srgb, var(--teal) 10%, var(--white)); } .ai-step b { display: block; } .ai-step p { margin: 4px 0 0; } .ai-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 700; font-size: var(--fs-small); display: flex; align-items: center; justify-content: center; } .ai-step.inside .ai-num { background: var(--teal); } .ai-boundary { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--fs-small); font-weight: 700; color: var(--teal); text-align: center; } .ai-boundary::before, .ai-boundary::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--teal) 45%, var(--white)); } .ai-band .note { margin: 16px 0 0; } /* accountant / it tint cards */ .tint-card { background: color-mix(in srgb, var(--sky) 30%, var(--white)); border-radius: var(--r-lg); padding: 18px; } .check-list div { display: flex; gap: 8px; padding: 4px 0; font-size: var(--fs-body); } .check-list b { color: var(--teal); flex: none; } /* faq */ details.faq { background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 4px 16px; margin-bottom: 10px; } details.faq summary { padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; float: right; color: var(--blue); font-weight: 700; } details.faq[open] summary::after { content: "\2212"; } details.faq p { color: var(--gray-700); padding-bottom: 14px; margin: 0; } /* โ”€โ”€ final cta (S14) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .final-band { background: color-mix(in srgb, var(--sky) 35%, var(--white)); border-radius: var(--r-xl); padding: 24px 18px; text-align: center; } .mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .mini-card { background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 10px 8px; text-align: left; } .mini-card .mt { font-size: var(--fs-small); font-weight: 700; color: var(--navy); line-height: 1.3; } .mini-card svg { display: block; width: 100%; height: auto; margin-top: 6px; } .mini-legend { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 6px; font-size: var(--fs-micro); color: var(--gray-700); } .mini-legend i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; } .mini-legend .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .final-band .link-blue { justify-content: center; display: flex; } /* footer */ footer.site { background: var(--navy); color: var(--white); padding: 30px 0 24px; margin-top: 20px; } footer.site .fmascot { width: 56px; height: 56px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } footer.site .fmascot img { width: 40px; } /* Footer logo lockup: mark, then เธ‰เธฑเธšเน„เธง, then ChubWai.com underneath. Thai always leads (CLAUDE.md ยง3 "How to write the brand name"). The old `เธ‰เธฑเธšเน„เธง | ChubWai` pipe form is retired by that rule. */ footer.site .name { font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; } footer.site .latin { font-weight: 700; font-size: var(--fs-lead); line-height: 1.2; color: color-mix(in srgb, var(--white) 88%, var(--navy)); } footer.site .tag { font-size: var(--fs-small); color: color-mix(in srgb, var(--white) 78%, var(--navy)); margin: 12px 0 18px; } footer.site .contact { font-size: var(--fs-body); margin-bottom: 6px; } footer.site .contact a { text-decoration: underline; } footer.site .legal-note { font-size: var(--fs-micro); color: color-mix(in srgb, var(--white) 60%, var(--navy)); line-height: 1.6; margin-top: 14px; } /* sticky mobile CTA โ€” one full-width เธ›เธฃเธถเธเธฉเธฒเธŸเธฃเธต button linking to the LINE Official Account (owner decision 2026-09-22), nothing else */ .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--white); box-shadow: 0 -4px 16px rgba(15,39,71,0.10); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; transform: translateY(120%); transition: transform .2s ease; } .sticky-bar.show { transform: translateY(0); } /* lang switch */ .lang-switch { position: fixed; top: 14px; right: 14px; z-index: 21; display: flex; background: var(--white); border-radius: 999px; box-shadow: var(--shadow-card); overflow: hidden; font-size: var(--fs-small); font-weight: 700; } .lang-switch a { padding: 6px 12px; text-decoration: none; color: var(--gray-400); } .lang-switch a.active { color: var(--white); background: var(--blue); } @media (min-width: 640px) { .exhibit { flex-basis: 46%; } } @media (prefers-reduced-motion: reduce) { .sticky-bar { transition: none; } } /* โ”€โ”€ Brand mark โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ The mascot before every mention of เธ‰เธฑเธšเน„เธง (CLAUDE.md ยง3, PO 2026-09-20). .bwn keeps the mark and the word together: without it a line break can land between them and the cat is orphaned onto the next line, which is what happened the first time this shipped. The mark is sized in em so it scales with whatever text it sits in, and deliberately carries no font-size of its own, so the one-type-scale rule at the top of this file still holds. currentColor makes it navy in prose and white on a navy panel with no second asset. */ .bwn { white-space: nowrap; } .bw { display: inline-block; width: 1.18em; height: 1.09em; vertical-align: -0.14em; margin-inline-end: 0.16em; fill: currentColor; } /* โ”€โ”€ LINE Official Account card (final CTA) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ The only place with a QR code (owner decision 2026-09-22: contact is the LINE OA or the booth, no form). The QR is inline SVG so it stays sharp at any size and takes its colours from tokens: navy on white, quiet zone included in the drawing (4 modules). Do not recolour: keep the contrast. */ .line-card { display: grid; justify-items: center; gap: 12px; margin: 18px 0 6px; padding: 22px 18px; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .line-card .line-title { margin: 0; } .line-qr { width: min(100%, 232px); aspect-ratio: 1; } .line-qr .qr { display: block; width: 100%; height: 100%; } .qr-bg { fill: var(--white); } .qr-fg { stroke: var(--navy); fill: none; } .line-id { margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--navy); } .line-card .small { margin: 0; }