/* ============================================================ FORMATIX CREATIONS — core stylesheet ทิศทาง: โมเดิร์น มินิมอล สีเรียบเกือบขาวดำ เส้นบาง — glitch (แยกสี cyan/orchid) เป็นลายเซ็นของแบรนด์ และ Liquid Glass (glass.css) ใช้เฉพาะชั้นที่ลอยอยู่เหนือเนื้อหา ไม่ใช่ทั้งหน้า ธีม: (ไม่มี = ตามอุปกรณ์) · data-accent · data-text data-glass="off" = ดีไซน์คลาสสิก (หัวข้อ 15) · ไม่มี = Liquid Glass (glass.css) ความใสตาม --lg-c ============================================================ */ /* ---------- 1. tokens ---------- */ :root { color-scheme: light; --bg: #f7f7f8; --bg-soft: #f0f0f3; --surface: #ffffff; --surface-2: #f3f3f6; --surface-3: #e8e8ee; --line: rgba(12, 12, 24, .08); --line-strong: rgba(12, 12, 24, .15); --ink: #0c0c12; --mute: #585b68; --dim: #8b8d99; --brand-cyan: #12dedc; --brand-azure: #1b8fe8; --brand-violet: #7b21f2; --brand-orchid: #a93bff; --accent-base: #6236ee; --accent: var(--accent-base); --accent-soft: rgba(98, 54, 238, .1); --accent-ring: rgba(98, 54, 238, .24); --cyan: #0b93a6; --star: #f4a50c; --danger: #dc3a55; --ok: #11906a; --on-accent: #ffffff; --grad: linear-gradient(115deg, #13c8dc 0%, #2b8cf0 42%, #6a3bf0 78%, #a147ff 100%); --nav-bg: rgba(255, 255, 255, .72); --nav-bg-stuck: rgba(255, 255, 255, .86); --glass: rgba(255, 255, 255, .74); --scrim: rgba(12, 15, 26, .38); --ph-bg: linear-gradient(135deg, #dff7f9 0%, #e6ecff 50%, #efe4ff 100%); --ph-mark: .5; --toast-bg: #151a28; --toast-ink: #f2f4fa; --shadow-sm: 0 1px 2px rgba(12, 12, 24, .04); --shadow-md: 0 16px 36px -20px rgba(12, 12, 24, .24), 0 1px 3px rgba(12, 12, 24, .04); --shadow-lg: 0 30px 70px -34px rgba(12, 12, 24, .38), 0 3px 10px rgba(12, 12, 24, .05); --r-2xl: 28px; --r-xl: 22px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px; /* ลายเซ็น glitch: สองสีที่แยกออกจากตัวอักษร/ภาพตอนสัญญาณสะดุด */ --gl-a: #12dedc; --gl-b: #b43dff; --grid-dot: rgba(12, 12, 24, .07); /* Liquid Glass (glass.css) — ความใสของเนื้อกระจกปรับได้จากหน้าการตั้งค่า: --lg-c = ความโปร่งใส 0 (ฝ้าทึบ) … 1 (ใสแจ๋ว) — theme-boot.js/account.js ตั้งไว้ที่ สีเนื้อกระจก = --lg-tint (r g b) · ความทึบ = a0 + a1 × ความฝ้า · แผ่นที่ต้องอ่านเยอะใช้ s0/s1 (ทึบกว่า) ขอบรับแสงเป็นสีขาวกลาง ๆ สว่างที่มุมบนซ้าย-ล่างขวาแบบ iOS ไม่แยกสีรุ้ง */ --lg-c: .6; --lg-f: calc(1 - var(--lg-c)); --lg-tint: 255 255 255; --lg-a0: .1; --lg-a1: .62; --lg-s0: .56; --lg-s1: .38; --lg-bg: rgb(var(--lg-tint) / calc(var(--lg-a0) + var(--lg-a1) * var(--lg-f))); --lg-bg-strong: rgb(var(--lg-tint) / calc(var(--lg-s0) + var(--lg-s1) * var(--lg-f))); --lg-blur: blur(calc(2px + 18px * var(--lg-f))) saturate(190%) brightness(1.05); --lg-hi: rgba(255, 255, 255, .98); --lg-lo: rgba(255, 255, 255, .5); --lg-edge: rgba(20, 20, 44, .1); --lg-inner: rgba(255, 255, 255, .6); --lg-gloss: rgba(255, 255, 255, .75); --lg-spec: rgba(255, 255, 255, .85); --lg-shadow: 0 12px 32px -14px rgba(24, 22, 60, .28), 0 3px 8px -4px rgba(24, 22, 60, .12); --orb-op: .95; --atmos-a: rgba(18, 222, 220, .24); --atmos-b: rgba(180, 61, 255, .2); --pill: 999px; --nav-h: 60px; --nav-space: 84px; --tab-h: 66px; --shell: 1280px; --gutter: clamp(16px, 4vw, 40px); --ease: cubic-bezier(.22, .68, .3, 1); --spring: cubic-bezier(.34, 1.4, .64, 1); --font-display: "Anuphan", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; --font-body: "IBM Plex Sans Thai", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-brand: "Chakra Petch", var(--font-display); --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --splash-bg: radial-gradient(70% 70% at 50% 42%, #ffffff 0%, #eef1f8 78%); --splash-blend: multiply; } @supports (color: color-mix(in srgb, red 50%, blue)) { :root { --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 26%, transparent); } } /* สีเน้นที่ผู้ใช้เลือกได้ */ :root[data-accent="blue"] { --accent-base: #1d6ee0; } :root[data-accent="teal"] { --accent-base: #0a8a80; } :root[data-accent="rose"] { --accent-base: #d3336d; } :root[data-accent="amber"] { --accent-base: #c26400; } /* โหมดมืด — เลือกเอง หรือ ตามอุปกรณ์ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #09090c; --bg-soft: #0e0e12; --surface: #111116; --surface-2: #17171d; --surface-3: #212129; --line: rgba(255, 255, 255, .07); --line-strong: rgba(255, 255, 255, .13); --ink: #f2f2f5; --mute: #a2a4b0; --dim: #6e707c; --accent: #a68bff; --cyan: #45d6e4; --nav-bg: rgba(20, 20, 26, .6); --nav-bg-stuck: rgba(17, 17, 22, .82); --glass: rgba(20, 20, 26, .72); --scrim: rgba(0, 0, 0, .55); --ph-bg: linear-gradient(135deg, #102a30 0%, #151c36 50%, #1f1536 100%); --ph-mark: .4; --toast-bg: #f2f2f5; --toast-ink: #0c0c12; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 16px 36px -20px rgba(0, 0, 0, .7); --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, .85); --splash-bg: radial-gradient(70% 70% at 50% 42%, #14141b 0%, #08080b 78%); --splash-blend: screen; --grid-dot: rgba(255, 255, 255, .06); --lg-tint: 34 34 44; --lg-a0: .08; --lg-a1: .58; --lg-s0: .5; --lg-s1: .4; --lg-hi: rgba(255, 255, 255, .5); --lg-lo: rgba(255, 255, 255, .16); --lg-edge: rgba(255, 255, 255, .08); --lg-inner: rgba(255, 255, 255, .07); --lg-gloss: rgba(255, 255, 255, .16); --lg-spec: rgba(255, 255, 255, .16); --lg-shadow: 0 16px 40px -18px rgba(0, 0, 0, .75), 0 4px 12px -6px rgba(0, 0, 0, .4); --orb-op: .6; --lg-blur: blur(calc(2px + 18px * var(--lg-f))) saturate(170%) brightness(1.03); --atmos-a: rgba(18, 222, 220, .09); --atmos-b: rgba(180, 61, 255, .08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #09090c; --bg-soft: #0e0e12; --surface: #111116; --surface-2: #17171d; --surface-3: #212129; --line: rgba(255, 255, 255, .07); --line-strong: rgba(255, 255, 255, .13); --ink: #f2f2f5; --mute: #a2a4b0; --dim: #6e707c; --accent: #a68bff; --cyan: #45d6e4; --nav-bg: rgba(20, 20, 26, .6); --nav-bg-stuck: rgba(17, 17, 22, .82); --glass: rgba(20, 20, 26, .72); --scrim: rgba(0, 0, 0, .55); --ph-bg: linear-gradient(135deg, #102a30 0%, #151c36 50%, #1f1536 100%); --ph-mark: .4; --toast-bg: #f2f2f5; --toast-ink: #0c0c12; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 16px 36px -20px rgba(0, 0, 0, .7); --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, .85); --splash-bg: radial-gradient(70% 70% at 50% 42%, #14141b 0%, #08080b 78%); --splash-blend: screen; --grid-dot: rgba(255, 255, 255, .06); --lg-tint: 34 34 44; --lg-a0: .08; --lg-a1: .58; --lg-s0: .5; --lg-s1: .4; --lg-hi: rgba(255, 255, 255, .5); --lg-lo: rgba(255, 255, 255, .16); --lg-edge: rgba(255, 255, 255, .08); --lg-inner: rgba(255, 255, 255, .07); --lg-gloss: rgba(255, 255, 255, .16); --lg-spec: rgba(255, 255, 255, .16); --lg-shadow: 0 16px 40px -18px rgba(0, 0, 0, .75), 0 4px 12px -6px rgba(0, 0, 0, .4); --orb-op: .6; --lg-blur: blur(calc(2px + 18px * var(--lg-f))) saturate(170%) brightness(1.03); --atmos-a: rgba(18, 222, 220, .09); --atmos-b: rgba(180, 61, 255, .08); } } @supports (color: color-mix(in srgb, red 50%, blue)) { :root[data-theme="dark"] { --accent: color-mix(in srgb, var(--accent-base) 58%, #fff); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: color-mix(in srgb, var(--accent-base) 58%, #fff); } } } /* ธีม Soul of Purple — "ห้วงลึก": ไม่ใช่ม่วงทั้งหน้า และไม่ใช่ภาพอวกาศตรง ๆ พื้นเป็นน้ำเงินอมม่วงเกือบดำแบบฟ้ากลางคืน แล้วให้บรรยากาศเล่าเรื่องแทน — หมอกเนบิวลาชมพู/คราม ม่านแสงเหนือเขียวฟ้า ฝุ่นดาวจาง ๆ และวงแสงอุ่นแบบขอบหลุมดำที่มุมจอ (ชั้น .cosmo ใน index.html) · สีเน้นเป็นลาเวนเดอร์ประกายชมพู (ต้องอยู่หลังบล็อกโหมดมืด — ตัวเลือกความเจาะจงเท่ากับ :root:not([data-theme="light"]) ตัวที่มาทีหลังชนะ) */ :root[data-theme="purple"] { color-scheme: dark; --bg: #07070f; --bg-soft: #0b0a16; --surface: #100f1d; --surface-2: #171527; --surface-3: #221f36; --line: rgba(196, 190, 255, .075); --line-strong: rgba(196, 190, 255, .15); --ink: #f0eefb; --mute: #a9a5c6; --dim: #726e93; --accent: #c4aaff; --cyan: #62e8d2; --star: #ffc56b; --gl-a: #52f0cf; --gl-b: #ff7ad1; --grad: linear-gradient(115deg, #3fe3c3 0%, #5b8dff 36%, #9a63ff 66%, #ff7fc6 100%); --nav-bg: rgba(16, 15, 29, .6); --nav-bg-stuck: rgba(14, 13, 26, .82); --glass: rgba(16, 15, 29, .72); --scrim: rgba(3, 3, 10, .62); --ph-bg: radial-gradient(80% 90% at 80% 10%, #3a1d52 0%, transparent 60%), radial-gradient(70% 80% at 10% 100%, #0f3a44 0%, transparent 60%), #0c0b18; --ph-mark: .42; --toast-bg: #f0eefb; --toast-ink: #0b0a16; --shadow-sm: 0 1px 2px rgba(0, 0, 6, .5); --shadow-md: 0 16px 36px -20px rgba(0, 0, 8, .85), 0 0 0 1px rgba(160, 140, 255, .03); --shadow-lg: 0 34px 80px -30px rgba(0, 0, 8, .95); --splash-bg: radial-gradient(60% 50% at 70% 30%, rgba(122, 60, 190, .22), transparent 70%), radial-gradient(50% 50% at 25% 75%, rgba(40, 170, 170, .14), transparent 70%), radial-gradient(80% 80% at 50% 45%, #0e0c1c 0%, #05050b 80%); --splash-blend: screen; --grid-dot: rgba(214, 205, 255, .06); --lg-tint: 22 20 42; --lg-a0: .08; --lg-a1: .58; --lg-s0: .5; --lg-s1: .4; --lg-hi: rgba(236, 230, 255, .55); --lg-lo: rgba(200, 225, 255, .18); --lg-edge: rgba(210, 200, 255, .09); --lg-inner: rgba(190, 170, 255, .09); --lg-gloss: rgba(240, 236, 255, .17); --lg-spec: rgba(230, 220, 255, .18); --lg-shadow: 0 16px 40px -18px rgba(0, 0, 8, .85), 0 4px 12px -6px rgba(0, 0, 8, .5); --orb-op: .75; --lg-blur: blur(calc(2px + 18px * var(--lg-f))) saturate(185%) brightness(1.05); --atmos-a: rgba(82, 240, 207, .07); --atmos-b: rgba(255, 122, 209, .06); } @supports (color: color-mix(in srgb, red 50%, blue)) { :root[data-theme="purple"] { --accent: color-mix(in srgb, var(--accent-base) 40%, #eee2ff); } } /* ธีม Morning Mood — "ห้องที่แดดเช้าเพิ่งส่องเข้ามา": สายสีขาว แต่ขาวอุ่นแบบกระดาษ ไม่ใช่ขาวเย็นแบบหน้าจอ ไม่วาดดวงอาทิตย์ เมฆ หรือต้นไม้ — เล่าด้วยแสงอย่างเดียว: แสงพีช/แอปริคอตอุ่น ๆ ส่องจากมุมขวาบน ลำแสงเฉียงจาง ๆ แบบลอดมู่ลี่ และอากาศเช้าสีฟ้าซีดที่มุมซ้ายล่าง (ชั้น .dawn ใน index.html) ตัวอักษรเป็นสีหมึกอมน้ำตาลเทา · เส้น/เงาอมอุ่น · กระจกเป็นขาวนวล (ต้องกำหนด token ครบทุกตัวที่บล็อกโหมดมืดตั้งไว้ — เครื่องที่ตั้งโหมดมืดยังจับ :root:not([data-theme="light"]) อยู่) */ :root[data-theme="morning"] { color-scheme: light; --bg: #fdf6ec; --bg-soft: #f9efe2; --surface: #fffcf7; --surface-2: #faf1e5; --surface-3: #f0e3d2; --line: rgba(110, 70, 30, .1); --line-strong: rgba(110, 70, 30, .18); --ink: #221b1a; --mute: #6a5c56; --dim: #9e8e86; --accent: var(--accent-base); --cyan: #1f8fb0; --star: #f09a1a; --gl-a: #5ec4f2; --gl-b: #ff8f6b; --grad: linear-gradient(115deg, #7cc6f0 0%, #9aa8ff 34%, #f5a3b8 68%, #ffb56b 100%); --nav-bg: rgba(255, 253, 249, .72); --nav-bg-stuck: rgba(255, 253, 249, .88); --glass: rgba(255, 253, 249, .76); --scrim: rgba(40, 28, 18, .3); --ph-bg: radial-gradient(80% 90% at 85% 5%, #ffe1c7 0%, transparent 62%), radial-gradient(70% 80% at 5% 100%, #dcecf7 0%, transparent 62%), #fbf5ee; --ph-mark: .45; --toast-bg: #2a2224; --toast-ink: #fbf5ee; --shadow-sm: 0 1px 2px rgba(74, 48, 20, .05); --shadow-md: 0 16px 36px -20px rgba(92, 58, 24, .22), 0 1px 3px rgba(74, 48, 20, .04); --shadow-lg: 0 30px 70px -34px rgba(92, 58, 24, .34), 0 3px 10px rgba(74, 48, 20, .05); --splash-bg: radial-gradient(60% 55% at 78% 18%, rgba(255, 196, 150, .45), transparent 70%), radial-gradient(55% 55% at 18% 82%, rgba(170, 212, 240, .35), transparent 70%), radial-gradient(80% 80% at 50% 42%, #fffdf9 0%, #f6efe6 80%); --splash-blend: multiply; --grid-dot: rgba(170, 110, 50, .1); --lg-tint: 255 249 240; --lg-a0: .12; --lg-a1: .6; --lg-s0: .58; --lg-s1: .36; --lg-hi: rgba(255, 255, 255, .98); --lg-lo: rgba(255, 244, 230, .55); --lg-edge: rgba(90, 60, 30, .1); --lg-inner: rgba(255, 250, 242, .65); --lg-gloss: rgba(255, 252, 245, .78); --lg-spec: rgba(255, 246, 232, .9); --lg-shadow: 0 12px 32px -14px rgba(92, 58, 24, .26), 0 3px 8px -4px rgba(92, 58, 24, .1); --orb-op: .9; --lg-blur: blur(calc(2px + 18px * var(--lg-f))) saturate(170%) brightness(1.04); --atmos-a: rgba(255, 190, 140, .22); --atmos-b: rgba(150, 200, 240, .18); } @supports (color: color-mix(in srgb, red 50%, blue)) { /* สีเน้นที่ผู้ใช้เลือกเอง อุ่นขึ้นนิดหนึ่งเหมือนโดนแดดเช้า */ :root[data-theme="morning"] { --accent: color-mix(in srgb, var(--accent-base) 86%, #ff7a3d); } } /* ยังไม่ได้เลือกสีเน้น (ม่วงตั้งต้น) → ใช้สีแดดเช้าส้มอิฐแทน (ตัวอักษรขาวบนปุ่มยังอ่านได้ ≥ 4.5:1) */ :root[data-theme="morning"]:not([data-accent]) { --accent-base: #c24a26; --accent: #c24a26; } :root[data-text="large"] { zoom: 1.1; } :root[data-glass="off"] { --nav-bg: var(--surface); --nav-bg-stuck: var(--surface); --glass: var(--surface); --lg-bg: var(--surface); --lg-bg-strong: var(--surface); } :root[data-glass="off"] *, :root[data-glass="off"] *::before, :root[data-glass="off"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ---------- 2. reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.62; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked, body.has-layer { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--accent-ring); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 20px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); } /* ---------- 3. atmosphere ---------- */ .atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .atmos::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%); } .atmos::after { content: ""; position: absolute; inset: -10% -10% auto; height: 70vh; background: radial-gradient(30vw 22vw at 12% 0%, var(--atmos-a), transparent 70%), radial-gradient(34vw 24vw at 92% 4%, var(--atmos-b), transparent 70%); } .scanlines { display: none; } /* ---------- 4. splash / glitch ---------- */ .splash { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--splash-bg); transition: opacity .55s var(--ease), visibility .55s; } .splash.is-gone { opacity: 0; visibility: hidden; } .splash-inner { display: grid; justify-items: center; gap: 26px; text-align: center; padding: 24px; } .glitch-logo { position: relative; width: min(40vw, 200px); aspect-ratio: 1 / 1; filter: drop-shadow(0 18px 40px rgba(98, 54, 238, .22)) drop-shadow(0 6px 18px rgba(18, 200, 220, .18)); } .glitch-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .gl-base { animation: logo-in 1s var(--ease) both, logo-jitter 2.6s steps(1) infinite; } .gl-r { opacity: 0; mix-blend-mode: var(--splash-blend); filter: hue-rotate(-60deg) saturate(2); animation: shard-r 2.4s steps(1) infinite; } .gl-g { opacity: 0; mix-blend-mode: var(--splash-blend); filter: hue-rotate(70deg) saturate(1.8); animation: shard-g 2.4s steps(1) infinite; } @keyframes logo-in { 0% { opacity: 0; transform: scale(.86) rotate(-6deg); filter: blur(12px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1) rotate(0); } } @keyframes logo-jitter { 0%, 62%, 100% { transform: translate(0, 0); } 64% { transform: translate(-4px, 2px) skewX(3deg); } 66% { transform: translate(3px, -2px) skewX(-2deg); } 68% { transform: translate(0, 0); } 86% { transform: translate(2px, 1px); } 88% { transform: translate(0, 0); } } @keyframes shard-r { 0%, 100% { opacity: 0; } 10% { opacity: .75; transform: translate(-8px, 3px); clip-path: inset(8% 0 62% 0); } 12% { opacity: 0; } 40% { opacity: .7; transform: translate(6px, -4px); clip-path: inset(58% 0 14% 0); } 43% { opacity: 0; } 64% { opacity: .8; transform: translate(-10px, 0); clip-path: inset(30% 0 40% 0); } 67% { opacity: 0; } } @keyframes shard-g { 0%, 100% { opacity: 0; } 11% { opacity: .6; transform: translate(7px, -3px); clip-path: inset(20% 0 48% 0); } 14% { opacity: 0; } 41% { opacity: .65; transform: translate(-6px, 5px); clip-path: inset(66% 0 6% 0); } 44% { opacity: 0; } 65% { opacity: .7; transform: translate(10px, 2px); clip-path: inset(4% 0 74% 0); } 68% { opacity: 0; } } .splash-word { font-family: var(--font-brand); font-weight: 700; font-size: clamp(24px, 5.4vw, 40px); letter-spacing: .26em; text-indent: .26em; position: relative; color: var(--ink); } .splash-word::before, .splash-word::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 55% 0); } .splash-word::before { color: var(--brand-cyan); animation: word-a 2.2s steps(1) infinite; } .splash-word::after { color: var(--brand-orchid); clip-path: inset(55% 0 0 0); animation: word-b 2.2s steps(1) infinite; } @keyframes word-a { 0%,58%,100% { transform: translate(0); opacity: 0; } 60% { transform: translate(-5px); opacity: 1; } 63% { opacity: 0; } 84% { transform: translate(4px); opacity: 1; } 86% { opacity: 0; } } @keyframes word-b { 0%,58%,100% { transform: translate(0); opacity: 0; } 61% { transform: translate(6px); opacity: 1; } 64% { opacity: 0; } 85% { transform: translate(-4px); opacity: 1; } 87% { opacity: 0; } } .splash-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .46em; text-indent: .46em; color: var(--dim); } .splash-bar { width: min(56vw, 220px); height: 3px; background: var(--surface-3); border-radius: var(--pill); overflow: hidden; } .splash-bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: var(--pill); animation: bar-fill var(--splash-ms, 2600ms) linear forwards; } @keyframes bar-fill { to { width: 100%; } } .splash-skip { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); right: 28px; font-size: 14px; font-weight: 500; color: var(--mute); padding: 10px 22px; border-radius: var(--pill); background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: color .2s, background .2s; } .splash-skip:hover { color: var(--ink); background: var(--surface); } /* Cold Start — เซิร์ฟเวอร์ (Render แพ็กเกจฟรี) ตื่นช้า: app.js ใส่ .is-cold ให้หน้าเปิดเมื่อรอนานผิดปกติ ซ่อนแถบโหลดปกติกับปุ่มข้าม (ยังไม่มีอะไรให้ข้าม) แล้วโชว์กล่องอธิบาย + ตัวนับเวลาแทน */ .splash-cold { display: none; width: min(88vw, 400px); justify-items: center; gap: 10px; padding: 16px 18px 14px; text-align: center; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .splash.is-cold .splash-cold { display: grid; } .splash.is-cold .splash-bar, .splash.is-cold .splash-skip { display: none; } .cold-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); } .cold-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-cyan); animation: cold-blink 1.4s ease-in-out infinite; } .cold-text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--mute); } .cold-text b { color: var(--ink); font-weight: 600; } .cold-meter { width: 100%; height: 4px; background: var(--surface-3); border-radius: var(--pill); overflow: hidden; } .cold-meter i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: var(--pill); transition: width .5s linear; } .cold-meter.is-over i { animation: cold-blink 1.4s ease-in-out infinite; } .cold-time { font-family: var(--font-mono); font-size: 12px; color: var(--dim); } @keyframes cold-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ซ่อนจากสายตาแต่ให้โปรแกรมอ่านหน้าจอและบอตค้นหาอ่านได้ (ใช้กับ h1 ของหน้าแรก) */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- 5. navigation — แถบลอยมุมมน ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 0; pointer-events: none; } .topbar-in { pointer-events: auto; max-width: var(--shell); margin: 0 auto; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 8px 0 16px; border-radius: 20px; transition: background .3s, box-shadow .3s; } .brand { display: flex; align-items: center; gap: 10px; justify-self: start; min-width: 0; } .brand img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } .brand-name { font-family: var(--font-brand); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-name span { color: var(--dim); font-weight: 600; } .tabs { position: relative; display: flex; gap: 2px; justify-self: center; padding: 4px; border-radius: var(--pill); background: rgba(127, 127, 140, .1); } .tab { position: relative; z-index: 1; padding: 7px 18px; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--mute); transition: color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); } .tab:hover { color: var(--ink); } .tab.is-on { color: var(--ink); } /* เม็ดบอกแท็บที่เลือก — glass.js สร้างและเลื่อนตาม (ตำแหน่งแนวนอน/ความกว้าง) ส่วนแนวตั้งกับหน้าตากำหนดที่นี่ Liquid Glass: เม็ดกระจก (glass.css) · คลาสสิก: เส้นใต้สีเน้น (หัวข้อ 15) · กดค้างแล้วพองขึ้นแบบ iOS */ .tab-lens { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; z-index: 0; border-radius: var(--pill); pointer-events: none; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); opacity: 0; transition: transform .55s var(--spring), width .5s var(--spring), opacity .25s var(--ease), scale .35s var(--spring); } .tab-lens.is-on { opacity: 1; } .tab-lens.is-press { scale: 1.1 1.16; } .tabbar { display: none; } /* ---------- 6. page shell ---------- */ .view { display: none; } .view.is-on { display: block; animation: view-in .38s var(--ease) both; } @keyframes view-in { from { transform: translateY(10px); } to { transform: none; } } /* ไม่ใช้ opacity: ตัวแม่ที่จางอยู่ทำให้กระจกข้างในหยุดเบลอ */ main { position: relative; z-index: 2; min-height: 70vh; } .shell { max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } .section { padding: 56px 0 8px; } .view:not(#view-home) .section:first-child { padding-top: calc(var(--nav-space) + 36px); } .page-top { padding-top: calc(var(--nav-space) + 24px); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); box-shadow: -2px 0 0 var(--gl-a), 2px 0 0 var(--gl-b); } .eyebrow.is-thai { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; text-transform: none; } .section-title, .page-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.025em; line-height: 1.16; } .section-note { color: var(--mute); font-size: 15.5px; max-width: 56ch; margin-top: 8px; } .head-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14.5px; color: var(--accent); padding: 8px 12px; border-radius: var(--pill); transition: background .2s; white-space: nowrap; } .head-link:hover { background: var(--accent-soft); } /* ---------- 7. ปุ่ม ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 24px; min-height: 46px; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; font-size: 15px; transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .25s, background .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px var(--accent-ring); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 14px 30px -12px var(--accent-ring); } .btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); } .btn-text { color: var(--mute); padding-inline: 12px; } .btn-text:hover:not(:disabled) { color: var(--danger); background: var(--surface-2); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(1.06); } .btn-sm { padding: 7px 15px; min-height: 38px; font-size: 13.5px; } .btn-block { width: 100%; } .btn svg { flex-shrink: 0; } .btn.is-busy { position: relative; } /* ---------- 7.1 สไลด์แบบไร้กรอบ — อยู่ฝั่งขวาของส่วนแนะนำ ขอบภาพจางกลืนไปกับหน้าเว็บ ไม่เป็นการ์ดสี่เหลี่ยม ---------- คำบรรยายของแต่ละสไลด์อยู่ในแผ่นกระจกที่ลอยทับมุมล่าง · ปุ่มเลื่อน + แถบเวลาอยู่มุมบนขวา */ .stage { position: relative; width: 100%; aspect-ratio: 1 / .92; max-height: 620px; isolation: isolate; z-index: 1; } .stage-slides { position: absolute; inset: 0; } .slide { position: absolute; inset: 0; visibility: hidden; transition: visibility .8s; } .slide.is-on { visibility: visible; z-index: 1; } .slide > * { opacity: 0; transition: opacity .8s var(--ease); } /* จางที่ลูก ไม่ใช่ที่ .slide — ให้คำบรรยายกระจกยังเบลอระหว่างสลับ */ .slide.is-on > * { opacity: 1; } .slide-media { position: absolute; inset: 0 0 12% 4%; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 56%, rgba(0, 0, 0, .5) 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 56%, rgba(0, 0, 0, .5) 80%, transparent 100%); } .slide-media img { width: 100%; height: 100%; object-fit: cover; } .slide.is-on .slide-media img, .slide.is-on .slide-fallback { animation: kenburns 12s linear both; } @keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } } .slide-fallback { position: absolute; inset: -4%; } .slide-fallback.a-cyan { background: radial-gradient(60% 60% at 30% 30%, #28d7df 0%, transparent 62%), radial-gradient(55% 60% at 76% 72%, #6b3cf2 0%, transparent 64%), radial-gradient(70% 70% at 50% 50%, #1b3fa8, transparent 80%); } .slide-fallback.a-blue { background: radial-gradient(60% 60% at 30% 30%, #3aa8ff 0%, transparent 62%), radial-gradient(55% 60% at 76% 72%, #8e45ff 0%, transparent 64%), radial-gradient(70% 70% at 50% 50%, #22308f, transparent 80%); } .slide-fallback.a-violet { background: radial-gradient(60% 60% at 30% 30%, #a15bff 0%, transparent 62%), radial-gradient(55% 60% at 76% 72%, #20c8dc 0%, transparent 64%), radial-gradient(70% 70% at 50% 50%, #4b24b8, transparent 80%); } .slide-glyph { position: absolute; left: 50%; top: 46%; width: 58%; aspect-ratio: 1 / 1; background: url("/static/img/icon-512.png") center/contain no-repeat; opacity: .5; filter: brightness(1.5) saturate(.8); transform: translate(-50%, -50%); animation: glyph-drift 18s ease-in-out infinite; } @keyframes glyph-drift { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-52%, -52%) rotate(-2deg); } } .slide-cap { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(92%, 440px); padding: 18px 20px 18px; border-radius: 24px; display: grid; gap: 6px; text-align: left; } .slide.is-on .slide-cap { animation: cap-in .7s .12s var(--ease) both; } @keyframes cap-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .slide-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); } .slide-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .slide-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.18; letter-spacing: -.02em; } .slide-sub { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--mute); } .slide-desc { color: var(--mute); font-size: 14.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slide-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; } .slide-app { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; padding-top: 12px; border-top: 1px solid var(--line); cursor: pointer; } .slide-app .app-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 15px; } .slide-app .app-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slide-app .app-sub { font-size: 12.5px; } .stage-ctl { position: absolute; top: 2%; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; } .slider-rail { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: var(--pill); } .shard { width: 18px; height: 3px; border-radius: var(--pill); background: var(--line-strong); overflow: hidden; cursor: pointer; transition: width .35s var(--ease); } .shard i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: var(--pill); } .shard.is-on { width: 44px; } .shard.is-on i { animation: shard-fill var(--slide-ms, 6500ms) linear forwards; } .shard.is-done i { width: 100%; opacity: .45; } .stage.is-paused .shard.is-on i { animation-play-state: paused; } @keyframes shard-fill { from { width: 0; } to { width: 100%; } } .arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: transform .25s var(--ease); } .arrow:active { transform: scale(.92); } /* ---------- 7.5 ส่วนแนะนำบนหน้าแรก (app.js → renderIntro) — แสดงเสมอ ทั้งจอคอมและมือถือ ---------- ซ้าย: ชื่อเว็บแบบกลิตช์ คำโปรย ปุ่มหลัก ตัวเลขสรุป · ขวา: สไลด์แบบไร้กรอบ (ถ้ามี) หรือโลโก้ + การ์ดกระจกของผลงานเด่น */ .intro { position: relative; z-index: 2; width: min(var(--shell), calc(100% - 2 * var(--gutter))); margin: calc(var(--nav-space) + 8px) auto 0; min-height: min(680px, calc(100svh - var(--nav-space) - 24px)); display: grid; align-items: center; padding: clamp(20px, 3.4vw, 44px) 0 clamp(12px, 3vw, 28px); } .intro-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .intro-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); } .intro-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); animation: pulse-dot 2s ease-in-out infinite; } .intro-title { font-family: var(--font-brand); font-weight: 700; text-transform: uppercase; font-size: clamp(46px, 8.4vw, 116px); line-height: .92; letter-spacing: -.01em; display: grid; margin-bottom: 26px; } .intro-title .gx:last-child { color: transparent; -webkit-text-stroke: 1.5px var(--ink); } .intro-tag { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: -.01em; max-width: 30ch; } .intro-desc { color: var(--mute); font-size: 16px; line-height: 1.7; max-width: 48ch; margin-top: 10px; } .intro-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .intro-cta .btn { min-height: 50px; padding: 13px 26px; } .intro-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); } .intro-stat { padding: 16px 28px 0 0; margin-right: 28px; } .intro-stat + .intro-stat { padding-left: 28px; border-left: 1px solid var(--line); } .intro-stat b { display: block; font-family: var(--font-brand); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; } .intro-stat span { font-size: 13px; color: var(--dim); } .intro-art { position: relative; min-height: 440px; display: grid; place-items: center; } .intro-orb { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(40% 40% at 30% 30%, rgba(18, 222, 220, .55), transparent 70%), radial-gradient(45% 45% at 72% 64%, rgba(180, 61, 255, .5), transparent 72%), radial-gradient(50% 50% at 50% 50%, rgba(27, 143, 232, .3), transparent 75%); filter: blur(34px); opacity: var(--orb-op, .6); animation: orb-drift 16s ease-in-out infinite; } @keyframes orb-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.05); } } .intro-mark { position: absolute; width: min(64%, 320px); aspect-ratio: 1 / 1; opacity: .9; } .intro-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .intro-tiles { position: relative; z-index: 2; display: grid; gap: 12px; width: min(100%, 400px); } .intro-tile { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px; text-align: left; cursor: pointer; transition: transform .35s var(--ease); } .intro-tile:nth-child(2) { margin-left: 34px; margin-right: -34px; } .intro-tile:nth-child(3) { margin-left: 12px; margin-right: -12px; } .intro-tile:hover { transform: translateX(-4px); } .intro-tile .app-icon { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; } .intro-tile .app-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intro-tile .app-sub { font-size: 13px; } .intro-ver { font-family: var(--font-mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; } .intro-get, .m-head { display: none; } .intro-tile:nth-child(n+4) { display: none; } .intro + .shell #updates { padding-top: 24px; } @media (max-width: 900px) { .intro { min-height: 0; margin-top: calc(var(--nav-space) + 4px); padding-top: 26px; } .intro-in { grid-template-columns: 1fr; gap: 30px; } .intro-title { font-size: clamp(44px, 14vw, 72px); margin-bottom: 20px; } .intro-art { min-height: 0; padding: 26px 0 6px; } .intro-mark { width: 58%; opacity: .55; } .intro-orb { inset: 0; } .stage { aspect-ratio: 1 / 1.08; max-height: none; } .slide-media { inset: 0 0 20% 0; } .slide-cap { width: 100%; padding: 16px 16px 16px; border-radius: 22px; } .stage-ctl { top: 0; } .intro-tiles { width: 100%; } .intro-tile:nth-child(n) { margin: 0; } .intro-stats { margin-top: 30px; } .intro-stat { padding-right: 18px; margin-right: 18px; } .intro-stat + .intro-stat { padding-left: 18px; } .intro-stat b { font-size: 25px; } .intro-cta .btn { flex: 1; } } /* ---------- 9. cards ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .updates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; } .update { display: grid; grid-template-rows: auto 1fr; text-align: left; width: 100%; } .update-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); } .update-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .update:hover .update-thumb img { transform: scale(1.04); } .update-thumb .ph { position: absolute; inset: 0; } .update-body { padding: 16px 18px 20px; display: grid; gap: 8px; align-content: start; } .update-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); } .chip-tag { padding: 3px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); } .update-title { font-family: var(--font-display); font-weight: 600; font-size: 18.5px; line-height: 1.35; letter-spacing: -.005em; } .update-desc { color: var(--mute); font-size: 14.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pin-flag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 12px; border-radius: var(--pill); font-size: 12px; font-weight: 600; background: rgba(17, 20, 31, .78); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .loadmore { display: grid; place-items: center; margin: 32px 0 6px; } /* ---------- 10. apps ---------- */ .tools-layout { display: grid; gap: 24px; } .rail-label { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--dim); margin-bottom: 8px; display: none; letter-spacing: .02em; } .rail-stat { display: none; } .segmented { display: flex; gap: 2px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill); margin-bottom: 16px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .seg { flex-shrink: 0; padding: 8px 20px; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--mute); white-space: nowrap; transition: color .2s, background .2s, box-shadow .2s; } .seg:hover { color: var(--ink); } .seg.is-on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); } .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 7px 16px; border-radius: var(--pill); font-size: 14px; color: var(--mute); border: 1px solid var(--line); background: var(--surface); transition: color .2s, border-color .2s, background .2s; } .chip:hover { color: var(--ink); border-color: var(--line-strong); } .chip.is-on { background: var(--ink); color: var(--bg); border-color: transparent; font-weight: 600; } .group-head { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 14px; } .group-head:first-child { margin-top: 0; } .group-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; } .group-head span { font-size: 13px; color: var(--dim); } .app-grid { display: grid; gap: 10px; margin-bottom: 6px; } .app-card { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 15px; padding: 13px 15px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: box-shadow .25s var(--ease), border-color .2s, transform .2s var(--ease); } .app-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-2px); } .app-icon { width: 58px; height: 58px; position: relative; overflow: hidden; border-radius: 15px; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: #fff; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--line); } .app-icon img { width: 100%; height: 100%; object-fit: cover; } .app-info { min-width: 0; } .app-name { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.32; } .app-sub { color: var(--mute); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-plat { font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .get { padding: 8px 17px; min-height: 38px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 14px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; transition: background .2s, color .2s; } .get svg { flex-shrink: 0; } .get.is-link { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); } .app-card:hover .get, .slide-app .get:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; } .get.is-soon { background: transparent; border: 1px dashed var(--line-strong); color: var(--dim); } .app-card:hover .get.is-soon { background: transparent; color: var(--dim); border-color: var(--line-strong); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .feature { display: grid; grid-template-rows: auto 1fr; text-align: left; } .feature-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0f1422; } .feature-cover img { width: 100%; height: 100%; object-fit: cover; } .feature-cover .ph { position: absolute; inset: 0; } .feature-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 13, 24, .82) 4%, transparent 58%); } .feature-head { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 14px; color: #fff; } .feature-head .app-icon { width: 52px; height: 52px; font-size: 19px; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6); } .feature-head .app-sub { color: rgba(255, 255, 255, .78); } .feature-body { padding: 16px 18px 18px; display: grid; gap: 14px; align-content: start; } .feature-desc { color: var(--mute); font-size: 14.5px; line-height: 1.62; } .feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .spec { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); } /* ---------- 11. other page ---------- */ .opane { display: none; } .opane.is-on { display: block; animation: view-in .32s var(--ease) both; } .sticky-seg { margin-bottom: 24px; } #otherSeg { margin-bottom: 0; } .pane-narrow { max-width: 760px; } .info-grid { display: grid; gap: 20px; align-items: start; } .info-side { display: grid; gap: 20px; } .factlist { display: grid; } .fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .fact:last-child { border-bottom: none; } .fact-k { color: var(--mute); font-size: 14.5px; } .fact-v { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; text-align: right; } .other-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 22px; align-items: start; } .other-side { display: grid; gap: 22px; } .panel { padding: 28px; } .card.panel:hover { transform: none; box-shadow: none; border-color: var(--line); } .panel-title { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-bottom: 6px; letter-spacing: -.01em; } .panel-note { color: var(--mute); font-size: 14.5px; margin-bottom: 22px; } .field { display: grid; gap: 7px; margin-bottom: 16px; position: relative; z-index: 2; } .field label { font-size: 13.5px; font-weight: 600; color: var(--mute); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; min-height: 48px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-size: 16px; border-radius: var(--r-sm); transition: border-color .2s, background .2s, box-shadow .2s; } .field textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); } .field input::placeholder, .field textarea::placeholder { color: var(--dim); } .field.has-error input, .field.has-error textarea { border-color: var(--danger); } .field-help { font-size: 12.5px; color: var(--dim); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .stars { display: flex; gap: 4px; position: relative; z-index: 2; } .star { width: 44px; height: 44px; display: grid; place-items: center; color: var(--dim); opacity: .4; border-radius: 12px; transition: color .18s, opacity .18s, transform .18s, background .18s; } .star:hover { transform: scale(1.1); background: var(--surface-2); opacity: .75; } .star.is-on { color: var(--star); opacity: 1; } .contact-list { display: grid; } .contact { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 15px; padding: 13px 8px; border-bottom: 1px solid var(--line); border-radius: 14px; transition: background .2s, padding-left .2s var(--ease); } .contact:last-child { border-bottom: none; } .contact:hover { background: var(--surface-2); padding-left: 12px; } .contact-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); } .contact-label { font-weight: 600; font-size: 15.5px; } .contact-value { color: var(--mute); font-size: 14px; word-break: break-all; } .contact-note { color: var(--dim); font-size: 12.5px; margin-top: 2px; } .contact-go { color: var(--dim); transition: color .2s, transform .2s; } .contact:hover .contact-go { color: var(--accent); transform: translateX(3px); } /* ---------- 11.5 หน้ารายละเอียดผลงาน ---------- */ .app-card.is-open, .feature.is-open { cursor: pointer; } .app-card.is-open:focus-visible, .feature.is-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .prod-back { margin-bottom: 18px; } .prod-hero { overflow: hidden; } .prod-cover { position: relative; aspect-ratio: 21 / 7; background: #0f1422; } .prod-cover img { width: 100%; height: 100%; object-fit: cover; } .prod-cover .ph { position: absolute; inset: 0; background: var(--grad); opacity: .9; } .prod-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 13, 24, .78) 6%, transparent 62%); } /* ไอคอน + ชื่ออยู่ใต้ภาพปกทั้งหมด เรียงข้างกันตามปกติ */ .prod-head { display: flex; align-items: center; gap: 18px; padding: 22px 26px 0; position: relative; z-index: 2; } .prod-head .app-icon { flex-shrink: 0; width: 76px; height: 76px; font-size: 26px; border-radius: 20px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); } .prod-title { min-width: 0; } .prod-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; } .prod-title h1 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.22; letter-spacing: -.02em; } .prod-title p { color: var(--mute); font-size: 15px; margin-top: 4px; } .prod-act { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 26px 22px; } .prod-act .get { padding: 11px 24px; min-height: 46px; font-size: 15px; } .prod-spec { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--dim); } .prod-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 22px; align-items: start; margin-top: 22px; } .prod-main, .prod-side { display: grid; gap: 22px; align-content: start; } .prod-rich p { color: var(--mute); font-size: 15px; line-height: 1.75; margin-bottom: 12px; } .prod-rich p:last-child { margin-bottom: 0; } .prod-h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 22px 0 10px; } .prod-list { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; } .prod-list li { position: relative; padding-left: 22px; color: var(--mute); font-size: 15px; line-height: 1.65; } .prod-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .prod-cta { margin-top: 20px; } .prod-cta .get { width: 100%; padding: 12px 20px; min-height: 48px; font-size: 15px; } .prod-news .group-head { margin-top: 0; } /* ผลงานใกล้เคียง (คอลัมน์ข้างแคบ) — เรียงแถวเดียวแบบกะทัดรัด ไม่ใช้กริดสองคอลัมน์ของหน้ารายการ */ .prod-side .app-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .prod-side .app-card { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; } .prod-side .app-card .app-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 17px; } .prod-side .app-card .app-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prod-side .app-card .app-sub { font-size: 13px; } .prod-side .app-card .app-plat { display: none; } .prod-side .app-card .get { padding: 7px 13px; min-height: 34px; font-size: 13px; } .newtag { white-space: nowrap; } @media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr; } .prod-cover { aspect-ratio: 16 / 9; } .prod-head { padding: 18px 18px 0; gap: 14px; } .prod-head .app-icon { width: 62px; height: 62px; font-size: 22px; border-radius: 17px; } .prod-title h1 { font-size: 23px; } .prod-act { padding: 16px 18px 20px; } .prod-act .get { width: 100%; } } /* ---------- 12. footer ---------- */ .footer { margin-top: 96px; padding: 36px 0 34px; border-top: 1px solid var(--line); position: relative; z-index: 2; background: transparent; } .footer-in { max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.4fr auto auto; align-items: center; gap: 28px; } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-brand img { width: 32px; height: 32px; object-fit: contain; } .footer-title { font-family: var(--font-display); font-weight: 600; } .footer-note { color: var(--dim); font-size: 13.5px; } .footer-links { display: flex; flex-wrap: wrap; gap: 4px 6px; } .footer-links a { font-size: 14px; color: var(--mute); padding: 6px 10px; border-radius: var(--pill); transition: background .2s, color .2s; } .footer-links a:hover { color: var(--ink); background: var(--surface-2); } .footer-meta { font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: .12em; text-align: right; } /* ---------- 13. misc ---------- */ .ph { background: var(--ph-bg); position: relative; overflow: hidden; } .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 20% 15%, rgba(18, 222, 220, .26), transparent 62%), radial-gradient(60% 80% at 85% 80%, rgba(123, 33, 242, .2), transparent 64%); } .ph::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background: url("/static/img/icon-512.png") center/contain no-repeat; opacity: var(--ph-mark); } .empty { padding: 52px 24px; text-align: center; color: var(--mute); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: transparent; } .empty strong { display: block; font-family: var(--font-display); color: var(--ink); font-size: 17.5px; margin-bottom: 6px; } .toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 24px); z-index: 950; padding: 12px 22px; border-radius: var(--pill); background: var(--toast-bg); color: var(--toast-ink); font-size: 15px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s var(--spring); box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); text-align: center; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } .toast.is-bad { background: var(--danger); color: #fff; } /* ---------- All Download: หน้าต่างเลือกแบบที่จะโหลด (โปรดักส์ที่มีไฟล์หลายแบบ) ---------- */ button.get { cursor: pointer; border: none; } .modal-card.dl-card { width: min(520px, 100%); padding: 24px 22px 20px; } .dl-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; margin-bottom: 16px; } .dl-head .app-icon { width: 52px; height: 52px; border-radius: 15px; font-size: 19px; } .dl-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; } .dl-head p { font-size: 13.5px; color: var(--mute); } .dl-opts { display: grid; gap: 8px; } .dl-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s, background .2s; } .dl-opt:hover { border-color: var(--line-strong); } .dl-opt:first-child { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); } .dl-opt-info { display: grid; gap: 3px; min-width: 0; } .dl-opt-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; } .dl-rec { font-family: var(--font-body); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); } .dl-opt-note { font-size: 13.5px; color: var(--mute); line-height: 1.5; } .dl-opt-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--dim); } .dl-opt-file { font-family: var(--font-mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .dl-opt .get { background: var(--accent); color: var(--on-accent); } .dl-opt .get:hover { filter: brightness(1.08); } @media (max-width: 820px) { .modal-card.dl-card { padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); } .dl-head { margin-top: 6px; } .dl-opt { grid-template-columns: 1fr; gap: 10px; } .dl-opt .get { width: 100%; min-height: 42px; } } /* ---------- แจ้งเตือนเวอร์ชันใหม่ ---------- */ .newtag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--pill); background: var(--grad); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; } .newver { position: fixed; left: 24px; bottom: 24px; z-index: 940; width: min(360px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .35s var(--ease), transform .4s var(--spring); } .newver[hidden] { display: none; } .newver.is-on { opacity: 1; transform: none; pointer-events: auto; } .nv-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 15.5px; } .nv-x { width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--dim); } .nv-x:hover { background: var(--surface-2); color: var(--ink); } .nv-row { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); text-align: left; transition: background .18s; } .nv-row:hover { background: var(--accent-soft); } .nv-name { font-weight: 600; font-size: 14.5px; } .nv-ver { font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .nv-note { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nv-more { font-size: 12.5px; color: var(--dim); } .nv-foot { display: flex; justify-content: flex-end; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- 14. responsive ---------- */ @media (max-width: 900px) { .other-grid { grid-template-columns: 1fr; } } /* ===== มือถือ ===== */ @media (max-width: 820px) { :root { --nav-h: 58px; --nav-space: calc(58px + env(safe-area-inset-top)); } /* แถบบน: ติดขอบ บางเบา */ .topbar { padding: 0; } .topbar-in { max-width: none; height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px; grid-template-columns: minmax(0, 1fr) auto; border-radius: 0; } .tabs { display: none; } .brand img { width: 28px; height: 28px; } .brand-name { font-size: 15px; } /* แถบเมนูล่าง: ลอยมุมมน มีพื้นหลังเม็ดยาในแท็บที่เลือก */ .tabbar { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); height: var(--tab-h); padding: 5px; border-radius: 26px; transition: transform .35s var(--ease); } body.has-layer .tabbar { transform: translateY(140%); } .tabbar .tab-lens { top: 5px; bottom: 5px; border-radius: 21px; } .tabbar-item { position: relative; z-index: 1; isolation: isolate; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 18px; color: var(--dim); transition: color .2s; } .tabbar-item span { font-size: 11px; font-weight: 600; } .tabbar-item.is-on { color: var(--accent); } .tabbar-item:active { transform: scale(.95); } body { padding-bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)); } .toast { bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); } .newver { left: 16px; right: 16px; width: auto; bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)); } .section { padding: 36px 0 4px; } .view:not(#view-home) .section:first-child { padding-top: calc(var(--nav-space) + 20px); } .page-top { padding-top: calc(var(--nav-space) + 14px); } .section-head { align-items: flex-end; gap: 10px; margin-bottom: 14px; } .section-head > div:first-child { min-width: 0; } .section-title, .page-title { font-size: 27px; } .section-note { font-size: 14.5px; } .eyebrow { font-size: 10.5px; margin-bottom: 4px; } /* อัปเดตหน้าแรก + แอปแนะนำ: ปัดซ้ายขวาแบบแอป */ #updatesGrid, #featureGrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter); scrollbar-width: none; gap: 12px; } #updatesGrid::-webkit-scrollbar, #featureGrid::-webkit-scrollbar { display: none; } #updatesGrid > *, #featureGrid > * { scroll-snap-align: start; } #updatesGrid .card:hover, #featureGrid .card:hover { transform: none; } #updatesGrid .empty { grid-column: auto; width: calc(100vw - 2 * var(--gutter)); } .loadmore { margin-top: 10px; } #newsGrid { grid-template-columns: 1fr; gap: 14px; } /* ตัวกรองติดหนึบใต้แถบบน */ .rail, .sticky-seg { position: sticky; top: var(--nav-space); z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 6px; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .rail.reveal { opacity: 1; transform: none; } .rail .segmented { margin-bottom: 8px; } .rail .chips { margin-bottom: 2px; } .tools-layout { gap: 14px; } .feature-grid { grid-template-columns: 1fr; } .panel { padding: 22px 18px; } .app-card { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 11px 12px; border-radius: 18px; } .app-icon { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; } .get { padding: 7px 14px; min-height: 36px; font-size: 13.5px; } .two-col { grid-template-columns: 1fr; gap: 0; } .footer { margin-top: 48px; padding: 28px 0 24px; } .footer-in { grid-template-columns: 1fr; gap: 16px; } .footer-links { margin-left: -10px; } .footer-meta { text-align: left; } .splash-skip { right: 20px; } .segmented { width: 100%; } .seg { flex: 1; text-align: center; padding: 8px 12px; font-size: 14px; } .group-head { margin: 24px 0 10px; } .head-link { padding: 6px 4px; } } @media (max-width: 440px) { .brand-name span { display: none; } } /* ===== หน้าแรกบนมือถือ: แบบแอป — หัวเรื่องใหญ่กะทัดรัด · ชิปตัวเลข · แถวการ์ดแนะนำที่ปัดได้ · รายการผลงานพร้อมปุ่มโหลด ===== (ปุ่มนำทางใหญ่ ๆ ซ่อนไว้ แถบเมนูล่างทำหน้าที่แทน) */ @media (max-width: 820px) { .intro { margin-top: var(--nav-space); padding: 10px 0 0; min-height: 0; } .intro-in { gap: 22px; } .intro-kicker { margin-bottom: 8px; font-size: 10.5px; letter-spacing: .2em; } .intro-title { font-size: clamp(30px, 9.4vw, 38px); line-height: .98; margin-bottom: 8px; } .intro-title .gx:last-child { -webkit-text-stroke-width: 1px; } .intro-tag { font-size: 15px; font-weight: 500; color: var(--mute); max-width: none; } .intro-desc, .intro-cta { display: none; } .intro-stats { gap: 6px; margin-top: 14px; border: none; } .intro-stat, .intro-stat + .intro-stat { display: inline-flex; align-items: baseline; gap: 5px; margin: 0; padding: 6px 12px; border: none; border-radius: var(--pill); background: var(--surface-2); } .intro-stat b { display: inline; font-family: var(--font-display); font-size: 14px; } .intro-stat span { font-size: 13px; } .intro-art { display: block; justify-items: stretch; min-height: 0; padding: 0; } .intro-orb, .intro-mark { display: none; } .m-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .m-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; } .m-head button { font-size: 14.5px; font-weight: 600; color: var(--accent); } /* รายการผลงานแบบแอปสโตร์ */ .intro-tiles { gap: 0; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .intro-tile, .intro-tile:nth-child(n) { margin: 0; padding: 12px 14px; border-radius: 0; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; } .intro-tile:nth-child(n+4) { display: grid; } .intro-tile + .intro-tile { border-top: 1px solid var(--line); } .intro-tile:hover { transform: none; } .intro-tile .app-icon { width: 50px; height: 50px; } .intro-tile .app-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intro-ver { display: none; } .intro-get { display: block; } /* สไลด์ → แถวการ์ดที่ปัดได้ (scroll-snap) เห็นใบถัดไปโผล่ขอบ */ .stage { aspect-ratio: auto; max-height: none; } .stage-slides { position: static; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter); } .stage-slides::-webkit-scrollbar { display: none; } .slide, .slide.is-on { position: relative; inset: auto; flex: 0 0 86%; opacity: 1; visibility: visible; scroll-snap-align: start; transition: none; } .slide > * { opacity: 1; transition: none; } .slide-media, .slide:only-child .slide-media { position: relative; inset: auto; aspect-ratio: 16 / 11; border-radius: 20px; background: #0e0e14; -webkit-mask-image: none; mask-image: none; } .slide-glyph { width: 52%; } .slide-cap { position: static; width: auto; padding: 12px 2px 0; border-radius: 0; gap: 3px; } .slide-title { font-size: 19px; } .slide-desc { font-size: 14px; } .slide-app { border-top: none; padding-top: 6px; } .stage-ctl { display: none; } .slide:only-child { flex-basis: 100%; } } .head-aside { display: none; } /* ===== จอคอม ===== */ @media (min-width: 1024px) { .tools-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 36px; align-items: start; } .rail { position: sticky; top: calc(var(--nav-space) + 20px); display: grid; gap: 22px; padding: 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .rail-label { display: block; padding: 0 10px; } .rail-group { display: block; } .rail .segmented { flex-direction: column; gap: 2px; width: 100%; padding: 0; margin: 0; background: none; border: none; border-radius: 0; overflow: visible; } .rail .seg { width: 100%; text-align: left; padding: 9px 12px; border-radius: 11px; font-size: 15px; } .rail .seg.is-on { background: var(--accent-soft); color: var(--accent); box-shadow: none; } .rail .chips { flex-direction: column; gap: 2px; margin: 0; overflow: visible; padding: 0; } .rail .chip { width: 100%; text-align: left; padding: 8px 12px; border-radius: 11px; background: none; border: none; font-size: 14.5px; } .rail .chip:hover { background: var(--surface-2); } .rail .chip.is-on { background: var(--surface-3); color: var(--ink); } .rail-stat { display: block; padding: 16px 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); line-height: 1.7; } .rail-stat b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; } .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .group-head { margin: 34px 0 14px; } .head-aside { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .quick { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--mute); box-shadow: var(--shadow-sm); transition: color .2s, box-shadow .2s, transform .2s var(--ease); } .quick:hover { color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } .other-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; } .other-side { position: sticky; top: calc(var(--nav-space) + 20px); } .info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } #newsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .panel { padding: 32px; } .updates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* การ์ดอัปเดตใบแรกเด่นขึ้นแบบ bento */ #updatesGrid .update:first-child { grid-column: span 2; grid-template-rows: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } #updatesGrid .update:first-child .update-thumb { aspect-ratio: auto; min-height: 280px; height: 100%; } #updatesGrid .update:first-child .update-body { padding: 26px 26px 28px; align-content: center; gap: 12px; } #updatesGrid .update:first-child .update-title { font-size: 25px; line-height: 1.25; } #updatesGrid .update:first-child .update-desc { -webkit-line-clamp: 5; font-size: 15px; } } @media (min-width: 820px) and (max-width: 1023px) { .info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tabs .tab { padding: 7px 13px; font-size: 14px; } .brand-name span { display: none; } } @media (min-width: 1400px) { .tools-layout { grid-template-columns: 252px minmax(0, 1fr); gap: 48px; } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- 15. ดีไซน์คลาสสิก — ปิด Liquid Glass (data-glass="off") ---------- ไม่ใช่แค่ถอดเบลอ/แสงเงาออก แต่เปลี่ยนทั้งภาษาออกแบบ: พื้นทึบ ขอบคม มุมโค้งน้อย เงาบาง แถบเมนูบนติดขอบจอเต็มความกว้าง · ตัวบอกแท็บเป็นเส้นใต้สีเน้น · แถบล่างมือถือติดขอบจอ · ปุ่มเป็นสี่เหลี่ยมมุมมน */ :root[data-glass="off"] { --r-2xl: 16px; --r-xl: 14px; --r-lg: 12px; --r-md: 10px; --r-sm: 8px; --pill: 10px; } :root[data-glass="off"] .topbar { padding: 0; } :root[data-glass="off"] .topbar-in { max-width: none; height: calc(var(--nav-h) + 4px); padding: 0 max(var(--gutter), calc((100% - var(--shell)) / 2)); border-radius: 0; background: var(--surface); border-bottom: 1px solid var(--line); } :root[data-glass="off"] .topbar.is-stuck .topbar-in { box-shadow: 0 10px 28px -22px rgba(0, 0, 0, .45); } :root[data-glass="off"] .tabs { align-self: stretch; align-items: stretch; gap: 6px; padding: 0; background: none; border-radius: 0; } :root[data-glass="off"] .tab { display: flex; align-items: center; padding: 0 14px; border-radius: 0; } :root[data-glass="off"] .tab-lens { top: auto; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: none; } :root[data-glass="off"] .tab-lens.is-press { scale: 1; } :root[data-glass="off"] .acct-menu { top: calc(var(--nav-h) + 12px + env(safe-area-inset-top)); border-radius: var(--r-lg); } :root[data-glass="off"] .modal-card { border-radius: var(--r-2xl); } :root[data-glass="off"] .btn-glass { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); } :root[data-glass="off"] .btn-glass:hover:not(:disabled) { background: var(--surface-2); } :root[data-glass="off"] :is(.arrow, .slider-rail) { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } :root[data-glass="off"] .arrow { border-radius: var(--r-sm); } :root[data-glass="off"] .arrow:hover { background: var(--surface-2); } :root[data-glass="off"] .pin-flag { background: rgba(17, 20, 31, .86); border-radius: 6px; } :root[data-glass="off"] .chip.is-on { background: var(--accent); color: var(--on-accent); } @media (min-width: 821px) { :root[data-glass="off"] .intro-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), border-color .2s; } :root[data-glass="off"] .intro-tile:hover { border-color: var(--line-strong); } :root[data-glass="off"] .slide-cap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } } @media (max-width: 820px) { :root[data-glass="off"] .topbar-in { height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px; } :root[data-glass="off"] .tabbar { left: 0; right: 0; bottom: 0; border-radius: 0; height: calc(var(--tab-h) - 6px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); } :root[data-glass="off"] .tabbar .tab-lens { top: -1px; bottom: auto; height: 2px; border-radius: 0 0 2px 2px; clip-path: inset(0 30%); } :root[data-glass="off"] body { padding-bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); } :root[data-glass="off"] :is(.rail, .sticky-seg, .page-tabs-wrap) { background: var(--bg); border-bottom: 1px solid var(--line); } :root[data-glass="off"] .newver { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); } :root[data-glass="off"] .toast { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); } } /* ---------- 16. บรรยากาศของธีม Soul of Purple — ห้วงลึกแบบนามธรรม ---------- ไม่วาดดาวเคราะห์หรือภาพอวกาศตรง ๆ แค่ยืมแสงของมันมา: ฝุ่นดาวจาง ๆ · ม่านแสงเหนือที่ขอบบน หมอกเนบิวลาชมพู/ครามที่มุม · วงแสงอุ่นบาง ๆ แบบขอบหลุมดำที่มุมล่าง · ลูกแก้วหน้าแรกกลายเป็นกาแล็กซีหมุนช้า ๆ */ .cosmo { display: none; } :root[data-theme="purple"] .atmos::before, :root[data-theme="purple"] .atmos::after { display: none; } :root[data-theme="purple"] .cosmo { display: block; position: absolute; pointer-events: none; } /* ฝุ่นดาว — จุดเล็กหลายขนาด วางซ้ำด้วยช่องที่ขนาดไม่ลงตัวกัน จึงไม่เห็นเป็นตาราง */ .cosmo-dust { inset: 0; background-image: radial-gradient(circle at 13% 27%, rgba(255, 255, 255, .8) 0 .6px, transparent 1.3px), radial-gradient(circle at 71% 64%, rgba(214, 226, 255, .65) 0 .7px, transparent 1.4px), radial-gradient(circle at 42% 88%, rgba(255, 222, 246, .55) 0 .5px, transparent 1.1px), radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .9) 0 .9px, transparent 1.8px), radial-gradient(circle at 30% 60%, rgba(190, 255, 240, .5) 0 .5px, transparent 1.1px); background-size: 173px 191px, 241px 227px, 127px 139px, 331px 307px, 97px 113px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, rgba(0, 0, 0, .35) 75%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, rgba(0, 0, 0, .35) 75%, transparent 100%); opacity: .55; animation: cosmo-twinkle 9s ease-in-out infinite alternate; } @keyframes cosmo-twinkle { from { opacity: .4; } to { opacity: .7; } } /* ม่านแสงเหนือ — แถบเขียวฟ้า → คราม → ม่วง พลิ้วช้า ๆ ที่ขอบบน ไล่จางลงเหมือนม่าน */ .cosmo-aurora { left: -25%; right: -25%; top: -16vh; height: 58vh; background: radial-gradient(34% 42% at 24% 52%, rgba(64, 240, 196, .16), transparent 70%), radial-gradient(30% 36% at 50% 40%, rgba(80, 150, 255, .11), transparent 70%), radial-gradient(30% 40% at 76% 58%, rgba(168, 98, 255, .14), transparent 70%); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, rgba(0, 0, 0, .72) 60px, #000 130px, rgba(0, 0, 0, .8) 170px, #000 230px), linear-gradient(to bottom, transparent, #000 35%, #000 55%, transparent); -webkit-mask-composite: source-in; mask-image: repeating-linear-gradient(90deg, #000 0, rgba(0, 0, 0, .72) 60px, #000 130px, rgba(0, 0, 0, .8) 170px, #000 230px), linear-gradient(to bottom, transparent, #000 35%, #000 55%, transparent); mask-composite: intersect; filter: blur(22px); transform: skewY(-7deg); animation: cosmo-aurora 42s ease-in-out infinite alternate; } @keyframes cosmo-aurora { from { transform: skewY(-7deg) translateX(-4%) scaleY(.94); } to { transform: skewY(-3deg) translateX(5%) scaleY(1.1); } } /* หมอกเนบิวลา — ชมพูแมเจนตาอมครามมุมขวาบน · น้ำทะเลลึกมุมซ้ายล่าง */ .cosmo-nebula { inset: -12%; background: radial-gradient(30% 24% at 80% 30%, rgba(222, 78, 190, .12), transparent 70%), radial-gradient(26% 30% at 70% 40%, rgba(112, 70, 236, .16), transparent 70%), radial-gradient(22% 16% at 88% 44%, rgba(255, 140, 190, .07), transparent 70%), radial-gradient(30% 26% at 14% 80%, rgba(34, 150, 186, .12), transparent 70%), radial-gradient(22% 22% at 28% 70%, rgba(104, 60, 200, .1), transparent 70%); filter: blur(18px); animation: cosmo-drift 70s ease-in-out infinite alternate; } @keyframes cosmo-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-2%, 2%) rotate(2deg); } } /* ขอบหลุมดำ — วงแสงบาง ๆ สีอุ่นที่มุมล่างขวา ด้านหนึ่งสว่างกว่าอีกด้าน (แสงวนรอบ) หมุนช้ามาก */ .cosmo-halo { width: 78vmax; height: 78vmax; right: -40vmax; bottom: -46vmax; border-radius: 50%; background: conic-gradient(from 190deg, rgba(255, 176, 112, 0) 0%, rgba(255, 180, 120, .55) 10%, rgba(255, 130, 186, .38) 22%, rgba(150, 118, 255, .14) 40%, rgba(255, 176, 112, 0) 58%, rgba(255, 196, 140, .22) 82%, rgba(255, 176, 112, 0) 100%); -webkit-mask-image: radial-gradient(circle, transparent 47.2%, #000 48.4%, rgba(0, 0, 0, .5) 49.4%, rgba(0, 0, 0, .12) 53%, transparent 62%); mask-image: radial-gradient(circle, transparent 47.2%, #000 48.4%, rgba(0, 0, 0, .5) 49.4%, rgba(0, 0, 0, .12) 53%, transparent 62%); filter: blur(1.5px); opacity: .5; animation: cosmo-spin 180s linear infinite; } @keyframes cosmo-spin { to { transform: rotate(360deg); } } /* ลูกแก้วหน้าแรก → กาแล็กซีหมุนช้า ๆ แกนสว่าง แขนเป็นสีแสงเหนือ/เนบิวลา */ :root[data-theme="purple"] .intro-orb { inset: 4% 2%; background: radial-gradient(closest-side, rgba(255, 240, 252, .7), rgba(255, 200, 240, .18) 16%, transparent 34%), conic-gradient(from 30deg, rgba(82, 240, 207, .5), rgba(91, 141, 255, .42), rgba(154, 99, 255, .55), rgba(255, 127, 198, .45), rgba(255, 190, 130, .25), rgba(82, 240, 207, .5)); -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .55) 56%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .55) 56%, transparent 100%); filter: blur(26px); animation: cosmo-spin 90s linear infinite; } :root[data-theme="purple"] .glitch-logo { filter: drop-shadow(0 18px 40px rgba(154, 99, 255, .3)) drop-shadow(0 6px 18px rgba(82, 240, 207, .2)); } @media (max-width: 820px) { .cosmo-aurora { height: 44vh; } .cosmo-halo { width: 110vmax; height: 110vmax; right: -70vmax; bottom: -80vmax; } } /* ---------- 17. บรรยากาศของธีม Morning Mood — ฟ้าเพิ่งสาง ---------- ไม่วาดภาพธรรมชาติ (ไม่มีเมฆ ภูเขา ต้นไม้) แต่ต้องอ่านออกทันทีว่า "เช้า": ฟ้าไล่สีจากฟ้าซีด → แอปริคอต → ครีมที่ขอบบน · ดวงแสงสีทองนุ่ม ๆ ที่มุมขวาบนค่อย ๆ ลอยขึ้น ลำแสงพาดเฉียงลงมาจากดวงแสง · ฝุ่นละอองระยิบในลำแสง · อากาศเช้าสีฟ้าซีดที่มุมซ้ายล่าง */ .dawn { display: none; } :root[data-theme="morning"] .atmos::after { display: none; } :root[data-theme="morning"] .dawn { display: block; position: absolute; pointer-events: none; } /* ฟ้าเพิ่งสาง — แถบสีไล่ลงมาจากขอบบน แล้วจางเป็นพื้นครีม */ .dawn-sky { left: 0; right: 0; top: 0; height: 78vh; background: linear-gradient(to bottom, rgba(178, 208, 236, .5) 0%, rgba(206, 204, 238, .38) 12%, rgba(255, 196, 168, .42) 28%, rgba(255, 218, 184, .3) 46%, rgba(255, 236, 214, .12) 66%, transparent 100%); } /* ดวงแสง — แกนขาวอุ่น ห่อด้วยทองและพีช ขอบนุ่มไม่มีเส้นขอบ ลอยขึ้นช้า ๆ */ .dawn-sun { width: 64vmax; height: 64vmax; top: -26vmax; right: -16vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 236, 1) 0 6%, rgba(255, 226, 160, .95) 10%, rgba(255, 196, 120, .6) 18%, rgba(255, 170, 120, .3) 30%, rgba(255, 160, 150, .12) 44%, transparent 64%); filter: blur(4px); animation: dawn-rise 36s ease-in-out infinite alternate; } @keyframes dawn-rise { from { transform: translateY(4vmax) scale(.96); opacity: .88; } to { transform: translateY(0) scale(1.04); opacity: 1; } } /* ลำแสง — แฉกแสงสีทองพาดเฉียงลงซ้ายจากดวงแสง จางไปตามระยะ แกว่งเบา ๆ */ .dawn-rays { inset: -10vh -10vw auto auto; width: 120vw; height: 130vh; background: conic-gradient(from 196deg at 86% 8%, transparent 0deg, rgba(255, 200, 130, .42) 4deg, transparent 9deg, transparent 14deg, rgba(255, 208, 150, .36) 19deg, rgba(255, 208, 150, .36) 23deg, transparent 29deg, transparent 34deg, rgba(255, 196, 146, .32) 38deg, transparent 44deg, transparent 50deg, rgba(255, 212, 160, .28) 55deg, rgba(255, 212, 160, .28) 58deg, transparent 64deg, transparent 360deg); -webkit-mask-image: radial-gradient(90% 80% at 86% 8%, #000 8%, rgba(0, 0, 0, .5) 42%, transparent 78%); mask-image: radial-gradient(90% 80% at 86% 8%, #000 8%, rgba(0, 0, 0, .5) 42%, transparent 78%); transform-origin: 86% 8%; filter: blur(5px); animation: dawn-sway 28s ease-in-out infinite alternate; } @keyframes dawn-sway { from { transform: rotate(-2.5deg); opacity: .8; } to { transform: rotate(2.5deg); opacity: 1; } } /* ฝุ่นละอองในลำแสง — จุดทองกับจุดขาวเล็ก ๆ ลอยขึ้นช้า ๆ เห็นเฉพาะช่วงที่แสงส่อง */ .dawn-motes { inset: -10vh 0 -10vh 30vw; background-image: radial-gradient(circle at 18% 22%, rgba(236, 168, 84, .8) 0 1px, transparent 2.2px), radial-gradient(circle at 64% 70%, rgba(255, 255, 255, .95) 0 1.2px, transparent 2.6px), radial-gradient(circle at 40% 48%, rgba(240, 150, 110, .6) 0 .8px, transparent 1.8px), radial-gradient(circle at 82% 16%, rgba(230, 176, 96, .7) 0 1.4px, transparent 3px); background-size: 137px 149px, 211px 193px, 89px 103px, 263px 241px; -webkit-mask-image: radial-gradient(60% 55% at 78% 18%, #000 10%, rgba(0, 0, 0, .4) 50%, transparent 80%); mask-image: radial-gradient(60% 55% at 78% 18%, #000 10%, rgba(0, 0, 0, .4) 50%, transparent 80%); animation: dawn-float 40s linear infinite alternate; } @keyframes dawn-float { from { transform: translate(0, 0); } to { transform: translate(-3vw, -7vh); } } /* อากาศเช้า — ฟ้าซีดอมเทาที่มุมซ้ายล่าง ตัดกับแสงอุ่นให้หน้าไม่ส้มทั้งจอ */ .dawn-air { left: -18vw; bottom: -24vh; width: 70vw; height: 70vh; background: radial-gradient(45% 45% at 40% 60%, rgba(160, 204, 238, .5), transparent 72%), radial-gradient(40% 40% at 62% 44%, rgba(196, 200, 250, .26), transparent 72%); filter: blur(12px); } /* ลูกแก้วหน้าแรก → แสงเช้าทอง/พีช/ฟ้า · ตัวอักษรเส้นขอบของหัวเรื่องเป็นสีอำพันแดดเช้า */ :root[data-theme="morning"] .intro-orb { background: radial-gradient(34% 34% at 64% 36%, rgba(255, 210, 140, .85), transparent 70%), radial-gradient(44% 44% at 50% 52%, rgba(255, 160, 130, .42), transparent 72%), radial-gradient(46% 46% at 30% 70%, rgba(130, 190, 240, .45), transparent 74%); filter: blur(36px); } :root[data-theme="morning"] .intro-title .gx:last-child { -webkit-text-stroke-color: #c9733a; } :root[data-theme="morning"] .glitch-logo { filter: drop-shadow(0 18px 40px rgba(255, 150, 90, .26)) drop-shadow(0 6px 18px rgba(110, 180, 235, .22)); } @media (max-width: 820px) { .dawn-sky { height: 60vh; } .dawn-sun { width: 90vmax; height: 90vmax; top: -44vmax; right: -34vmax; } .dawn-motes { left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .05ms !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }