/* generated by tools/guides.mjs from src/styles/tokens.css + landing.css: edit those (or the generator), then re-run it */ /* LINE Seed Sans TH (LY Corporation, SIL OFL 1.1, licence in /fonts): OneShot's typeface, for Thai and English */ @font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_A_Rg.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_A_Bd.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_A_XBd.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "LINE Seed Sans TH"; src: url("/fonts/LINESeedSansTH_A_He.woff2") format("woff2"); font-weight: 900; font-display: swap; } /* Mali (headings) and IBM Plex Mono (numbers), self-hosted from Google Fonts (OFL): latin, latin-ext and thai only */ @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mali"; src: url("/fonts/Mali-600-thai.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Mali"; src: url("/fonts/Mali-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mali"; src: url("/fonts/Mali-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mali"; src: url("/fonts/Mali-700-thai.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Mali"; src: url("/fonts/Mali-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mali"; src: url("/fonts/Mali-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Giggles Maps tokens. Direction: a bright blue sky with fluffy clouds (day), a moonlit night sky (dark). Sky blue for structure and actions, sunshine gold for coins and partners, stamp red for badges. Theme: , set before first paint by the inline script in app/index.html and kept in sync by lib/theme.ts (Settings > Appearance: Auto follows the phone). Pages without the script (landing, shop) stay light. */ :root { --paper: #eef6ff; /* page background: the haze at the bottom of the sky */ --card: #ffffff; --ink: #0e2440; --ink-2: #4b6283; --line: #d4e4f5; --brand: #0864c0; /* sky blue that reads on white (5.8:1) and on --brand-soft chips (5.0:1) */ --brand-soft: #e0efff; --brand-edge: #0656a6; /* chunky buttons' pressed-in bottom edge */ --on-brand: #ffffff; --marigold: #ffb400; /* the sun */ --marigold-soft: #fff4d1; --gold-ink: #835b00; /* gold text on light backgrounds */ --tier2-ink: #4f5a70; /* silver and bronze stop tiers, as text */ --focus: #0656a6; /* keyboard focus ring: 7:1 on white, clear on gold buttons too */ --tier1-ink: #8a5428; --stamp: #dd4b36; --good: #128552; --good-soft: #e2f5ea; --sky: #0b8bd3; --grape: #7448d6; --grape-soft: #f1eaff; --grape-ink: #5a2fb2; --bad: #c0281f; --shadow: 0 1px 2px rgb(14 36 64 / 0.06), 0 6px 20px rgb(14 60 110 / 0.09); /* the sky itself: page tops, heroes, the splash */ --sky-top: #5db7ff; --sky-mid: #a9dbff; --cloud: #ffffff; --cloud-shade: #dcefff; --sky-art: url(/sky-day.svg); color-scheme: light; --font-display: "Mali", "LINE Seed Sans TH", system-ui, sans-serif; --font-body: "LINE Seed Sans TH", "Noto Sans Thai", system-ui, sans-serif; --font-data: "LINE Seed Sans TH", "Noto Sans Thai", system-ui, sans-serif; /* numbers: the friendly face, tabular (.num) */ --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* codes and the passport's printed fields */ --radius: 14px; /* type scale: 8 levels, 3 weights (400/700/800). Thai needs room for stacked vowels and tone marks: nothing under 1.25 line height except the big celebration numbers */ --fs-hero: 40px; --lh-hero: 1.15; /* celebration numbers (level burst, chest, fortune) */ --fs-display: 28px; --lh-display: 1.25; /* page titles, profile name, big stats */ --fs-title: 22px; --lh-title: 1.3; /* modal and sheet titles, card hero names */ --fs-headline: 18px; --lh-headline: 1.35; /* section headings, place names */ --fs-body: 16px; --lh-body: 1.55; /* paragraphs, inputs, names in rows */ --fs-label: 14px; --lh-label: 1.4; /* buttons, chips, tabs, counts */ --fs-caption: 13px; --lh-caption: 1.45; /* .fine, meta, help text */ --fs-micro: 11px; --lh-micro: 1.3; /* .eyebrow, rarity and tier tags: uppercase, tracked, never sentences */ } :root[data-theme="dark"] { --paper: #081330; /* night sky */ --card: #111e40; --ink: #e8f1ff; --ink-2: #9db1d4; --line: #22365f; --brand: #6cb8ff; --brand-soft: #15305c; --brand-edge: #2b67ad; --on-brand: #04122b; --marigold: #ffc94a; /* the moon */ --marigold-soft: #352a0d; --gold-ink: #ffd877; --tier2-ink: #b9c3d8; --focus: #ffd877; --tier1-ink: #e3a877; --stamp: #ff806b; --good: #5fd39b; --good-soft: #10342a; --sky: #7cc8ff; --grape: #b99bff; --grape-soft: #251d4d; --grape-ink: #d6c5ff; --bad: #ff8a80; --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35); --sky-top: #142a63; --sky-mid: #0d1d47; --cloud: #2a3f72; --cloud-shade: #1c2f5c; --sky-art: url(/sky-night.svg); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 800; } h2 { font: 800 var(--fs-title)/var(--lh-title) var(--font-body); } h3 { font: 700 var(--fs-headline)/var(--lh-headline) var(--font-body); } p { margin: 0; } a { color: var(--brand); text-underline-offset: 3px; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; } ::placeholder { color: var(--ink-2); opacity: .9; } .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 20px; font: 700 var(--fs-label)/var(--lh-label) var(--font-body); background: var(--brand); color: var(--on-brand); text-decoration: none; transition: transform .12s ease, filter .12s ease; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); } .btn.gold { background: var(--marigold); color: #241a00; } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; } .chip.partner { background: var(--marigold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--marigold); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* landing scale: tokens' app scale, plus two sizes for marketing headlines */ :root { --fs-land-hero: clamp(38px, 6vw, 62px); --fs-land-h2: clamp(28px, 4.2vw, 42px); --fs-land-h3: clamp(24px, 3.2vw, 34px); } .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } .fine { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); } .lede { font-size: var(--fs-headline); line-height: var(--lh-headline); color: var(--ink-2); max-width: 34ch; } /* the page opens under the sky: clouds on blue, fading into the page haze */ body { background: url(/sky-day.svg) top center / max(100%, 1240px) auto no-repeat, linear-gradient(180deg, #4fb0ff 0, #a9dbff 520px, var(--paper) 900px) no-repeat, var(--paper); } main { display: grid; gap: clamp(72px, 10vw, 120px); padding-bottom: 72px; overflow-x: clip; } main h2 { font: 700 var(--fs-land-h2)/1.2 var(--font-display); text-align: center; } /* nav: sticky; compact (smaller, shadow, gold CTA) once the hero is gone */ .nav { position: sticky; top: 0; z-index: 10; background: transparent; transition: box-shadow .2s ease, background .2s ease; } .nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 16px; transition: padding .2s ease; } .nav nav { display: flex; gap: 18px; align-items: center; } .nav-link { color: var(--ink); font-weight: 700; font-size: var(--fs-label); text-decoration: none; white-space: nowrap; } .nav.compact { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgb(22 27 61 / .06); } .nav.compact .nav-row { padding-block: 8px; } .nav.compact .btn { background: var(--marigold); color: #241a00; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand span { color: #0656a6; } .brand img { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgb(10 80 160 / .25)); } .btn { white-space: nowrap; } .btn.small { padding: 8px 16px; } .btn.big { padding: 15px 28px; font-size: var(--fs-body); } /* phone frame around a 390×844 screenshot */ .phone { margin: 0; width: min(100%, 300px); aspect-ratio: 390 / 844; border-radius: 40px; padding: 9px; background: #0e2440; box-shadow: 0 24px 60px rgb(10 60 120 / .28), inset 0 0 0 2px #24406b; justify-self: center; } .phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; background: var(--card); } .hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding-top: 24px; } .hero h1 { font: 700 var(--fs-land-hero)/1.12 var(--font-display); text-wrap: wrap; } .hero h1 em { font-style: normal; color: #0656a6; display: block; } .hero .lede { margin-top: 18px; color: var(--ink); } .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; } .text-link { font-weight: 700; color: var(--brand); text-decoration: none; } .text-link:hover { text-decoration: underline; } .hero-phone { width: min(100%, 320px); transform: rotate(2deg); } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; text-align: center; gap: 36px; } .hero .lede { margin-inline: auto; } .cta { justify-content: center; } .hero-phone { transform: none; width: min(78%, 300px); } } .proof { list-style: none; margin-block: calc(clamp(72px, 10vw, 120px) * -0.5) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; padding-block: 22px; border-block: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-body); } .proof b { color: var(--ink); font-size: var(--fs-title); margin-right: 4px; } .step-list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .step-list li { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 26px 20px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); } .step-n { font: 600 var(--fs-headline) var(--font-data); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); } .step-list h3 { font-size: var(--fs-title); line-height: var(--lh-title); } .step-list p { color: var(--ink-2); } /* Collect Thailand: alternating copy / screenshot blocks */ .collect { display: grid; gap: clamp(56px, 8vw, 96px); } .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .feature:nth-of-type(even) .feature-copy { order: 2; } .feature-copy { display: grid; gap: 12px; max-width: 26em; justify-self: center; } .feature h3 { font: 700 var(--fs-land-h3)/1.2 var(--font-display); } .feature p { font-size: var(--fs-headline); line-height: var(--lh-headline); color: var(--ink-2); } .feature .phone { width: min(100%, 270px); } .c-indigo { color: var(--brand); } .c-marigold { color: var(--gold-ink); } .c-good { color: var(--good); } .c-stamp { color: var(--stamp); } @media (max-width: 720px) { .feature { grid-template-columns: 1fr; gap: 24px; text-align: center; } .feature:nth-of-type(even) .feature-copy { order: 0; } .feature .phone { width: min(72%, 260px); } } .plans { display: grid; gap: 20px; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; } .plan { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 10px; align-content: start; } .plan h3 { font-size: var(--fs-title); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .plan .price { font: 600 var(--fs-display)/1.2 var(--font-data); color: var(--brand); } .plan .price small { font: 400 var(--fs-label) var(--font-body); color: var(--ink-2); } .plan ul { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 4px; } .plan.best { border: 2px solid var(--marigold); box-shadow: 0 0 0 4px var(--marigold-soft); } .plan.best .chip { background: var(--marigold); color: #241a00; } .plans > .fine { text-align: center; } .shops { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; color: #fff; background: url(/sky-day.svg) center 120% / 140% auto no-repeat, linear-gradient(160deg, #2f9bff, #0a62c4); border-radius: 28px; padding: 40px clamp(24px, 5vw, 56px); } .shops h2 { text-align: left; color: #fff; } .shops p { margin-top: 8px; color: rgb(255 255 255 / .85); max-width: 46ch; font-size: var(--fs-headline); line-height: var(--lh-headline); } .shops .btn { background: #fff; color: var(--brand); } .faq { display: grid; gap: 12px; max-width: 760px; } .faq h2 { margin-bottom: 12px; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; } .faq summary { cursor: pointer; font-weight: 700; padding-block: 18px; list-style-position: outside; } .faq details p { padding-bottom: 18px; color: var(--ink-2); } .final { display: grid; justify-items: center; gap: 24px; text-align: center; } .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 28px; border-top: 1px solid var(--line); } @media (max-width: 420px) { .nav-row { padding-inline: 14px; gap: 8px; } .nav nav { gap: 12px; } .brand { font-size: 20px; gap: 6px; } .brand img { width: 32px; height: 32px; } .nav .nav-link { display: none; } /* "I run a shop" sits under the headline */ .nav .btn.small { padding: 8px 12px; } } .hero .text-link { color: #063f7a; } /* on the sky: 3:1+ needs the deeper blue */ /* province guides (tools/guides.mjs) */ .guide { gap: clamp(40px, 6vw, 64px); } .g-hero { display: grid; gap: 12px; padding-top: 16px; } .g-hero h1 { font: 700 var(--fs-land-h2)/1.2 var(--font-display); } .g-hero .lede { max-width: 46ch; color: var(--ink); } .g-hero .lede.g-th { color: var(--ink-2); font-size: var(--fs-body); } .g-hero .cta { margin-top: 8px; } .g-sub { display: block; font: 700 var(--fs-headline)/1.4 var(--font-body); color: var(--ink-2); margin-top: 2px; } main.guide h2 { text-align: left; font-size: var(--fs-land-h3); } .g-sec { display: grid; gap: 18px; } .g-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .g-card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; display: grid; align-content: start; } .g-card a { color: inherit; text-decoration: none; display: grid; } .g-card img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--brand-soft); } .g-body { display: grid; gap: 4px; padding: 14px 16px 16px; justify-items: start; } .g-body b { font: 700 var(--fs-headline)/var(--lh-headline) var(--font-body); } .g-th { color: var(--ink-2); } .chip.icon { background: var(--marigold); color: #241a00; } .g-credit { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-2); padding: 0 16px 12px; overflow-wrap: anywhere; } .g-route { margin: 0; padding: 18px 20px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-weight: 700; } .g-route li { display: inline-flex; align-items: center; gap: 10px; } .g-route li + li::before { content: "→"; color: var(--ink-2); } .g-route a { text-decoration: none; } .g-sec > .btn { justify-self: start; } .g-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .g-index a { display: grid; gap: 2px; padding: 14px 16px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; } .g-index a:hover b { color: var(--brand); } .g-index span { color: var(--ink-2); } @media (max-width: 420px) { .nav .nav-link { display: none; } .g-grid { grid-template-columns: 1fr; } }