/* app.css — สไตล์เสริมนอกเหนือจาก Tailwind */ /* ═══════════ ฟอนต์หลัก: Kaisei (จาก github.com/FontKai-Kaisei/Kaisei, ลิขสิทธิ์ OFL) ═══════════ ไฟล์ฟอนต์ถูกผูกเข้าโปรเจกต์ที่ assets/fonts/ — ไม่ต้องพึ่ง CDN ภายนอก Kaisei Opti = เนื้อหาทั่วไป (โมเดิร์น หางพู่กันละมุน) Kaisei Decol = หัวข้อ/โลโก้ (เส้นตวัดโดดเด่นกว่า) หมายเหตุ: Kaisei มี glyph ละติน+ญี่ปุ่น (ไม่มีอักขระไทย) — ข้อความไทย fallback ไปที่ Noto Sans Thai อัตโนมัติ ทำให้ทุกภาษาแสดงผลสวยงามพร้อมกัน */ @font-face { font-family: 'Kaisei Opti'; src: url('../assets/fonts/KaiseiOpti-Regular.ttf') format('truetype'); font-weight: 300 400; font-display: swap; } @font-face { font-family: 'Kaisei Opti'; src: url('../assets/fonts/KaiseiOpti-Medium.ttf') format('truetype'); font-weight: 500 600; font-display: swap; } @font-face { font-family: 'Kaisei Opti'; src: url('../assets/fonts/KaiseiOpti-Bold.ttf') format('truetype'); font-weight: 700 900; font-display: swap; } @font-face { font-family: 'Kaisei Decol'; src: url('../assets/fonts/KaiseiDecol-Regular.ttf') format('truetype'); font-weight: 300 500; font-display: swap; } @font-face { font-family: 'Kaisei Decol'; src: url('../assets/fonts/KaiseiDecol-Bold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; } /* เนื้อหาทั้งเว็บ: เมนู แชท ฟอร์มคอมมิชชัน รายละเอียดทั้งหมด */ body { font-family: 'Kaisei Opti', 'Noto Sans Thai', serif; } /* หัวข้อทุกระดับ + โลโก้: ใช้ Kaisei Decol ให้คาแรกเตอร์พู่กันชัดขึ้น */ h1, h2, h3, h4, h5, h6 { font-family: 'Kaisei Decol', 'Kaisei Opti', 'Noto Sans Thai', serif; } /* ── Theme transition: ให้การสลับ Dark/Light ลื่นไหล ── */ body, header, main, section, div, button, input, textarea, label, span, p, h1, h2, h3, h4 { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* ═══════════ LIGHT MODE ═══════════ เทคนิค: default คือ Dark (คลาส slate-950/900/800 ตามปกติ) เมื่อ → override utility class หลักทั้งหมดด้วย selector ที่ specificity สูงกว่า ครอบคลุมทั้ง markup คงที่และ HTML ที่ JS สร้างขึ้นภายหลัง */ html.light { background: #f1f5f9; color: #0f172a; } /* พื้นผิว */ html.light .bg-slate-950 { background-color: #f1f5f9; } html.light .bg-slate-900 { background-color: #ffffff; } html.light .bg-slate-800 { background-color: #e2e8f0; } html.light .bg-slate-850 { background-color: #e2e8f0; } html.light .bg-slate-900\/90 { background-color: rgba(255, 255, 255, .92); } html.light .bg-slate-900\/60 { background-color: rgba(255, 255, 255, .75); } html.light .bg-slate-950\/60 { background-color: rgba(241, 245, 249, .8); } html.light .bg-slate-950\/70 { background-color: rgba(241, 245, 249, .85); } html.light .bg-slate-950\/40 { background-color: rgba(241, 245, 249, .6); } html.light .hover\:bg-slate-800:hover { background-color: #cbd5e1; } html.light .hover\:bg-slate-700:hover { background-color: #cbd5e1; } html.light .bg-indigo-950\/20 { background-color: rgba(224, 231, 255, .5); } /* ตัวอักษร */ html.light .text-slate-100 { color: #0f172a; } html.light .text-slate-200 { color: #1e293b; } html.light .text-slate-300 { color: #334155; } html.light .text-slate-400 { color: #475569; } html.light .text-slate-500 { color: #64748b; } html.light .text-slate-600 { color: #94a3b8; } html.light .hover\:text-white:hover { color: #0f172a; } html.light .text-white { color: #ffffff; } /* คงไว้สำหรับปุ่ม gradient */ html.light .pf-tab.text-white { color: #0f172a; } /* แท็บโปรไฟล์ที่ active */ html.light .pf-tab.border-white { border-color: #0f172a; } /* ═══════════ DARK MODE (ดำสนิท) ═══════════ ธีมที่ 3: html.theme-dark → เปลี่ยนพื้นผิวโทน slate (น้ำเงินเข้ม) เป็นดำล้วน ตัวอักษร/สี accent ใช้ของเดิมได้เลยเพราะ contrast บนพื้นดำยิ่งชัด */ html.theme-dark { background: #000000; color: #f1f5f9; } /* พื้นผิว */ html.theme-dark .bg-slate-950 { background-color: #000000; } html.theme-dark .bg-slate-900 { background-color: #0a0a0c; } html.theme-dark .bg-slate-800 { background-color: #1c1c22; } html.theme-dark .bg-slate-850 { background-color: #131318; } html.theme-dark .bg-slate-900\/90 { background-color: rgba(10, 10, 12, .92); } html.theme-dark .bg-slate-900\/60 { background-color: rgba(10, 10, 12, .7); } html.theme-dark .bg-slate-950\/60 { background-color: rgba(0, 0, 0, .65); } html.theme-dark .bg-slate-950\/70 { background-color: rgba(0, 0, 0, .75); } html.theme-dark .bg-slate-950\/40 { background-color: rgba(0, 0, 0, .5); } html.theme-dark .hover\:bg-slate-800:hover { background-color: #26262e; } html.theme-dark .hover\:bg-slate-700:hover { background-color: #303038; } /* เส้นขอบ */ html.theme-dark .border-slate-800 { border-color: #26262c; } html.theme-dark .border-slate-850 { border-color: #1c1c22; } html.theme-dark .border-slate-700 { border-color: #34343c; } html.theme-dark .border-slate-950 { border-color: #000000; } /* ขอบ avatar หน้าโปรไฟล์ */ /* องค์ประกอบพิเศษ */ html.theme-dark ::-webkit-scrollbar-track { background: #000000; } html.theme-dark ::-webkit-scrollbar-thumb { background: #2a2a32; } /* เส้นขอบ */ html.light .border-slate-800 { border-color: #e2e8f0; } html.light .border-slate-850 { border-color: #e2e8f0; } html.light .border-slate-700 { border-color: #cbd5e1; } html.light .border-slate-950 { border-color: #f1f5f9; } /* ขอบ avatar หน้าโปรไฟล์ */ /* องค์ประกอบพิเศษ */ html.light ::-webkit-scrollbar-track { background: #e2e8f0; } html.light ::-webkit-scrollbar-thumb { background: #94a3b8; } /* โทนแจ้งเตือน/สถานะ (emerald, rose, amber บนพื้นจาง) ให้เข้มขึ้นเล็กน้อยเพื่อ contrast */ html.light .text-emerald-300 { color: #047857; } html.light .text-emerald-400 { color: #059669; } html.light .text-rose-300 { color: #be123c; } html.light .text-amber-300 { color: #b45309; } html.light .text-indigo-300 { color: #4338ca; } html.light .text-violet-300 { color: #6d28d9; } html.light .text-cyan-300 { color: #0e7490; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #020617; } ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: #6366f1; } /* การ์ดในฟีด masonry ต้องไม่โดนตัดข้ามคอลัมน์ */ .masonry-card { break-inside: avoid; } .masonry-card img { transition: transform .35s ease; } .masonry-card:hover img { transform: scale(1.04); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .fade-up { animation: fadeUp .3s ease both; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { animation: spin .8s linear infinite; } /* 📢 Booth Announcer — แถบประกาศวิ่ง (ticker) บนหน้าโปรไฟล์บูธ */ .ticker-wrap { overflow: hidden; white-space: nowrap; } .ticker-text { display: inline-block; padding-left: 100%; animation: ticker-scroll 18s linear infinite; } .ticker-wrap:hover .ticker-text { animation-play-state: paused; } /* ชี้เมาส์เพื่อหยุดอ่าน */ @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* 🎨 Branding — โลโก้ Navbar + ลายน้ำวิดีโอ (ติดตั้งไฟล์ด้วย scripts/setup-logos.sh) */ .nav-home-logo { object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); /* ให้ wordmark เด่นบนธีมมืดทั้งสอง */ } html.light .nav-home-logo { filter: none; } /* ธีมสว่างไม่ต้องมีเงา */ .video-watermark { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; opacity: .55; pointer-events: none; /* ไม่บังการแตะเล่น/หยุดวิดีโอ */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }