/* ===================================================================== Full 9 - Website Themes 3 ธีมเริ่มต้น อิงเทรนด์สี Pantone 2026 - Pantone Color of the Year 2026: Cloud Dancer (11-4201) ขาวนวลโปร่งเบา เลือกธีมได้จากหลังบ้าน (backend/manage_theme.php) ธีมถูกใช้ผ่าน ===================================================================== */ /* ---------- 1) Cloud Dancer : สว่าง สะอาด ทันสมัย (ค่าเริ่มต้น) ---------- */ :root, html[data-theme="cloud"] { --primary-color: #B8862B; /* ทองอำพัน (accent) */ --secondary-color: #2F6F73; /* เขียวน้ำทะเลเข้ม */ --bg: #F4F2EE; /* Cloud Dancer */ --bg-alt: #FFFFFF; --surface: #FFFFFF; --text-dark: #1E2A32; --text-light: #5F6B73; --border: #E5E1DA; --header-bg: rgba(255,255,255,0.92); --footer-bg: #1E2A32; --footer-text: #F4F2EE; --hero-overlay: linear-gradient(180deg, rgba(20,30,36,0.15) 0%, rgba(20,30,36,0.55) 100%); --hero-text: #FFFFFF; --btn-text: #FFFFFF; --radius: 18px; --radius-sm: 10px; --shadow: 0 8px 30px rgba(30,42,50,0.08); --shadow-hover: 0 18px 40px rgba(30,42,50,0.14); --font: 'Prompt', 'Kanit', sans-serif; --title-weight: 600; } /* ---------- 2) Transformative Teal : โทนเข้ม พรีเมียม ---------- */ html[data-theme="teal"] { --primary-color: #3EC1B0; /* teal สว่าง */ --secondary-color: #E9C46A; /* อำพันอ่อน */ --bg: #0E2A30; --bg-alt: #133740; --surface: #17414B; --text-dark: #F4F2EE; /* Cloud Dancer ใช้เป็นสีตัวอักษร */ --text-light: #A9BDC2; --border: #224F59; --header-bg: rgba(14,42,48,0.92); --footer-bg: #0A1F24; --footer-text: #A9BDC2; --hero-overlay: linear-gradient(180deg, rgba(14,42,48,0.25) 0%, rgba(14,42,48,0.75) 100%); --hero-text: #FFFFFF; --btn-text: #0E2A30; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 30px rgba(0,0,0,0.30); --shadow-hover: 0 18px 45px rgba(0,0,0,0.40); --font: 'Kanit', 'Prompt', sans-serif; --title-weight: 500; } /* ---------- 3) Mocha Earth : อบอุ่น ธรรมชาติ เรียบง่าย ---------- */ html[data-theme="mocha"] { --primary-color: #A47864; /* Mocha Mousse */ --secondary-color: #C2703D; /* เทอร์ราคอตต้า */ --bg: #F3EBE3; --bg-alt: #FAF6F1; --surface: #FFFFFF; --text-dark: #3B2F2A; --text-light: #7A6A62; --border: #E6DAD0; --header-bg: rgba(250,246,241,0.94); --footer-bg: #3B2F2A; --footer-text: #F3EBE3; --hero-overlay: linear-gradient(180deg, rgba(59,47,42,0.10) 0%, rgba(59,47,42,0.60) 100%); --hero-text: #FFF9F3; --btn-text: #FFFFFF; --radius: 26px; --radius-sm: 14px; --shadow: 0 8px 28px rgba(59,47,42,0.10); --shadow-hover: 0 18px 40px rgba(59,47,42,0.18); --font: 'Sarabun', 'Prompt', sans-serif; --title-weight: 700; } /* ---------- ส่วนที่ทุกธีมใช้ร่วมกัน ---------- */ html { background: var(--bg); } body { font-family: var(--font); color: var(--text-dark); background: var(--bg); } .bg-light { background: var(--bg-alt); } .bg-white { background: var(--surface); } .section-title { font-weight: var(--title-weight); } ::selection { background: var(--primary-color); color: var(--btn-text); } /* ---------- 4) Graphite Tech : ดำกราไฟต์ + น้ำเงินไฟฟ้า (สำหรับ Gadget) ---------- */ html[data-theme="graphite"] { --primary-color: #4F7DFF; /* electric blue */ --secondary-color: #22D3EE; /* cyan */ --bg: #0F1115; --bg-alt: #16191F; --surface: #1C2028; --text-dark: #F4F2EE; /* Cloud Dancer */ --text-light: #9AA3B2; --border: #262B35; --header-bg: rgba(15,17,21,0.85); --footer-bg: #0A0C10; --footer-text: #9AA3B2; --hero-overlay: linear-gradient(90deg, rgba(15,17,21,0.92) 0%, rgba(15,17,21,0.55) 55%, rgba(15,17,21,0.15) 100%); --hero-text: #FFFFFF; --btn-text: #FFFFFF; --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 12px 30px rgba(0,0,0,0.45); --shadow-hover: 0 0 0 1px rgba(79,125,255,0.35), 0 18px 45px rgba(0,0,0,0.55); --font: 'IBM Plex Sans Thai', 'Prompt', sans-serif; --title-weight: 600; } /* ---------- 5) Violet Pulse : ขาวมินิมอล + ม่วงสด (สไตล์แบรนด์เทคสากล) ---------- */ html[data-theme="pulse"] { --primary-color: #6D5DF6; /* vivid violet */ --secondary-color: #FF6B4A; /* coral */ --bg: #FFFFFF; --bg-alt: #F6F5FB; --surface: #FFFFFF; --text-dark: #101223; --text-light: #5B6072; --border: #E6E6F0; --header-bg: rgba(255,255,255,0.88); --footer-bg: #101223; --footer-text: #B9BCCB; --hero-overlay: linear-gradient(90deg, rgba(16,18,35,0.85) 0%, rgba(16,18,35,0.45) 55%, rgba(16,18,35,0.10) 100%); --hero-text: #FFFFFF; --btn-text: #FFFFFF; --radius: 20px; --radius-sm: 12px; --shadow: 0 2px 12px rgba(16,18,35,0.06); --shadow-hover: 0 16px 40px rgba(109,93,246,0.18); --font: 'IBM Plex Sans Thai', 'Prompt', sans-serif; --title-weight: 600; }