/* ============================================================================ tt-theme-v2.css · มาตรฐานเดียวของทั้งระบบ — Brand Identity Playbook v1.0 (2026) ---------------------------------------------------------------------------- หลักการ: ไฟล์นี้เป็น "ชั้นทับ" ไฟล์เดียว ไม่แก้ home.css เลย ทุกกฎห่อด้วย html:not([data-ui="v1"]) → ความจำเพาะสูงกว่า :root เสมอ ต้องการกลับหน้าตาเดิม: ใส่ data-ui="v1" ที่แท็ก หรือเติม ?ui=v1 ท้าย URL (ดู tt-theme-v2.js) — ของเดิมยังทำงานอยู่จริงตลอดเวลา ไม่ใช่สำเนาที่ตายแล้ว กติกาตัวเลข (founder 2026-08-18): ทุกค่าเป็นจำนวนเต็ม หารด้วย 4 (และ 2) ลงตัว เอกสารอ้างอิง: portal.thailandtogether.app/ci/devices.html + /ci/tokens.html ============================================================================ */ /* ── ชั้นฐาน = มือถือ ────────────────────────────────────────────────────── */ html:not([data-ui="v1"]){ /* ── สี · 8 สีทางการ ─────────────────────────────────────────────────── */ --navy:#1B2A4A; /* Deep Royal Navy — สีฐาน/หมึก */ --magenta:#E42369; /* Magenta Pink — สีเน้นหลัก (ค่าเดิม ไม่เปลี่ยน) */ --coral:#FF7A3D; /* Vibrant Coral — สีเน้นรอง / hover ปุ่มรอง */ --marigold:#F3CE52; /* Warm Marigold */ --violet:#B233B2; /* Electric Violet */ --cyan:#88D4E5; /* Sky Cyan */ --mint:#A8E6CF; /* Soft Mint */ --bubble:#F77BA8; /* Bubblegum Pink */ /* ชื่อโทเคนเดิมที่โค้ดทั้งระบบอ้างอยู่ — คงชื่อไว้ เปลี่ยนแค่ค่า (--grape เดิมคือพลัม #2F133C · ตอนนี้ชี้ไปที่ Navy เพื่อไม่ต้องไล่แก้ทุกไฟล์) */ --pink:var(--bubble); --gold:var(--marigold); --sky:var(--cyan); --grape:var(--navy); --bg:#F7F5EF; /* ออฟไวท์ตามคู่มือ (เดิม #F7F1F4 อมชมพู) */ --bg-2:#EFF2F7; --ink:#1B2A4A; --ink-2:#4A5875; --ink-3:#7C88A0; --rule:#E2E6EE; --rule-2:#EFF1F6; --surface:#FFFFFF; --accent:var(--magenta); --scrim:rgba(27,42,74,.48); --shadow-card:0 8px 24px -12px rgba(27,42,74,.28); --glass-shadow:0 16px 38px -22px rgba(27,42,74,.42); /* ── ระยะ · ความมน (ปรับให้ลงตัวด้วย 4) ────────────────────────────── เดิม: pad 18 · gap 14 · radius 22 · blockpad 24 */ --pad:16px; --gap:12px; --radius:20px; --blockpad:16px; --gutter:16px; /* ระยะขอบหน้า */ --colgap:12px; /* ช่องไฟระหว่างคอลัมน์ */ --ctrlgap:8px; /* ระยะระหว่าง Control ในบล็อก */ --r-card:12px; /* ความมนการ์ดใน/ภาพ */ --r-field:12px; /* ความมนช่องกรอก/ปุ่มสี่เหลี่ยม */ --r-pill:999px; /* ── โครงหน้า ─────────────────────────────────────────────────────── */ --topbar:64px; --logo-h:48px; /* มือถือ: โลโก้เด่นขึ้น 40→48 (founder 2026-08-21) */ --slot:44px; /* ปุ่มไอคอนในแถบบน — นิ้ว */ --icon:24px; --dock-h:64px; --freeze-top:48px; --freeze-bottom:48px; --rail:0px; /* แถบข้าง — มีเฉพาะเดสก์ท็อป */ --aside:0px; /* ── เป้าแตะ · ปุ่ม (ขึ้นกับอุปกรณ์ · founder 2026-08-18) ─────────────── */ --tap:44px; /* นิ้ว 44 · แท็บเล็ต 48 · เมาส์ 36/40 · ห้ามต่ำกว่า 32 */ --btn-h:48px; --field-h:48px; --chip-h:32px; --fab:56px; /* ── ตัวอักษร ─────────────────────────────────────────────────────── */ --fsadd:0px; /* คุมจากไฟล์นี้ทั้ง 4 ชั้น (แทน responsive.css) */ --t-h1:48px; --l-h1:56px; --t-h2:32px; --l-h2:40px; --t-h3:24px; --l-h3:32px; --t-bl:20px; --l-bl:28px; --t-bd:16px; --l-bd:24px; --t-cap:12px; --l-cap:16px; } /* ── โหมดมืด · พื้นเนวี (เดิมพื้นพลัม) ────────────────────────────────── */ html:not([data-ui="v1"])[data-theme="dark"]{ --bg:#0F1829; --bg-2:#1B2A4A; --ink:#EDF1F8; --ink-2:#B6C2D8; --ink-3:#8593AD; --rule:#2C3E63; --rule-2:#24344F; --surface:#1B2A4A; --glass:color-mix(in oklab,#22355A 86%,transparent); --glass-2:color-mix(in oklab,#22355A 93%,transparent); --glass-brd:rgba(255,255,255,.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,.10); --glass-shadow:0 16px 40px -20px rgba(0,0,0,.7); --shadow-card:0 8px 24px -12px rgba(0,0,0,.55); --scrim:rgba(6,12,24,.62); } /* ── โหมดการเข้าถึง 4 โหมด · ปัดให้ลงตัวด้วย 4 ทั้งชุด ──────────────────── เดิม elder 22/18/26/20 · guided 20/16 · exec .98/16/11/18/18 */ html:not([data-ui="v1"])[data-access="elder"]{ --fs:1; --pad:24px; --gap:20px; --blockpad:24px; --radius:20px; --tap:48px; --btn-h:52px; --field-h:52px; } html:not([data-ui="v1"])[data-access="guided"]{ --fs:1; --pad:20px; --gap:16px; } html:not([data-ui="v1"])[data-access="exec"]{ --fs:1; --pad:16px; --gap:12px; --blockpad:16px; --radius:16px; --chip-h:28px; } /* ── สีประจำเมือง — ตรวจคอนทราสต์กับพื้นออฟไวท์/เนวีใหม่แล้ว ─────────────── */ html:not([data-ui="v1"])[data-tenant="chiangrai"]{--accent:#1E6B5A} html:not([data-ui="v1"])[data-tenant="udon"]{--accent:#C2542C} html:not([data-ui="v1"])[data-tenant="bangkok"]{--accent:#B0892C} /* ══ แท็บเล็ต 641–1024 ═════════════════════════════════════════════════ */ @media (min-width:641px) and (max-width:1024px){ html:not([data-ui="v1"]){ --fsadd:4px; --gutter:24px; --colgap:16px; --gap:16px; --blockpad:20px; --ctrlgap:12px; --topbar:72px; --logo-h:44px; --slot:48px; --icon:24px; --tap:48px; --btn-h:52px; --field-h:52px; --chip-h:36px; --fab:60px; --freeze-bottom:32px; } } /* ══ เดสก์ท็อป 1025–1440 ═══════════════════════════════════════════════ */ @media (min-width:1025px) and (max-width:1440px){ html:not([data-ui="v1"]){ --fsadd:8px; --gutter:32px; --colgap:20px; --gap:20px; --blockpad:24px; --ctrlgap:12px; --radius:24px; --r-card:16px; --topbar:64px; --logo-h:40px; --slot:36px; --icon:20px; --tap:32px; --btn-h:44px; --field-h:44px; --chip-h:28px; --freeze-top:0px; --freeze-bottom:0px; --rail:88px; } } /* ══ เดสก์ท็อป ≥1441 · ชั้นที่ 4 (ของใหม่) ══════════════════════════════ ตัวอักษรเท่ากับ 1280 — จอกว้างขึ้นให้ผลเป็นคอลัมน์และระยะขอบ ไม่ใช่ตัวหนังสือโต */ @media (min-width:1441px){ html:not([data-ui="v1"]){ --fsadd:8px; --gutter:40px; --colgap:24px; --gap:24px; --blockpad:24px; --ctrlgap:16px; --radius:24px; --r-card:16px; --topbar:72px; --logo-h:48px; --slot:40px; --icon:24px; --tap:32px; --btn-h:48px; --field-h:48px; --chip-h:32px; --freeze-top:0px; --freeze-bottom:0px; --rail:240px; --aside:320px; } /* กริดยังเป็น 12 คอลัมน์เท่าเดิม (บล็อกทั้งระบบเขียนด้วย data-cols 2/3/4) ความกว้างที่เพิ่มมาไหลไปที่ระยะขอบ + ช่องไฟ ตามค่าข้างบน */ html:not([data-ui="v1"]) main.zones{ gap:24px var(--gap) } } /* ══ จอสัมผัสที่กว้างเท่าเดสก์ท็อป — ยึดค่าฝั่งนิ้วเสมอ ══════════════════ */ @media (min-width:1025px) and (pointer:coarse){ html:not([data-ui="v1"]){ --slot:48px; --icon:24px; --tap:44px; --btn-h:48px; --field-h:48px; --chip-h:32px; } } /* ══ Docker → แถบข้างซ้าย บนเดสก์ท็อป ═══════════════════════════════════ มือถือ/แท็บเล็ต คงพฤติกรรมเดิมทุกอย่าง (แถบล่าง/พิลลอย) ต้องใช้ !important เพราะ home.css กำหนด max-width ของ .dock ด้วย !important */ @media (min-width:1025px){ html:not([data-ui="v1"]) .dock{ top:0; bottom:0; left:0; right:auto; transform:none; width:var(--rail) !important; max-width:var(--rail) !important; height:100vh; flex-direction:column; justify-content:center; gap:4px; border-radius:0 var(--radius) var(--radius) 0; border-right:1px solid var(--rule); /* ให้แถบข้างมีขอบชัด ไม่จมไปกับพื้นหน้า */ padding:16px 8px; } html:not([data-ui="v1"]) .dock a{ flex:0 0 auto; padding:8px 4px } html:not([data-ui="v1"]) .dock .mid{ align-self:center; margin:8px 0 } /* เนื้อหาเลื่อนพ้นแถบข้าง — ใช้ padding ที่ body เพื่อไม่กระทบ sticky ของ .top ★ เว้นที่ให้แถบข้าง "เฉพาะหน้าที่มีแถบข้างจริง" (founder ทัก 21 ส.ค. 2569) เดิมเว้นให้ทุกหน้า แต่ 60 จาก 114 หน้าไม่มี .dock (หน้าเดี่ยว/หน้าสาธารณะ เช่น qr.html · booth-survey.html · หน้าเครื่องมือหลังบ้าน) ผลคือหน้าพวกนั้นถูกดันขวา 88px (1280) / 240px (1920) โดยขวาเหลือ 0 → ดูเอียงขวา หัวแถบไม่เต็มความกว้าง ทั้งที่ในหน้าจัดแนวถูกแล้ว ใช้ @supports ครอบไว้ เบราว์เซอร์เก่าที่ไม่รู้จัก :has() จะได้พฤติกรรมเดิม ไม่ใช่เนื้อหามุดไปใต้แถบข้าง */ html:not([data-ui="v1"]) body{ padding-left:var(--rail) } @supports selector(body:has(.dock)){ html:not([data-ui="v1"]) body{ padding-left:0 } html:not([data-ui="v1"]) body:has(.dock){ padding-left:var(--rail) } } /* 1280 · แถบข้างกว้าง 88 = ไอคอนล้วน — ซ่อนชื่อเมนูไม่ให้ล้นออกนอกแถบ (font-size:0 ซ่อนเฉพาะข้อความ · svg ไม่ได้รับผลกระทบ · ตัวอักษรยังอยู่ใน DOM โปรแกรมอ่านหน้าจอจึงยังอ่านชื่อเมนูได้ตามเดิม) */ html:not([data-ui="v1"]) .dock a{ font-size:0; overflow:hidden } html:not([data-ui="v1"]) .dock a svg{ width:var(--icon); height:var(--icon) } html:not([data-ui="v1"]) .dock .mid .fab b{ font-size:0 } /* ปุ่มลอยมุมซ้ายล่างจัดตำแหน่งตาม .dock ด้วย JS — พอ dock ย้ายไปเป็นแถบข้าง ปุ่มพวกนี้จะไปทับแถบ ต้องดันให้พ้น (ต้องใช้ !important เพราะเป็น inline style จาก JS) */ html:not([data-ui="v1"]) #tt-demo-dock, html:not([data-ui="v1"]) .ttj-btn{ left:calc(var(--rail) + 16px) !important; } } /* ≥1441 · แถบข้างกว้าง 240 = ไอคอน + ชื่อเมนู */ @media (min-width:1441px){ html:not([data-ui="v1"]) .dock{ align-items:stretch; padding:24px 16px } html:not([data-ui="v1"]) .dock a{ flex-direction:row; gap:12px; justify-content:flex-start; padding:12px 16px; border-radius:var(--r-card); font-size:calc((14px + var(--fsadd,0px))*var(--fs,1)); overflow:visible; } html:not([data-ui="v1"]) .dock .mid{ align-self:stretch } html:not([data-ui="v1"]) .dock .mid .fab b{ font-size:calc((14px + var(--fsadd,0px))*var(--fs,1)) } } /* ══ พื้นฐานที่ยังไม่มีในระบบเดิม — เพิ่มให้ครบมาตรฐาน ══════════════════ */ /* โฟกัสคีย์บอร์ด: ต้องมีทุกปุ่ม/ลิงก์/ช่องกรอก (แบบร่าง 01/02 ไม่ได้กำหนดไว้) */ html:not([data-ui="v1"]) a:focus-visible, html:not([data-ui="v1"]) button:focus-visible, html:not([data-ui="v1"]) input:focus-visible, html:not([data-ui="v1"]) select:focus-visible, html:not([data-ui="v1"]) textarea:focus-visible, html:not([data-ui="v1"]) [tabindex]:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px; } /* เป้าแตะขั้นต่ำตามอุปกรณ์ — ใช้กับปุ่มไอคอนเดี่ยวที่ไม่มีข้อความ */ html:not([data-ui="v1"]) .iconbtn, html:not([data-ui="v1"]) .sq-btn{ min-width:var(--tap); min-height:var(--tap); } /* ══ โลโก้แถบบน — ใช้โทเคนแทนค่าตายตัว ══════════════════════════════════ เดิม: height:42px + transform:scale(1.3) (ทั้งคู่ไม่ลงตัวด้วย 4 และขยายเกินกล่อง) ใหม่: สูงตาม --logo-h ของแต่ละอุปกรณ์ (40/44/40/48) ไม่มีการย่อ-ขยายซ้อน */ html:not([data-ui="v1"]) .top .logo{ height:var(--logo-h); width:auto; margin-left:0; transform:none; object-fit:contain; } /* ══ ปุ่มเลือกเมือง — ตัดชื่อเมืองออก เหลือหมุด + ดรอปดาว ════════════════════ founder 2026-08-21: "ตัดคำว่าพัทยาออก เหลือแค่ไอคอน" — จังหวัดอื่นชื่อยาว จะได้ไม่ล้นแถบ · ปุ่มยังกดเปลี่ยนเมืองได้เหมือนเดิม (aria-label คงไว้) */ html:not([data-ui="v1"]) #tenantNm{display:none!important} html:not([data-ui="v1"]) #tenantBtn{gap:4px} /* ══ รวมปุ่ม auth: ตัด "ลงทะเบียน" ออกจากแถบ — ไปอยู่ในดรอปดาวน์ของ "เข้าสู่ระบบ" (founder 2026-08-21 · แถวแรกแน่น) · home.js สร้างเมนู 3 รายการ ═════════════ */ html:not([data-ui="v1"]) #registerBtn{display:none!important} html:not([data-ui="v1"]) .tt-authmenu button:hover{background:var(--glass,rgba(0,0,0,.05))} /* ══ มือถือ: ปุ่มบทบาทแถวสอง "สลับบทบาท" → "บทบาท" (founder 2026-08-21) ════ .th/.en โชว์ทีละภาษาอยู่แล้ว → ซ่อนข้อความจริง (font-size:0) แล้ววาดคำสั้นที่ ::after ของ span ที่กำลังแสดง (ไทย=บทบาท · อังกฤษ=Role) — สลับภาษาแล้วยังถูก */ @media (max-width:640px){ html:not([data-ui="v1"]) #roleBtn .th{font-size:0;letter-spacing:0} html:not([data-ui="v1"]) #roleBtn .th::after{content:"บทบาท";font-size:calc((10px + var(--fsadd,0px))*var(--fs,1));letter-spacing:.02em} html:not([data-ui="v1"]) #roleBtn .en{font-size:0;letter-spacing:0} html:not([data-ui="v1"]) #roleBtn .en::after{content:"Role";font-size:calc((10px + var(--fsadd,0px))*var(--fs,1));letter-spacing:.02em} } /* ══ Docker บนมือถือ — ชื่อเมนู 6 อันเบียดกันจนตัวอักษรทับกัน ═══════════════ ของเดิมเป็นแบบนี้อยู่ก่อนแล้ว (ไม่ได้เกิดจากธีมใหม่) แต่ถือเป็นส่วนหนึ่งของ การทำให้เป็นมาตรฐานเดียว จึงแก้ไปพร้อมกัน: ตัดด้วย … แทนการทับกัน */ @media (max-width:640px){ html:not([data-ui="v1"]) .dock a{ min-width:0 } /* ตัดชื่อเมนูด้วย … เฉพาะ "ป้ายภาษาที่กำลังแสดง" เท่านั้น เดิมตั้ง display:block ให้ทั้ง .th และ .en พร้อมกัน → ทับ .en{display:none} ทำให้ไทย+อังกฤษโผล่ซ้อนกันในแถบล่าง (founder ทักด้วยภาพ 2026-08-20) ไทย=โชว์ .th · อังกฤษ/ภาษาอื่น(body.lang-en)=โชว์ .en · อีกภาษายังซ่อนตามเดิม */ html:not([data-ui="v1"]) body:not(.lang-en) .dock a > span.th, html:not([data-ui="v1"]) body.lang-en .dock a > span.en{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* ══ ไทล์ 8 กลุ่มหน้าแรก — แถบมืดล่างต้องแนบขอบภาพจริง (founder 2026-08-22) ═══════ อาการ: founder เห็น "ร่องสว่างลอดออกมา" ข้างแถบมืดล่างของทั้ง 8 ใบ วัดพิกเซลแล้ว ความสว่างของร่อง = 229 ตรงกับ --rule #E2E6EE เป๊ะ ⇒ ไม่ใช่ภาพลอด แต่เป็น "เส้นขอบ 1px ของการ์ดเอง" สาเหตุเชิงโครงสร้าง: .cell มี border:1px แต่ .bg / .sc / .ttd-catsearch วางด้วย inset:0 ซึ่งอ้างกับกรอบ "ด้านใน" เส้นขอบ (padding box) จึงไม่มีทางคลุมทับเส้นขอบได้เลย → เหลือเส้นสว่าง 1px คั่นตลอดแนว ที่ด้านบนมองไม่เห็นเพราะภาพสว่างอยู่แล้ว แต่ตัดกับแถบมืดล่างจึงเด่นชัด แก้ที่ต้นเหตุ: เอาเส้นขอบออก ให้เนื้อหาเต็มกรอบ 85x85 จริง (box-sizing:border-box อยู่แล้ว การเอา border ออกจึงไม่ขยับเลย์เอาต์ ภาพได้พื้นที่คืน 2px และแถบมืดแนบขอบล่างสนิท) กรอบเลือก .cell.sel ใช้ outline อยู่แล้ว ไม่ได้พึ่ง border นี้ */ @media (min-width:0px){ html:not([data-ui="v1"]) .map .cell{ border:0 } }