/* ===================================================================== * theme.css — ระบบธีมทั้งหมดอยู่ในไฟล์นี้ไฟล์เดียว * * เปลี่ยนสีทั้งระบบ = แก้ตัวแปรใน :root และ preset ด้านล่าง * ใส่ธีมด้วยการเติม class ที่ : * ← ฝั่งผู้เข้าร่วม * ← ฝั่งเจ้าหน้าที่ * ← ฝั่ง admin / developer * ===================================================================== */ /* ---------- ฟอนต์ self-host (ห้ามโหลดจาก Google Fonts) ---------- */ @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap; src:url('../assets/fonts/NotoSansThai-400-thai.woff2') format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap; src:url('../assets/fonts/NotoSansThai-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap; src:url('../assets/fonts/NotoSansThai-500-thai.woff2') format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap; src:url('../assets/fonts/NotoSansThai-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap; src:url('../assets/fonts/NotoSansThai-600-thai.woff2') format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap; src:url('../assets/fonts/NotoSansThai-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap; src:url('../assets/fonts/NotoSansThai-700-thai.woff2') format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap; src:url('../assets/fonts/NotoSansThai-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:800;font-display:swap; src:url('../assets/fonts/NotoSansThai-800-thai.woff2') format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:800;font-display:swap; src:url('../assets/fonts/NotoSansThai-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;} /* ===================================================================== * ตัวแปรร่วม — ไม่ขึ้นกับธีม * ===================================================================== */ :root{ --font: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ระยะและรูปทรง (สเปก: ปุ่มขั้นต่ำ 48px, มุมโค้ง 12–20px) */ --tap-min: 48px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ขนาดตัวอักษร — ใหญ่กว่ามาตรฐาน อ่านกลางแดดได้ */ --fs-xs: 13px; --fs-sm: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 46px; --fs-huge: 72px; /* สีสถานะ — ใช้ร่วมทุกธีม (สากล: เขียว=สำเร็จ แดง=ผิดพลาด) */ --success: #059669; --success-ink: #ffffff; --danger: #DC2626; --danger-ink: #ffffff; --warning: #D97706; --info: #0369A1; --shadow-sm: 0 2px 8px rgba(8,32,22,.10); --shadow-md: 0 8px 24px rgba(8,32,22,.14); --shadow-lg: 0 18px 48px rgba(8,32,22,.22); --ease: cubic-bezier(.22,.61,.36,1); /* ---------- ขนาดโลโก้และแบนเนอร์ (แก้ 2 บรรทัดนี้ที่เดียวจบ) ---------- * --logo-h ความสูงโลโก้บนหัวหน้าแรก * --footban-w ความกว้างแบนเนอร์ท้ายเว็บ คิดเป็น % ของคอลัมน์เนื้อหา * (คอลัมน์กว้าง 520px → 50% = 260px) * อยากให้เล็กลง/ใหญ่ขึ้น ปรับตัวเลขตรงนี้ ไม่ต้องไปตามแก้ที่อื่น */ --logo-h: 132px; --footban-w: 50%; } /* ===================================================================== * PRESET 1 — theme-green : ฝั่งผู้เข้าร่วม * * ยึดสีจาก Key Visual ของงาน (ผู้จัดกำหนดมา 3 สี) * #1F6D57 เขียวเข้ม — ตัวอักษร ปุ่ม เส้นกราฟ * #D6FBEC มินต์อ่อน — พื้นหลัง ไล่สี * #F3FFE9 เขียวอมเหลืองอ่อน — พื้นหลังหลัก * * KV เป็นโทนสว่าง ธีมจึงเป็น "พื้นสว่าง ตัวอักษรเขียวเข้ม" * ค่าคอนทราสต์ที่วัดแล้ว (WCAG AA ต้องการ 4.5:1 สำหรับตัวอักษรปกติ) * #14503F บน #F3FFE9 = 9.0:1 ตัวอักษรหลักบนพื้น * #46705F บน #F3FFE9 = 5.3:1 ตัวอักษรรอง * #FFFFFF บน #1F6D57 = 6.2:1 ตัวอักษรบนปุ่ม * ทุกคู่ผ่าน AA — สำคัญเพราะงานจัดกลางแจ้ง อ่านจอกลางแดด * ===================================================================== */ .theme-green{ --brand-1: #1F6D57; /* KV เขียวเข้ม */ --brand-2: #2E8A6E; /* เขียวกลาง — ใช้ไล่สีและไอคอน */ --brand-3: #67C3A4; /* เขียวอ่อน */ --brand-4: #D6FBEC; /* KV มินต์ */ --brand-5: #F3FFE9; /* KV เขียวอมเหลืองอ่อน */ --aurora-a: rgba(214,251,236,.95); /* มินต์ */ --aurora-b: rgba(31,109,87,.20); /* หมอกเขียวเข้มจาง ๆ ให้มีมิติ */ --aurora-c: rgba(255,255,255,.90); /* ไฮไลต์ขาว */ --aurora-base: #F3FFE9; --surface: rgba(255,255,255,.88); --surface-solid: #FFFFFF; --surface-border: rgba(31,109,87,.14); --surface-sunk: #EAF9F1; --track: rgba(31,109,87,.12); /* รางของแท็บ/แถบความคืบหน้า */ --text: #123F32; /* บนการ์ดสีขาว */ --text-muted: #4A7A68; --text-on-bg: #14503F; /* บนพื้น aurora สว่าง */ --text-on-bg-muted: #46705F; --accent: var(--brand-1); --accent-ink: #FFFFFF; --accent-strong: #14503F; --focus-ring: rgba(31,109,87,.30); /* พื้นสว่างต้องใช้เงาอ่อนกว่าเดิม ไม่งั้นการ์ดดูสกปรก */ --shadow-sm: 0 2px 8px rgba(18,63,50,.07); --shadow-md: 0 8px 24px rgba(18,63,50,.10); --shadow-lg: 0 18px 44px rgba(18,63,50,.16); } /* ===================================================================== * PRESET 2 — theme-red : ฝั่งเจ้าหน้าที่ * แยกสีชัดเจนเพื่อให้เจ้าหน้าที่รู้ทันทีว่าเปิดหน้าไหน ลดการกดผิด * ===================================================================== */ .theme-red{ --brand-1: #7F1D1D; --brand-2: #DC2626; --brand-3: #F87171; --brand-4: #FCA5A5; --brand-5: #FEE2E2; --aurora-a: rgba(220,38,38,.55); --aurora-b: rgba(248,113,113,.42); --aurora-c: rgba(252,165,165,.35); --aurora-base: #4A0F0F; --surface: rgba(255,255,255,.96); --surface-solid: #FFFFFF; --surface-border: rgba(255,255,255,.5); --surface-sunk: #F8F1F1; --track: rgba(0,0,0,.18); --text: #2A1010; --text-muted: #7C5B5B; --text-on-bg: #FFFFFF; --text-on-bg-muted: rgba(255,255,255,.82); --accent: #B91C1C; --accent-ink: #FFFFFF; --accent-strong: #7F1D1D; --focus-ring: rgba(248,113,113,.45); } /* ===================================================================== * PRESET 3 — theme-graphite : superadmin / developer * ===================================================================== */ .theme-graphite{ --brand-1: #0F172A; --brand-2: #1E293B; --brand-3: #334155; --brand-4: #475569; --brand-5: #94A3B8; --aurora-a: rgba(51,65,85,.60); --aurora-b: rgba(30,41,59,.50); --aurora-c: rgba(71,85,105,.40); --aurora-base: #0B1220; --surface: rgba(255,255,255,.97); --surface-solid: #FFFFFF; --surface-border: rgba(255,255,255,.35); --surface-sunk: #F1F5F9; --track: rgba(0,0,0,.18); --text: #0F172A; --text-muted: #64748B; --text-on-bg: #F8FAFC; --text-on-bg-muted: rgba(248,250,252,.78); --accent: #334155; --accent-ink: #FFFFFF; --accent-strong: #0F172A; --focus-ring: rgba(148,163,184,.45); } /* ===================================================================== * พื้นหลัง Aurora — radial-gradient หลายจุดซ้อนกัน ไม่ใช่ linear แบนๆ * ===================================================================== */ .aurora{ position: fixed; inset: 0; z-index: -1; background-color: var(--aurora-base); background-image: radial-gradient(58% 46% at 14% 8%, var(--aurora-a) 0%, transparent 62%), radial-gradient(52% 40% at 88% 14%, var(--aurora-b) 0%, transparent 60%), radial-gradient(70% 50% at 50% 104%, var(--aurora-c) 0%, transparent 64%), radial-gradient(46% 34% at 78% 72%, var(--aurora-a) 0%, transparent 58%); background-repeat: no-repeat; } /* ชั้นเบลอนุ่ม ๆ ทับอีกที ทำให้ขอบ gradient ไม่คม */ .aurora::after{ content:''; position:absolute; inset:-12%; backdrop-filter: blur(72px); -webkit-backdrop-filter: blur(72px); } /* จอแคบ: gradient ถูกบีบจนดูทึบ เพิ่มความสดและกระจายจุดให้ถี่ขึ้น */ @media (max-width:640px){ .aurora{ background-image: radial-gradient(78% 34% at 10% 4%, var(--aurora-a) 0%, transparent 66%), radial-gradient(72% 30% at 96% 16%, var(--aurora-b) 0%, transparent 64%), radial-gradient(96% 38% at 50% 100%, var(--aurora-c) 0%, transparent 68%), radial-gradient(66% 26% at 88% 60%, var(--aurora-a) 0%, transparent 62%); } .aurora::after{ backdrop-filter: blur(54px); -webkit-backdrop-filter: blur(54px); } } /* ลาย pattern ของแบรนด์ (ถ้ามีไฟล์) */ .aurora.has-pattern::before{ content:''; position:absolute; inset:0; opacity:.06; background-image: var(--bg-pattern-url); background-size: 420px; } @media (prefers-reduced-motion: no-preference){ .aurora{ animation: auroraDrift 26s var(--ease) infinite alternate; } @keyframes auroraDrift{ from{ background-position: 0% 0%, 100% 0%, 50% 100%, 80% 70%; } to { background-position: 8% 6%, 92% 8%, 44% 94%, 72% 62%; } } }