/** * ============================================================ * 🎨 Seasonal UI/UX Automation — Theme Stylesheet * ============================================================ * ระบบเปลี่ยนธีมอัตโนมัติตามฤดูกาล (Seasonal Marketing) * * ใช้ CSS Variable Override ผ่าน [data-theme] selector * เพื่อเปลี่ยนสีหลัก, พื้นหลัง, และองค์ประกอบที่เกี่ยวข้อง * * วิธีการทำงาน: * 1. seasonal-config.php กำหนด data-theme="" บน * 2. CSS นี้ override CSS variables ตาม data-theme * 3. ทุกหน้าที่โหลดไฟล์นี้จะธีมตามฤดูกาลอัตโนมัติ * * ฤดูกาล (ตาม seasonal-config.php): * - rainy (มิ.ย. - ต.ค.) → สีเย็น เทา/ฟ้า + เอฟเฟกต์ฝนตก * - winter (พ.ย. - ก.พ.) → สีหนาว ขาว/น้ำเงิน + เอฟเฟกต์หิมะ * - standard (ม.ค. - ก.พ., พ.ค. - พ.ค.) → ธีมมาตรฐาน ส้ม * * ประโยชน์ทางธุรกิจ (Business Context — สำหรับรายงานอาจารย์): * - สร้าง Visual Freshness → ผู้ใช้รู้สึกว่าเว็บไซต์ "มีชีวิต" และ "ทันสมัย" * - Seasonal Marketing → เพิ่ม Engagement ผ่านบรรยากาศที่เข้ากับเทศกาล * - Brand Perception → แสดงความใส่ใจในรายละเอียด เพิ่มความน่าเชื่อถือ * - ลดอาการ "Banner Blindness" → เปลี่ยนธีมทั้งหน้าแทนที่จะมีแค่ Banner * - Immersive UX → เอฟเฟกต์ฝน/หิมะสร้างประสบการณ์ที่ดื่มดำ น่าจดจำ * ============================================================ */ /* ===== ธีมมาตรฐาน (Standard) — ไม่มีเอฟเฟกต์พิเศษ ===== */ /* เป็นธีมเริ่มต้น ใช้สีส้มของแบรนด์ */ html[data-theme="standard"] body { /* ไม่ต้อง override อะไร — ใช้ค่าเริ่มต้นที่กำหนดใน style.css */ } /* ===== ฤดูฝน (Rainy): มิ.ย. - ต.ค. ===== */ /* สีเย็น เทา/ฟ้า ฝนตก สร้างความรู้สึกสงบ สดชื่น */ html[data-theme="rainy"] { --primary: #4a90d9; /* ฟ้าฝน */ --primary-hover: #5ba3ec; /* ฟ้าอ่อน hover */ --bg-dark: #0d1117; /* พื้นหลังเทาเข้ม */ --card-bg: #161b22; /* การ์ดสีเทาเข้ม */ --text-main: #e6edf3; /* ตัวหนังสือสีอ่อน */ --text-dim: #7d8590; /* ตัวหนังสือรอง */ --glass: rgba(22, 27, 34, 0.85); /* กระจกสีเทา */ --seasonal-accent: #74b9ff; /* สีฟ้าอ่อน */ --seasonal-gradient: linear-gradient(135deg, #4a90d9, #74b9ff); --blob-1: #4a90d9; /* บล็อบสีฟ้า */ --blob-2: #2d5a87; /* บล็อบสีน้ำเงินเข้ม */ --blob-3: #74b9ff; /* บล็อบสีฟ้าอ่อน */ } /* ===== ฤดูหนาว (Winter): พ.ย. - ก.พ. ===== */ /* สีหนาว ขาว/น้ำเงิน หิมะ สร้างความรู้สึกหรูหรา สงบ */ html[data-theme="winter"] { --primary: #6c5ce7; /* ม่วงน้ำเงิน */ --primary-hover: #a29bfe; /* ม่วงอ่อน hover */ --bg-dark: #0a0a14; /* พื้นหลังเข้ม */ --card-bg: #141428; /* การ์ดสีม่วงเข้ม */ --text-main: #f0f0ff; /* ตัวหนังสือสีขาวอมม่วง */ --text-dim: #8888aa; /* ตัวหนังสือรอง */ --glass: rgba(20, 20, 40, 0.85); /* กระจกสีม่วง */ --seasonal-accent: #dfe6e9; /* สีขาวหิมะ */ --seasonal-gradient: linear-gradient(135deg, #6c5ce7, #a29bfe); --blob-1: #6c5ce7; /* บล็อบสีม่วง */ --blob-2: #a29bfe; /* บล็อบสีม่วงอ่อน */ --blob-3: #dfe6e9; /* บล็อบสีขาว */ } /* ===== ส่วนกลาง: ใช้ CSS variables ที่ถูก override แล้ว ===== */ /* ปุ่มหลักใช้ gradient ตามฤดู */ .btn-main, .btn-buy-new { background: var(--seasonal-gradient, linear-gradient(135deg, var(--primary), var(--primary-hover))); } /* Blob animation ใช้สีตามฤดู */ .bg-blobs .blob-1 { background: var(--blob-1, #ff4b2b); } .bg-blobs .blob-2 { background: var(--blob-2, #a362ff); } .bg-blobs .blob-3 { background: var(--blob-3, #ff416c); } /* Seasonal Badge (แสดงฤดูกาลปัจจุบัน — ใช้ใน navbar/dashboard) */ .seasonal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--seasonal-gradient, linear-gradient(135deg, var(--primary), var(--primary-hover))); color: #fff; border: 1px solid rgba(255,255,255,0.1); } /* ===== Weather Overlay Effects ===== */ /* เอฟเฟกต์ฝนตก/หิมะตก — แสดงเบื้องหลัง ไม่กวนสายตา ไม่ขัดขวางการคลิก */ /* ใช้ pointer-events: none เพื่อให้คลิกผ่าน overlay ได้ */ /* ===== เอฟเฟกต์ฝนตก (Rain Effect) ===== */ /* สร้างเม็ดฝนหลายชั้นด้วย CSS pseudo-elements และ box-shadow เพื่อ performance */ .weather-overlay { position: fixed; inset: 0; z-index: 0; /* อยู่เบื้องหลังเนื้อหาทั้งหมด */ pointer-events: none; /* ไม่ขัดขวางการคลิก/โต้ตอบ */ overflow: hidden; } /* เม็ดฝน (ใช้ ::before เป็นเส้นฝนหลัก) */ .rain-drop { position: absolute; top: -20px; width: 2px; height: 70px; background: linear-gradient(to bottom, transparent, rgba(174, 214, 241, 0.6)); border-radius: 0 0 50% 50%; animation: rainFall linear infinite; } /* Keyframes: เม็ดฝนตกจากบนล่าง — ใช้ transform เพื่อ GPU acceleration */ @keyframes rainFall { 0% { transform: translateY(-100px); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(calc(100vh + 100px)); opacity: 0; } } /* สร้างเม็ดฝนหลายตัวด้วย CSS variables (ถูกกำหนดใน JS) */ .rain-drop:nth-child(1) { left: 5%; animation-duration: 1.2s; animation-delay: 0s; } .rain-drop:nth-child(2) { left: 12%; animation-duration: 1.5s; animation-delay: 0.3s; } .rain-drop:nth-child(3) { left: 20%; animation-duration: 1.1s; animation-delay: 0.7s; } .rain-drop:nth-child(4) { left: 28%; animation-duration: 1.6s; animation-delay: 0.1s; } .rain-drop:nth-child(5) { left: 35%; animation-duration: 1.3s; animation-delay: 0.5s; } .rain-drop:nth-child(6) { left: 42%; animation-duration: 1.4s; animation-delay: 0.9s; } .rain-drop:nth-child(7) { left: 50%; animation-duration: 1.0s; animation-delay: 0.2s; } .rain-drop:nth-child(8) { left: 58%; animation-duration: 1.7s; animation-delay: 0.6s; } .rain-drop:nth-child(9) { left: 65%; animation-duration: 1.2s; animation-delay: 0.4s; } .rain-drop:nth-child(10) { left: 72%; animation-duration: 1.5s; animation-delay: 0.8s; } .rain-drop:nth-child(11) { left: 80%; animation-duration: 1.1s; animation-delay: 0.3s; } .rain-drop:nth-child(12) { left: 88%; animation-duration: 1.6s; animation-delay: 0.15s; } .rain-drop:nth-child(13) { left: 15%; animation-duration: 1.8s; animation-delay: 0.45s; } .rain-drop:nth-child(14) { left: 45%; animation-duration: 1.3s; animation-delay: 0.55s; } .rain-drop:nth-child(15) { left: 75%; animation-duration: 1.4s; animation-delay: 0.25s; } .rain-drop:nth-child(16) { left: 92%; animation-duration: 1.2s; animation-delay: 0.75s; } .rain-drop:nth-child(17) { left: 32%; animation-duration: 1.5s; animation-delay: 0.65s; } .rain-drop:nth-child(18) { left: 62%; animation-duration: 1.1s; animation-delay: 0.35s; } .rain-drop:nth-child(19) { left: 8%; animation-duration: 1.7s; animation-delay: 0.85s; } .rain-drop:nth-child(20) { left: 55%; animation-duration: 1.0s; animation-delay: 0.5s; } /* ===== เอฟเฟกต์หิมะตก (Snow Effect) ===== */ /* เกล็ดหิมะใช้วงกลม + animation ช้าๆ + การกระพริบบาง */ .snow-flake { position: absolute; top: -10px; width: 8px; height: 8px; background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.3)); border-radius: 50%; opacity: 0; animation: snowFall linear infinite; box-shadow: 0 0 4px rgba(255,255,255,0.5); } /* Keyframes: เกล็ดหิมะตกช้าๆ + โยนไปมาเล็กน้อย (drift) */ @keyframes snowFall { 0% { opacity: 0; transform: translateX(0) translateY(-20px) rotate(0deg); } 10% { opacity: 0.8; } 50% { transform: translateX(20px) translateY(50vh) rotate(180deg); } 90% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(-10px) translateY(calc(100vh + 20px)) rotate(360deg); } } /* เกล็ดหิมะแต่ละตัว — ขนาด + ความเร็ว + delay ต่างกัน */ .snow-flake:nth-child(1) { left: 3%; width: 6px; height: 6px; animation-duration: 6s; animation-delay: 0s; } .snow-flake:nth-child(2) { left: 10%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 1s; } .snow-flake:nth-child(3) { left: 17%; width: 8px; height: 8px; animation-duration: 5s; animation-delay: 0.5s; } .snow-flake:nth-child(4) { left: 25%; width: 5px; height: 5px; animation-duration: 7s; animation-delay: 2s; } .snow-flake:nth-child(5) { left: 33%; width: 7px; height: 7px; animation-duration: 6.5s; animation-delay: 0.8s; } .snow-flake:nth-child(6) { left: 40%; width: 4px; height: 4px; animation-duration: 9s; animation-delay: 1.5s; } .snow-flake:nth-child(7) { left: 48%; width: 6px; height: 6px; animation-duration: 5.5s; animation-delay: 0.3s; } .snow-flake:nth-child(8) { left: 55%; width: 8px; height: 8px; animation-duration: 7.5s; animation-delay: 2.5s; } .snow-flake:nth-child(9) { left: 62%; width: 5px; height: 5px; animation-duration: 6s; animation-delay: 1.2s; } .snow-flake:nth-child(10) { left: 70%; width: 7px; height: 7px; animation-duration: 8.5s; animation-delay: 0.7s; } .snow-flake:nth-child(11) { left: 78%; width: 4px; height: 4px; animation-duration: 5s; animation-delay: 1.8s; } .snow-flake:nth-child(12) { left: 85%; width: 6px; height: 6px; animation-duration: 7s; animation-delay: 0.4s; } .snow-flake:nth-child(13) { left: 92%; width: 8px; height: 8px; animation-duration: 9.5s; animation-delay: 2.2s; } .snow-flake:nth-child(14) { left: 8%; width: 5px; height: 5px; animation-duration: 6.5s; animation-delay: 1.6s; } .snow-flake:nth-child(15) { left: 36%; width: 7px; height: 7px; animation-duration: 8s; animation-delay: 0.9s; } .snow-flake:nth-child(16) { left: 58%; width: 4px; height: 4px; animation-duration: 5.5s; animation-delay: 2.8s; } .snow-flake:nth-child(17) { left: 73%; width: 6px; height: 6px; animation-duration: 7.2s; animation-delay: 0.6s; } .snow-flake:nth-child(18) { left: 88%; width: 5px; height: 5px; animation-duration: 6.8s; animation-delay: 1.4s; } .snow-flake:nth-child(19) { left: 22%; width: 8px; height: 8px; animation-duration: 9s; animation-delay: 2.6s; } .snow-flake:nth-child(20) { left: 44%; width: 6px; height: 6px; animation-duration: 5.8s; animation-delay: 0.2s; } /* ===== Responsive: ลดจำนวนเอฟเฟกต์บนมือถือเพื่อ performance ===== */ @media (max-width: 768px) { .rain-drop:nth-child(n+13), .snow-flake:nth-child(n+11) { display: none; /* ซ่อนเม็ดฝน/หิมะครึ่งหลังบนมือถือ */ } } /* ===== Reduced Motion: ปิดเอฟเฟกต์สำหรับผู้ใช้ที่ไวต่อการเคลื่อนไหว ===== */ @media (prefers-reduced-motion: reduce) { .rain-drop, .snow-flake { animation-duration: 20s !important; /* ช้าลงมาก */ opacity: 0.3 !important; /* จางลง */ } }