/* theme-festival-overrides.css ใช้ร่วมกับ main.css / gallery.css / theme-*.css วิธีใช้: หรือ theme_key อื่น ๆ */ /* ----------------------------- 0) BASE TOKENS (fallback) ----------------------------- */ :root{ --theme-name: "DEFAULT"; --accent-1:#ff2fb3; /* pink */ --accent-2:#7a2cff; /* violet */ --accent-3:#00e5ff; /* cyan */ --ink:#23102f; --muted: rgba(35,16,47,.72); --page-grad-1: rgba(255,47,179,.20); --page-grad-2: rgba(122,44,255,.14); --page-grad-3: rgba(0,229,255,.12); --page-base-1:#fff4fb; --page-base-2:#fff9f2; --page-base-3:#f3fbff; --card-bg: rgba(255,255,255,.78); --card-bd: rgba(35,16,47,.10); --chip-bg: rgba(255,255,255,.70); --chip-bd: rgba(35,16,47,.12); --btn-grad: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3)); /* Section presets – จะถูก override ต่อธีม */ --rooms-base:#fff6fb; --rooms-g1: rgba(255,47,179,.14); --rooms-g2: rgba(122,44,255,.10); --rooms-g3: rgba(0,229,255,.06); --pricing-base:#fff9ef; --pricing-g1: rgba(255,213,74,.18); --pricing-g2: rgba(255,154,60,.12); --pricing-g3: rgba(217,179,95,.12); --gallery-base:#f3fbff; --gallery-g1: rgba(0,229,255,.16); --gallery-g2: rgba(60,255,208,.10); --gallery-g3: rgba(122,44,255,.06); --news-base:#f7f3ff; --news-g1: rgba(122,44,255,.14); --news-g2: rgba(255,47,179,.10); --news-g3: rgba(0,229,255,.06); --contact-base:#fff7f0; --contact-g1: rgba(217,179,95,.16); --contact-g2: rgba(255,47,179,.10); --contact-g3: rgba(0,229,255,.06); /* กล่อง 3 แบบ */ --box-parch-bg: linear-gradient(180deg, rgba(255,252,246,.92), rgba(255,245,230,.82)); --box-parch-bd: rgba(220,160,90,.35); --box-aur-bg: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80)); --box-lux-bg: linear-gradient(180deg, #fff7f1, #fffdfb); --box-glow-a: rgba(255,180,90,.16); --box-glow-b: rgba(255,80,210,.10); --box-glow-c: rgba(0,229,255,.18); --lux-glow-a: rgba(255,90,214,.14); --lux-glow-b: rgba(0,229,255,.10); } /* ----------------------------- 1) APPLY THEME TO PAGE (ไม่ใช้ body::before/after กันชน) ----------------------------- */ body[class*="theme-"]{ color: var(--ink); background: radial-gradient(900px 700px at 12% 0%, var(--page-grad-1), transparent 55%), radial-gradient(900px 700px at 88% 10%, var(--page-grad-2), transparent 55%), radial-gradient(900px 700px at 60% 100%,var(--page-grad-3), transparent 60%), linear-gradient(180deg, var(--page-base-1), var(--page-base-2) 45%, var(--page-base-3) 100%) !important; } /* card 느낌ให้เห็นชัด */ body[class*="theme-"] .card, body[class*="theme-"] .panel, body[class*="theme-"] .glass, body[class*="theme-"] .roomCard, body[class*="theme-"] .priceCard, body[class*="theme-"] .newsCard{ background: var(--card-bg) !important; border-color: var(--card-bd) !important; } /* ปุ่มหลัก */ body[class*="theme-"] .btnPrimary, body[class*="theme-"] .pCtaBtn, body[class*="theme-"] .bookBtn{ background: var(--btn-grad) !important; color:#fff !important; border: 0 !important; } /* chip / tag ให้เห็นความต่าง */ body[class*="theme-"] .chip, body[class*="theme-"] .tag, body[class*="theme-"] .pill{ background: var(--chip-bg) !important; border: 1px solid var(--chip-bd) !important; } /* header ให้ต่าง */ body[class*="theme-"] header{ backdrop-filter: blur(14px); background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.40), rgba(255,255,255,.72)) !important; border-bottom: 1px solid rgba(0,0,0,.06); } /* ----------------------------- 2) SECTION THEMES (ของคุณ) ทำให้ “เปลี่ยนตามธีม” โดยใช้ var ----------------------------- */ .sectionTheme-room{ background: radial-gradient(900px 420px at 20% 10%, var(--rooms-g1), transparent 62%), radial-gradient(900px 420px at 85% 20%, var(--rooms-g2), transparent 62%), radial-gradient(700px 420px at 60% 95%, var(--rooms-g3), transparent 70%) !important; } .sectionTheme-pricing{ background: radial-gradient(900px 420px at 20% 10%, var(--pricing-g1), transparent 62%), radial-gradient(900px 420px at 85% 20%, var(--pricing-g2), transparent 62%), radial-gradient(700px 420px at 60% 95%, var(--pricing-g3), transparent 70%), linear-gradient(180deg, var(--pricing-base), rgba(255,255,255,.0)) !important; } .sectionTheme-gallery{ background: radial-gradient(900px 420px at 20% 10%, var(--gallery-g1), transparent 62%), radial-gradient(900px 420px at 85% 20%, var(--gallery-g2), transparent 62%), radial-gradient(700px 420px at 60% 95%, var(--gallery-g3), transparent 70%), linear-gradient(180deg, var(--gallery-base), rgba(255,255,255,.0)) !important; } .sectionTheme-news{ background: radial-gradient(900px 420px at 20% 10%, var(--news-g1), transparent 62%), radial-gradient(900px 420px at 85% 20%, var(--news-g2), transparent 62%), radial-gradient(700px 420px at 60% 95%, var(--news-g3), transparent 70%), linear-gradient(180deg, var(--news-base), rgba(255,255,255,.0)) !important; } .sectionTheme-contact{ background: radial-gradient(900px 420px at 20% 10%, var(--contact-g1), transparent 62%), radial-gradient(900px 420px at 85% 20%, var(--contact-g2), transparent 62%), radial-gradient(700px 420px at 60% 95%, var(--contact-g3), transparent 70%), linear-gradient(180deg, var(--contact-base), rgba(255,255,255,.0)) !important; } /* ----------------------------- 3) 3 BOX STYLES (ตามที่คุณมี) ทำให้แต่ละธีม “หน้าตาเปลี่ยน” ----------------------------- */ /* parchment */ .ji-theme-parchment{ background: radial-gradient(900px 420px at 20% 10%, var(--box-glow-a), transparent 62%), radial-gradient(900px 420px at 85% 20%, var(--box-glow-b), transparent 62%), var(--box-parch-bg); border: 1px solid var(--box-parch-bd); } /* aurora */ .ji-theme-aurora{ background: radial-gradient(900px 420px at 20% 15%, var(--box-glow-c), transparent 60%), radial-gradient(900px 420px at 80% 25%, var(--page-grad-2), transparent 62%), radial-gradient(700px 420px at 60% 90%, var(--page-grad-3), transparent 62%), var(--box-aur-bg); border: 1px solid var(--card-bd); } /* fantasy lux */ .ji-fantasy-lux{ background: radial-gradient(900px 600px at 25% 10%, var(--lux-glow-a), transparent 60%), radial-gradient(850px 520px at 85% 20%, var(--lux-glow-b), transparent 60%), var(--box-lux-bg); border: 1px solid rgba(0,0,0,.06); } /* ----------------------------- 4) THEME DEBUG (เห็นชัดว่าเปลี่ยนแล้ว) ----------------------------- */ .jiThemeBar{ position: fixed; left:0; right:0; top:0; height: 6px; z-index: 9999; background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3)); opacity: .95; pointer-events:none; } .jiThemeBadge{ position: fixed; right: 14px; bottom: 12px; z-index: 9999; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 700 12px/1.1 system-ui, sans-serif; letter-spacing: .06em; backdrop-filter: blur(8px); opacity: .75; pointer-events:none; } /* ========================================================= 5) THEME PRESETS (นี่แหละที่ทำให้ “ต่างกันชัด”) ใช้ body.theme-xxx ========================================================= */ /* DEFAULT */ body.theme-default{ --theme-name:"DEFAULT"; --accent-1:#ff2fb3; --accent-2:#7a2cff; --accent-3:#00e5ff; --page-grad-1: rgba(255,47,179,.18); --page-grad-2: rgba(122,44,255,.12); --page-grad-3: rgba(0,229,255,.10); } /* ANNIVERSARY (หรูทอง) */ body.theme-anniversary{ --theme-name:"ANNIVERSARY"; --accent-1:#d9b35f; --accent-2:#7a2cff; --accent-3:#ffd54a; --page-base-1:#fffaf0; --page-base-2:#fff6e6; --page-base-3:#fffdf7; --page-grad-1: rgba(217,179,95,.22); --page-grad-2: rgba(122,44,255,.10); --page-grad-3: rgba(255,213,74,.16); --card-bg: rgba(255,255,255,.82); --card-bd: rgba(217,179,95,.22); --btn-grad: linear-gradient(90deg, #d9b35f, #ffd54a, #7a2cff); --rooms-base:#fff7ea; --rooms-g1: rgba(217,179,95,.20); --rooms-g2: rgba(255,213,74,.16); --rooms-g3: rgba(122,44,255,.06); --pricing-base:#fff4e7; --pricing-g1: rgba(255,213,74,.22); --pricing-g2: rgba(217,179,95,.16); --pricing-g3: rgba(122,44,255,.06); --gallery-base:#fffaf2; --gallery-g1: rgba(217,179,95,.14); --gallery-g2: rgba(255,213,74,.14); --gallery-g3: rgba(0,229,255,.05); --news-base:#fff8ef; --news-g1: rgba(255,213,74,.16); --news-g2: rgba(217,179,95,.16); --news-g3: rgba(122,44,255,.06); --contact-base:#fff4ea; --contact-g1: rgba(217,179,95,.18); --contact-g2: rgba(255,213,74,.14); --contact-g3: rgba(0,229,255,.05); --box-parch-bd: rgba(217,179,95,.45); --box-glow-a: rgba(217,179,95,.18); --box-glow-b: rgba(255,213,74,.14); --lux-glow-a: rgba(217,179,95,.16); --lux-glow-b: rgba(122,44,255,.10); } /* VALENTINE (ชมพูหวาน) */ body.theme-valentine{ --theme-name:"VALENTINE"; --accent-1:#ff2fb3; --accent-2:#ff5ad6; --accent-3:#ffd54a; --page-base-1:#fff1fb; --page-base-2:#ffeef7; --page-base-3:#fff8ef; --page-grad-1: rgba(255,47,179,.26); --page-grad-2: rgba(255,90,214,.18); --page-grad-3: rgba(255,213,74,.12); --btn-grad: linear-gradient(90deg, #ff2fb3, #ff5ad6, #ffd54a); --rooms-base:#fff0fb; --rooms-g1: rgba(255,47,179,.22); --rooms-g2: rgba(255,90,214,.16); --rooms-g3: rgba(255,213,74,.08); --pricing-base:#fff6fb; --pricing-g1: rgba(255,90,214,.18); --pricing-g2: rgba(255,47,179,.14); --pricing-g3: rgba(255,213,74,.10); --gallery-base:#fff3fa; --gallery-g1: rgba(255,47,179,.16); --gallery-g2: rgba(255,90,214,.14); --gallery-g3: rgba(255,213,74,.08); --news-base:#fff2f8; --news-g1: rgba(255,47,179,.16); --news-g2: rgba(255,90,214,.16); --news-g3: rgba(255,213,74,.08); --contact-base:#fff5fb; --contact-g1: rgba(255,47,179,.16); --contact-g2: rgba(255,90,214,.14); --contact-g3: rgba(255,213,74,.10); --box-parch-bg: linear-gradient(180deg, rgba(255,250,252,.92), rgba(255,235,247,.86)); --box-glow-a: rgba(255,47,179,.18); --box-glow-b: rgba(255,90,214,.14); --lux-glow-a: rgba(255,47,179,.18); --lux-glow-b: rgba(255,213,74,.10); } /* HALLOWEEN (ส้ม-ม่วงลึกลับ) */ body.theme-halloween{ --theme-name:"HALLOWEEN"; --accent-1:#ff9a3c; --accent-2:#7a2cff; --accent-3:#00e5ff; --ink:#1a0b20; --page-base-1:#1a0b20; --page-base-2:#140818; --page-base-3:#12071a; --page-grad-1: rgba(255,154,60,.26); --page-grad-2: rgba(122,44,255,.18); --page-grad-3: rgba(0,229,255,.10); --card-bg: rgba(255,255,255,.10); --card-bd: rgba(255,154,60,.22); --chip-bg: rgba(0,0,0,.20); --chip-bd: rgba(255,154,60,.22); --btn-grad: linear-gradient(90deg, #ff9a3c, #7a2cff, #00e5ff); --rooms-base: rgba(20,8,24,.0); --rooms-g1: rgba(255,154,60,.18); --rooms-g2: rgba(122,44,255,.16); --rooms-g3: rgba(0,229,255,.06); --pricing-base: rgba(20,8,24,.0); --pricing-g1: rgba(255,154,60,.20); --pricing-g2: rgba(217,179,95,.08); --pricing-g3: rgba(122,44,255,.12); --gallery-base: rgba(18,7,26,.0); --gallery-g1: rgba(122,44,255,.16); --gallery-g2: rgba(0,229,255,.08); --gallery-g3: rgba(255,154,60,.10); --news-base: rgba(18,7,26,.0); --news-g1: rgba(255,154,60,.14); --news-g2: rgba(122,44,255,.16); --news-g3: rgba(0,229,255,.06); --contact-base: rgba(18,7,26,.0); --contact-g1: rgba(255,154,60,.14); --contact-g2: rgba(122,44,255,.16); --contact-g3: rgba(0,229,255,.06); --box-parch-bg: linear-gradient(180deg, rgba(20,8,24,.85), rgba(10,5,14,.92)); --box-parch-bd: rgba(255,154,60,.35); --box-glow-a: rgba(255,154,60,.22); --box-glow-b: rgba(122,44,255,.18); --box-glow-c: rgba(0,229,255,.10); --box-aur-bg: linear-gradient(180deg, rgba(20,8,24,.72), rgba(10,5,14,.88)); --box-lux-bg: linear-gradient(180deg, rgba(20,8,24,.78), rgba(10,5,14,.92)); --lux-glow-a: rgba(255,154,60,.18); --lux-glow-b: rgba(122,44,255,.16); } /* CELEBRATION (สีสันสด) */ body.theme-celebration{ --theme-name:"CELEBRATION"; --accent-1:#00e5ff; --accent-2:#ff2fb3; --accent-3:#ffd54a; --page-base-1:#f7fffe; --page-base-2:#fff1fb; --page-base-3:#fffdf1; --page-grad-1: rgba(0,229,255,.22); --page-grad-2: rgba(255,47,179,.20); --page-grad-3: rgba(255,213,74,.18); --btn-grad: linear-gradient(90deg, #00e5ff, #ff2fb3, #ffd54a); --rooms-base:#f3fffe; --rooms-g1: rgba(0,229,255,.22); --rooms-g2: rgba(255,47,179,.14); --rooms-g3: rgba(255,213,74,.12); --pricing-base:#fff8ef; --pricing-g1: rgba(255,213,74,.22); --pricing-g2: rgba(255,47,179,.14); --pricing-g3: rgba(0,229,255,.14); --gallery-base:#f2fbff; --gallery-g1: rgba(0,229,255,.22); --gallery-g2: rgba(60,255,208,.12); --gallery-g3: rgba(255,47,179,.10); --news-base:#fff3fa; --news-g1: rgba(255,47,179,.18); --news-g2: rgba(0,229,255,.14); --news-g3: rgba(255,213,74,.14); --contact-base:#fffdf1; --contact-g1: rgba(255,213,74,.18); --contact-g2: rgba(0,229,255,.14); --contact-g3: rgba(255,47,179,.12); } /* BUDDHIST (สงบ สุภาพ) */ body.theme-buddhist{ --theme-name:"BUDDHIST"; --accent-1:#d9b35f; --accent-2:#3cffd0; --accent-3:#7a2cff; --page-base-1:#fffdf7; --page-base-2:#fff8ef; --page-base-3:#f6fffb; --page-grad-1: rgba(217,179,95,.18); --page-grad-2: rgba(60,255,208,.14); --page-grad-3: rgba(122,44,255,.08); --btn-grad: linear-gradient(90deg, #d9b35f, #3cffd0, #7a2cff); --rooms-base:#fffdf6; --rooms-g1: rgba(217,179,95,.14); --rooms-g2: rgba(60,255,208,.12); --rooms-g3: rgba(122,44,255,.06); --pricing-base:#fff8ef; --pricing-g1: rgba(217,179,95,.18); --pricing-g2: rgba(255,213,74,.10); --pricing-g3: rgba(60,255,208,.10); --gallery-base:#f6fffb; --gallery-g1: rgba(60,255,208,.16); --gallery-g2: rgba(0,229,255,.10); --gallery-g3: rgba(217,179,95,.08); --news-base:#fffaf2; --news-g1: rgba(217,179,95,.14); --news-g2: rgba(122,44,255,.06); --news-g3: rgba(60,255,208,.10); --contact-base:#fffdf7; --contact-g1: rgba(217,179,95,.16); --contact-g2: rgba(60,255,208,.12); --contact-g3: rgba(122,44,255,.06); } /* SONGKRAN (น้ำ-สดใส) */ body.theme-songkran{ --theme-name:"SONGKRAN"; --accent-1:#00e5ff; --accent-2:#3cffd0; --accent-3:#ff9a3c; --page-base-1:#f1feff; --page-base-2:#f2fffb; --page-base-3:#fff8ef; --page-grad-1: rgba(0,229,255,.24); --page-grad-2: rgba(60,255,208,.18); --page-grad-3: rgba(255,154,60,.10); --btn-grad: linear-gradient(90deg, #00e5ff, #3cffd0, #ff9a3c); --rooms-base:#f0feff; --rooms-g1: rgba(0,229,255,.22); --rooms-g2: rgba(60,255,208,.16); --rooms-g3: rgba(255,154,60,.08); --pricing-base:#fffaf2; --pricing-g1: rgba(0,229,255,.18); --pricing-g2: rgba(60,255,208,.14); --pricing-g3: rgba(255,154,60,.08); --gallery-base:#f2fffb; --gallery-g1: rgba(60,255,208,.18); --gallery-g2: rgba(0,229,255,.16); --gallery-g3: rgba(122,44,255,.06); --news-base:#f1feff; --news-g1: rgba(0,229,255,.18); --news-g2: rgba(60,255,208,.14); --news-g3: rgba(255,154,60,.08); --contact-base:#fff8ef; --contact-g1: rgba(255,154,60,.12); --contact-g2: rgba(0,229,255,.14); --contact-g3: rgba(60,255,208,.12); } /* NEWYEAR (ทอง-น้ำเงิน-ชมพู) */ body.theme-newyear{ --theme-name:"NEWYEAR"; --accent-1:#ffd54a; --accent-2:#4b2cff; --accent-3:#ff2fb3; --page-base-1:#fffdf1; --page-base-2:#f4f2ff; --page-base-3:#fff1fb; --page-grad-1: rgba(255,213,74,.24); --page-grad-2: rgba(75,44,255,.16); --page-grad-3: rgba(255,47,179,.14); --btn-grad: linear-gradient(90deg, #ffd54a, #4b2cff, #ff2fb3); --rooms-base:#fffdf1; --rooms-g1: rgba(255,213,74,.20); --rooms-g2: rgba(75,44,255,.12); --rooms-g3: rgba(255,47,179,.10); --pricing-base:#f7f3ff; --pricing-g1: rgba(75,44,255,.16); --pricing-g2: rgba(255,213,74,.14); --pricing-g3: rgba(255,47,179,.10); --gallery-base:#fff1fb; --gallery-g1: rgba(255,47,179,.14); --gallery-g2: rgba(75,44,255,.12); --gallery-g3: rgba(255,213,74,.12); --news-base:#f4f2ff; --news-g1: rgba(75,44,255,.14); --news-g2: rgba(255,213,74,.14); --news-g3: rgba(255,47,179,.10); --contact-base:#fffdf1; --contact-g1: rgba(255,213,74,.18); --contact-g2: rgba(75,44,255,.12); --contact-g3: rgba(255,47,179,.10); } /* LOYKRATHONG (กลางคืน-โคมไฟ) */ body.theme-loykrathong{ --theme-name:"LOYKRATHONG"; --accent-1:#00e5ff; --accent-2:#7a2cff; --accent-3:#d9b35f; --ink:#eaf6ff; --page-base-1:#070a18; --page-base-2:#050818; --page-base-3:#0b0f25; --page-grad-1: rgba(0,229,255,.18); --page-grad-2: rgba(122,44,255,.18); --page-grad-3: rgba(217,179,95,.14); --card-bg: rgba(255,255,255,.10); --card-bd: rgba(0,229,255,.18); --chip-bg: rgba(0,0,0,.20); --chip-bd: rgba(217,179,95,.20); --btn-grad: linear-gradient(90deg, #00e5ff, #7a2cff, #d9b35f); --rooms-base: rgba(7,10,24,.0); --rooms-g1: rgba(0,229,255,.14); --rooms-g2: rgba(122,44,255,.16); --rooms-g3: rgba(217,179,95,.12); --pricing-base: rgba(5,8,24,.0); --pricing-g1: rgba(217,179,95,.18); --pricing-g2: rgba(0,229,255,.10); --pricing-g3: rgba(122,44,255,.14); --gallery-base: rgba(11,15,37,.0); --gallery-g1: rgba(122,44,255,.16); --gallery-g2: rgba(0,229,255,.12); --gallery-g3: rgba(217,179,95,.10); --news-base: rgba(11,15,37,.0); --news-g1: rgba(217,179,95,.14); --news-g2: rgba(122,44,255,.16); --news-g3: rgba(0,229,255,.10); --contact-base: rgba(7,10,24,.0); --contact-g1: rgba(0,229,255,.12); --contact-g2: rgba(217,179,95,.12); --contact-g3: rgba(122,44,255,.14); --box-parch-bg: linear-gradient(180deg, rgba(7,10,24,.84), rgba(2,4,12,.92)); --box-parch-bd: rgba(217,179,95,.35); --box-glow-a: rgba(217,179,95,.16); --box-glow-b: rgba(0,229,255,.10); --box-glow-c: rgba(122,44,255,.14); --box-aur-bg: linear-gradient(180deg, rgba(7,10,24,.72), rgba(2,4,12,.88)); --box-lux-bg: linear-gradient(180deg, rgba(7,10,24,.78), rgba(2,4,12,.92)); --lux-glow-a: rgba(0,229,255,.12); --lux-glow-b: rgba(217,179,95,.14); } .jiThemeBadge{ display:none !important; } /* .jiThemeBar{ display:none !important; } */ /* ========================= TOP BAR / HEADER OVERRIDES ========================= */ /* จับได้ทั้งกรณีคุณใช้ body class หรือ data-theme */ body[class*="theme-"], body[data-theme]{ --hdr-bg: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.40), rgba(255,255,255,.70)); --hdr-bd: rgba(0,0,0,.06); --pill-bg: rgba(255,255,255,.60); --pill-tx: rgba(35,16,47,.85); --pill-bd: rgba(0,0,0,.06); --pill-bg-active: rgba(255,47,179,.22); --pill-tx-active: rgba(35,16,47,.95); } /* ✅ แถบด้านบน/หัวเว็บ: บังคับทับให้ชนะ */ body[class*="theme-"] header, body[data-theme] header, body[class*="theme-"] .siteHeader, body[data-theme] .siteHeader{ background: var(--hdr-bg) !important; border-bottom: 1px solid var(--hdr-bd) !important; box-shadow: 0 10px 30px rgba(0,0,0,.06) !important; backdrop-filter: blur(16px) saturate(1.15) !important; } /* ✅ ปุ่มเมนูกลมๆ (ครอบคลุมหลายชื่อคลาส) */ body[class*="theme-"] header a, body[data-theme] header a, body[class*="theme-"] header .menu a, body[data-theme] header .menu a, body[class*="theme-"] header nav a, body[data-theme] header nav a, body[class*="theme-"] .nav a, body[data-theme] .nav a{ background: var(--pill-bg) !important; color: var(--pill-tx) !important; border: 1px solid var(--pill-bd) !important; } /* ✅ สถานะ active */ body[class*="theme-"] header a.active, body[data-theme] header a.active, body[class*="theme-"] header .menu a.active, body[data-theme] header .menu a.active, body[class*="theme-"] header nav a[aria-current="page"], body[data-theme] header nav a[aria-current="page"]{ background: var(--pill-bg-active) !important; color: var(--pill-tx-active) !important; border-color: rgba(255,255,255,.35) !important; } /* DEFAULT */ body.theme-default, body[data-theme="default"]{ --hdr-bg: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.42), rgba(255,255,255,.72)); --pill-bg-active: rgba(0,229,255,.18); } /* Anniversary (หรูทอง) */ body.theme-anniversary, body[data-theme="anniversary"]{ --hdr-bg: linear-gradient(90deg, rgba(255,248,230,.82), rgba(255,255,255,.38), rgba(255,248,230,.82)); --pill-bg: rgba(255,248,230,.70); --pill-bg-active: rgba(217,179,95,.28); } /* Valentine (ชมพูหวาน) */ body.theme-valentine, body[data-theme="valentine"]{ --hdr-bg: linear-gradient(90deg, rgba(255,226,244,.78), rgba(255,255,255,.36), rgba(255,226,244,.78)); --pill-bg: rgba(255,226,244,.62); --pill-bg-active: rgba(255,47,179,.26); } /* Halloween (ส้ม-ม่วง) */ body.theme-halloween, body[data-theme="halloween"]{ --hdr-bg: linear-gradient(90deg, rgba(35,16,47,.78), rgba(255,154,60,.18), rgba(35,16,47,.78)); --pill-bg: rgba(35,16,47,.55); --pill-tx: rgba(255,255,255,.92); --pill-bd: rgba(255,154,60,.22); --pill-bg-active: rgba(255,154,60,.28); --pill-tx-active: rgba(255,255,255,.98); } /* Celebration (สีสันสด) */ body.theme-celebration, body[data-theme="celebration"]{ --hdr-bg: linear-gradient(90deg, rgba(255,47,179,.18), rgba(0,229,255,.12), rgba(255,213,74,.18)); --pill-bg-active: rgba(0,229,255,.22); } /* Buddhist (สงบ สุภาพ) */ body.theme-buddhist, body[data-theme="buddhist"]{ --hdr-bg: linear-gradient(90deg, rgba(255,252,246,.88), rgba(255,255,255,.40), rgba(255,252,246,.88)); --pill-bg: rgba(255,252,246,.72); --pill-bg-active: rgba(217,179,95,.22); } /* Songkran (น้ำ-สดใส) */ body.theme-songkran, body[data-theme="songkran"]{ --hdr-bg: linear-gradient(90deg, rgba(210,250,255,.82), rgba(255,255,255,.36), rgba(210,250,255,.82)); --pill-bg-active: rgba(0,229,255,.26); } /* Newyear (ทอง-น้ำเงิน-ชมพู) */ body.theme-newyear, body[data-theme="newyear"]{ --hdr-bg: linear-gradient(90deg, rgba(217,179,95,.22), rgba(75,44,255,.10), rgba(255,47,179,.16)); --pill-bg-active: rgba(217,179,95,.28); } /* Loykrathong (กลางคืน-โคมไฟ) */ body.theme-loykrathong, body[data-theme="loykrathong"]{ --hdr-bg: linear-gradient(90deg, rgba(12,18,40,.78), rgba(0,229,255,.10), rgba(12,18,40,.78)); --pill-bg: rgba(12,18,40,.55); --pill-tx: rgba(255,255,255,.92); --pill-bd: rgba(0,229,255,.20); --pill-bg-active: rgba(255,213,74,.26); --pill-tx-active: rgba(255,255,255,.98); } /* ========================================================= THEME: hero waves + slider UI (global override) ========================================================= */ /* ตัวแปรค่าเริ่มต้น (DEFAULT) */ :root{ /* wave images (SVG data uri) */ --wave-top: none; --wave-bottom: none; /* wave intensity */ --wave-opacity: .85; --wave-blend: normal; /* หรือ overlay / soft-light */ /* panel / card on hero */ --hero-panel-bg: rgba(255,255,255,.55); --hero-panel-bd: rgba(0,0,0,.08); --hero-panel-text: rgba(35,16,47,.92); /* slider controls */ --slider-rail-bg: rgba(255,255,255,.55); --slider-rail-bd: rgba(0,0,0,.08); --dot-off: rgba(35,16,47,.28); --dot-on: rgba(255,47,179,.95); --arrow-bg: rgba(255,255,255,.75); --arrow-bd: rgba(0,0,0,.08); --arrow-tx: rgba(35,16,47,.9); } /* ✅ ใส่ wave ให้กับ hero (ปรับ selector ให้ตรงของคุณ) ลองเริ่มจาก #top / .hero / .heroWrap แล้วแต่โครงเว็บคุณ */ #top, .hero, .heroWrap{ position: relative; overflow: hidden; } /* wave TOP */ #top::before, .hero::before, .heroWrap::before{ content:""; position:absolute; left:0; top:0; width:100%; height:140px; /* ปรับความสูงลายโค้ง */ pointer-events:none; background: var(--wave-top); background-repeat: repeat-x; background-size: 900px 140px; /* ปรับ scale */ opacity: var(--wave-opacity); mix-blend-mode: var(--wave-blend); z-index: 5; } /* wave BOTTOM */ #top::after, .hero::after, .heroWrap::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:160px; pointer-events:none; background: var(--wave-bottom); background-repeat: repeat-x; background-size: 900px 160px; opacity: var(--wave-opacity); mix-blend-mode: var(--wave-blend); z-index: 5; } /* ✅ กรอบข้อความบน hero (ปรับ selector ให้ตรง) จากรูปของคุณเหมือนเป็นกล่อง glass ด้านขวา */ .heroPanel, .heroCard, .slidePanel, .captionCard{ background: var(--hero-panel-bg) !important; border: 1px solid var(--hero-panel-bd) !important; color: var(--hero-panel-text) !important; backdrop-filter: blur(12px); } /* ✅ ราง/พื้นหลังตัวเลื่อน */ .sliderRail, .dotsWrap, .sliderDots, .heroDots{ background: var(--slider-rail-bg) !important; border: 1px solid var(--slider-rail-bd) !important; } /* ✅ จุด (dot) */ .sliderDot, .dot, .heroDot{ background: var(--dot-off) !important; } .sliderDot.is-active, .dot.active, .heroDot.active{ background: var(--dot-on) !important; } /* ✅ ปุ่มลูกศรซ้าย/ขวา */ .sliderArrow, .heroArrow, .btnPrev, .btnNext{ background: var(--arrow-bg) !important; border: 1px solid var(--arrow-bd) !important; color: var(--arrow-tx) !important; } /* ========================================================= FESTIVAL OVERRIDES (hit real elements) โหลดไฟล์นี้หลัง main.css เสมอ ========================================================= */ /* ---------- THEME VARS (default) ---------- */ :root{ --wave-top-img: none; --wave-bottom-img: none; --wave-opacity: .95; --hero-panel-bg: rgba(255,255,255,.55); --hero-panel-bd: rgba(0,0,0,.10); --hero-panel-tx: rgba(35,16,47,.92); --slider-rail-bg: rgba(255,255,255,.55); --slider-rail-bd: rgba(0,0,0,.10); --dot-off: rgba(35,16,47,.28); --dot-on: rgba(255,47,179,.95); --arrow-bg: rgba(255,255,255,.75); --arrow-bd: rgba(0,0,0,.10); --arrow-tx: rgba(35,16,47,.92); } /* ========================================================= 1) TOP/BOTTOM WAVES (รองรับทั้ง pseudo และ element จริง) ========================================================= */ /* กรณี wave เป็น ::before/::after ของ hero */ #top::before, .hero::before, .heroWrap::before, .sliderHero::before{ background-image: var(--wave-top-img) !important; background-repeat: repeat-x !important; background-size: 1200px 160px !important; opacity: var(--wave-opacity) !important; } #top::after, .hero::after, .heroWrap::after, .sliderHero::after{ background-image: var(--wave-bottom-img) !important; background-repeat: repeat-x !important; background-size: 1200px 180px !important; opacity: var(--wave-opacity) !important; } /* กรณี wave เป็น element จริง (img/div/svg) */ .hero [class*="wave"] , .hero [class*="curve"], .heroWrap [class*="wave"], .heroWrap [class*="curve"], .sliderHero [class*="wave"], .sliderHero [class*="curve"], #top [class*="wave"], #top [class*="curve"]{ /* ถ้าเป็น div */ background-image: var(--wave-top-img) !important; /* default */ background-repeat: repeat-x !important; background-size: 1200px 180px !important; opacity: var(--wave-opacity) !important; } /* แยกบน/ล่างด้วยคำว่า top/bottom ใน class */ .hero [class*="wave"][class*="bottom"], .hero [class*="curve"][class*="bottom"], .heroWrap [class*="wave"][class*="bottom"], .heroWrap [class*="curve"][class*="bottom"], #top [class*="wave"][class*="bottom"], #top [class*="curve"][class*="bottom"]{ background-image: var(--wave-bottom-img) !important; } .hero [class*="wave"][class*="top"], .hero [class*="curve"][class*="top"], .heroWrap [class*="wave"][class*="top"], .heroWrap [class*="curve"][class*="top"], #top [class*="wave"][class*="top"], #top [class*="curve"][class*="top"]{ background-image: var(--wave-top-img) !important; } /* ถ้า wave เป็น ให้ใช้ filter (เพราะเปลี่ยนรูปด้วย CSS ไม่ได้) */ .hero img[class*="wave"], .hero img[class*="curve"], .heroWrap img[class*="wave"], .heroWrap img[class*="curve"], #top img[class*="wave"], #top img[class*="curve"]{ /* ทำให้เข้าธีมแบบเร็ว: โทน/สี/ความมืด */ filter: saturate(1.2) contrast(1.05) brightness(.95) !important; opacity: var(--wave-opacity) !important; } /* ========================================================= 2) HERO TEXT PANEL (กล่องข้อความกระจก) ========================================================= */ .hero .heroPanel * , .hero .heroCard * , .hero .slidePanel * , .hero .captionCard * , .hero [class*="panel"] * , .hero [class*="caption"] *{ color: inherit !important; } /* ========================================================= 3) SLIDER UI (ราง/จุด/ปุ่มลูกศร) ========================================================= */ .hero .sliderRail, .hero .dotsWrap, .hero .sliderDots, .hero .heroDots, .hero [class*="dots"], .hero [class*="rail"]{ background: var(--slider-rail-bg) !important; } /* จุด */ .hero .sliderDot, .hero .dot, .hero .heroDot, .hero [class*="dot"]{ background: var(--dot-off) !important; } .hero .sliderDot.is-active, .hero .dot.active, .hero .heroDot.active, .hero [class*="dot"].active, .hero [aria-current="true"]{ background: var(--dot-on) !important; } /* ลูกศร */ .hero .sliderArrow, .hero .heroArrow, .hero .btnPrev, .hero .btnNext, .hero [class*="prev"], .hero [class*="next"]{ background: var(--arrow-bg) !important; border: 1px solid var(--arrow-bd) !important; color: var(--arrow-tx) !important; } /* ซ่อน FX ทั้งหมดเป็นค่าเริ่มต้น */ .hfx, .skfx { display:none !important; } /* เปิดเฉพาะธีมที่ตรง */ body.theme-halloween .hfx { display:block !important; } body.theme-songkran .skfx { display:block !important; } /* กันไม่ให้ FX ไปดัน layout / บังคลิก */ .hfx, .skfx{ position: fixed; inset: 0; pointer-events: none; z-index: 50; /* ปรับตามเว็บคุณ */ }