/* ========================================================================== Mythos RO — ม่านโหลดตอนเข้าเว็บครั้งแรก (BOOT / INTRO) ========================================================================== ★★ ไฟล์เดียว ใช้ร่วมกันทั้งธีมใหม่และหน้าธีมเก่า — แก้ที่นี่ที่เดียวเห็นผลทั้งเว็บ ทำไมต้องแยกออกมาจาก mythos-horizontal.css (16 ส.ค. 2569) หน้าธีมเก่า (news/* · event/* · download.php) ต้องมีม่านโหลด + โลโก้ชุดเดียวกับทั้งเว็บ แต่จะให้หน้าพวกนั้นโหลด mythos-horizontal.css ทั้งไฟล์ไม่ได้ — กฎของธีมใหม่ (body, .card, .btn, a …) จะไปทับหน้าตาเดิมของหน้าเก่าจนเละทั้งหน้า จึงตัดเฉพาะบล็อกม่านโหลดมาไว้ที่นี่ แล้วให้ทั้งสองฝั่งโหลดไฟล์เดียวกัน ★ ตัวแปรสี/ฟอนต์ประกาศซ้ำไว้ใน .boot เอง (ค่าเดียวกับ :root ของ mythos-horizontal.css) หน้าธีมเก่าไม่มี :root ชุดนั้น ไม่ประกาศไว้ = ม่านไม่มีสีทอง/กรมท่าเลย ประกาศที่ .boot ไม่ใช่ที่ :root เพื่อไม่ให้ไปยุ่งกับตัวแปรของหน้าที่โหลดไฟล์นี้ ★ ธีมใหม่ต้องโหลดไฟล์นี้ "หลัง" mythos-horizontal.css เสมอ (ความเจาะจงเท่ากัน ตัวที่มาทีหลังชนะ) ซ่อนไว้เป็นค่าเริ่มต้น — ต้องมีคลาส boot-on ที่ ถึงจะโผล่ (mythos-boot.js เป็นคนใส่ให้ตั้งแต่ใน ) ปิด JS = ไม่ขึ้นเลย เข้าเว็บได้ตามปกติ ========================================================================== */ .boot { display: none; /* ★★ ขนาดตัวหนังสือในม่านเป็น px ล้วน ห้ามใช้ rem หน้าธีมเก่าโหลด assets/css/bootstrap.css ซึ่งตั้ง html { font-size: 10px } rem ทุกตัวจึงหดเหลือ 62.5% — "INITIALIZING MIDGARD" กลายเป็น 7.6px อ่านไม่ออก ตั้ง font-size/​font-family ที่ .boot ไว้ด้วย ม่านจะได้หน้าตาเท่ากันทุกหน้า ไม่ว่าหน้าที่มันไปเกาะจะตั้งฟอนต์อะไรไว้ (หน้าธีมเก่าใช้ Kanit ธีมใหม่ใช้ Noto) */ font-size: 16px; font-family: var(--font-body); /* ชุดสีของธีม — ต้องตรงกับ :root ใน mythos-horizontal.css */ --navy: #102c56; --navy-soft: #24456f; --blue: #196bd4; --gold: #eab84f; --gold-deep: #a97c1c; --shadow: 0 10px 24px rgba(18, 54, 92, .1); /* ★ Kanit อยู่ในสายสำรองด้วย — หน้าธีมเก่าโหลด Kanit ไว้แล้ว (eddga-main.css บรรทัด 4) แต่ไม่ได้โหลด Noto ตกไปถึง Tahoma เมื่อไหร่ ตัวไทยจะดูหลุดจากทั้งเว็บทันที (ตัวแปรคู่นี้ประกาศในขอบเขต .boot จึงไม่กระทบฟอนต์ของหน้าที่มันไปเกาะ) */ --font-head: 'Noto Serif Thai', Georgia, 'Times New Roman', serif; --font-body: 'Noto Sans Thai', Kanit, 'Segoe UI', Tahoma, sans-serif; } html.boot-on, html.boot-on body { overflow: hidden; } html.boot-on .boot { position: fixed; inset: 0; /* เผื่อเบราว์เซอร์เก่าที่ยังไม่รู้จัก inset (หน้าธีมเก่าเป็นกลุ่มเสี่ยงที่สุด) */ top: 0; right: 0; bottom: 0; left: 0; z-index: 200; display: grid; place-items: center; padding: 24px; text-align: center; background: radial-gradient(112% 82% at 50% -8%, #ffffff 0%, #e4f0ff 32%, #c3dbf8 66%, #a6c8ee 100%); opacity: 1; transition: opacity .5s ease, transform .5s ease; } /* แสงทองฟุ้งหลังโลโก้ — ขยับช้า ๆ ให้ฉากไม่นิ่งสนิท */ .boot::before, .boot::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .boot::before { width: min(760px, 130vw); height: min(760px, 130vw); background: radial-gradient(circle, rgba(255, 240, 195, .6) 0%, rgba(255, 232, 168, .18) 42%, rgba(255, 232, 168, 0) 70%); animation: bootAura 9s ease-in-out infinite; } /* ขอบจอมืดลงเล็กน้อย (vignette) — ดันสายตาเข้าหาโลโก้ตรงกลาง */ .boot::after { inset: 0; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border-radius: 0; background: radial-gradient(76% 62% at 50% 46%, rgba(16, 44, 86, 0) 40%, rgba(16, 44, 86, .16) 100%); animation: none; } @keyframes bootAura { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } } /* ปิดม่าน — จางออกพร้อมซูมเบา ๆ (ต้องเจาะจงเท่ากฎด้านบน ไม่งั้น opacity:1 ทับ แล้วม่านค้าง) */ html.boot-on .boot.is-done { opacity: 0; transform: scale(1.05); pointer-events: none; } .boot-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; animation: bootRise .6s cubic-bezier(.22, .61, .36, 1) both; } @keyframes bootRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- วงแหวนโลโก้ ---------- */ .boot-ring { position: relative; /* ★ ใหญ่ขึ้นจากของเดิม (184-250) พร้อมโลโก้ชุดใหม่ซึ่งเป็นภาพลายละเอียด ไม่ใช่ตัวอักษรล้วนแบบใบเก่า — เล็กกว่านี้อ่านบรรทัด Classic Episode 4.0 ไม่ออก */ width: clamp(196px, 26vw, 262px); height: clamp(196px, 26vw, 262px); display: grid; place-items: center; } /* วงประรอบนอก หมุนช้า */ .boot-dash { position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px dashed rgba(25, 107, 212, .5); animation: bootSpin 22s linear infinite; } /* เส้นโค้งทองวิ่งรอบ = ตัวบอกว่ากำลังทำงานอยู่ */ .boot-ring::before { content: ''; position: absolute; inset: 6%; top: 6%; right: 6%; bottom: 6%; left: 6%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .5); border-top-color: var(--gold); border-right-color: rgba(234, 184, 79, .55); filter: drop-shadow(0 0 9px rgba(234, 184, 79, .75)); animation: bootSpin 2.6s linear infinite; } /* วงเรืองแสงชั้นใน เต้นตามจังหวะ */ .boot-halo { position: absolute; inset: 12%; top: 12%; right: 12%; bottom: 12%; left: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9) 34%, rgba(234, 244, 255, .5) 62%, rgba(234, 244, 255, 0) 78%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 34px rgba(234, 184, 79, .45), inset 0 0 40px rgba(25, 107, 212, .12); animation: bootHalo 2.8s ease-in-out infinite; } /* ★★ สอง keyframes นี้ "หายไปจากไฟล์ธีมกลาง" มาตลอด (เพิ่งเจอ 16 ส.ค. 2569) วงประกับวงเรืองแสงจึงยืนนิ่งสนิททั้งที่โค้ดสั่ง animation ไว้ — เติมกลับแล้ว ห้ามลบอีก: ชื่อถูกอ้างถึง 3 จุดข้างบน (.boot-dash · .boot-ring::before · .boot-halo) */ @keyframes bootSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bootHalo { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .boot-orb { position: relative; z-index: 2; width: 68%; height: 68%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(232, 244, 255, .62)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 40px rgba(16, 44, 86, .18), inset 0 1px 0 rgba(255, 255, 255, .95); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); } /* ★ 84% ไม่ใช่ 88% ของเดิม — โลโก้ชุดใหม่สัดส่วน ~1.58:1 (ใบเก่า 2.07:1) จึงสูงกว่า วงกลมรับสี่เหลี่ยมได้กว้างสุดเท่ากับ sqrt(0.25 - (h/2)^2) x 2 ของด้านกว้าง ที่ 84% พอดีขอบวงพอดิบพอดี · ดันเกินกว่านี้มุมโลโก้จะยื่นพ้นขอบแก้ว */ .boot-orb img { width: 84%; height: auto; filter: drop-shadow(0 6px 14px rgba(16, 44, 86, .22)); } /* ---------- ข้อความ + หลอดโหลด + ปุ่มข้าม ---------- */ .boot-word { margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-deep); text-shadow: 0 1px 0 rgba(255, 255, 255, .9); } .boot-sub { margin-top: 8px; font-size: 13px; color: var(--navy-soft); } .boot-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; width: min(340px, 76vw); } .boot-num-wrap { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-head); font-size: 22px; font-weight: 700; color: #0f54b0; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); } .boot-num-wrap .unit { font-size: 15px; font-weight: 700; color: var(--gold-deep); } .boot-bar { width: 100%; height: 5px; border-radius: 5px; background: rgba(16, 44, 86, .14); overflow: hidden; } .boot-bar i { display: block; width: 0; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%); box-shadow: 0 0 12px rgba(234, 184, 79, .75); transition: width .2s linear; } .boot-skip { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding: 9px 20px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-soft); background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(228, 241, 255, .56)); border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); cursor: pointer; transition: transform .16s, box-shadow .16s, color .16s; } .boot-skip svg { width: 13px; height: 13px; } .boot-skip:hover { transform: translateY(-1px); color: var(--navy); box-shadow: var(--shadow), inset 0 1px 0 #fff; } @media (max-width: 560px) { .boot-word { margin-top: 22px; letter-spacing: .22em; } .boot-skip { margin-top: 20px; } } @media (prefers-reduced-motion: reduce) { .boot::before, .boot::after, .boot-in, .boot-dash, .boot-halo, .boot-ring::before { animation: none; } html.boot-on .boot { transition: none; } }