/* Approved homepage: platinum game-world composition, scoped to homepage only. */ .has-home-page{--oath-gold:#89682e;--oath-edge:#c7b17b;--oath-ink:#383a35;--oath-paper:#f6f3ec;background-color:#f0ede5;background-image:radial-gradient(ellipse at 50% 35%,#fffdf7aa,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23856b3c' opacity='.075' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");color:var(--oath-ink);font-family:"Microsoft JhengHei","PingFang TC",sans-serif} .has-home-page .realm-hero{min-height:660px;padding:72px max(calc((100vw - 1240px)/2),28px) 100px;display:flex;align-items:center;position:relative;background:#f0ede5;border-bottom:1px solid #bfa671;overflow:hidden} .has-home-page .realm-hero:after{background:linear-gradient(0deg,#f0ede5 0%,#f0ede522 18%,transparent 45%);pointer-events:none}.has-home-page .hero-copy{position:relative;z-index:1;max-width:610px;padding:0}.has-home-page .hero-kicker{display:inline-flex;align-items:center;gap:12px;padding:7px 13px;border:1px solid #bca46f;box-shadow:inset 0 0 0 2px #fff6;background:#f7f1e3b8;font-size:11px;line-height:1.5;letter-spacing:3px;color:#785c2c}.has-home-page .hero-kicker i{font-size:10px;font-style:normal;color:#a98745} /* 伺服器運作中 (亮綠燈並帶有微光暈) */ .has-home-page .hero-kicker.status-online i { color: #4CAF50; text-shadow: 0 0 6px rgba(76, 175, 80, 0.6); } /* 伺服器維護中 (亮紅燈並帶有微光暈) */ .has-home-page .hero-kicker.status-offline i { color: #F44336; text-shadow: 0 0 6px rgba(244, 67, 54, 0.6); } .has-home-page .hero-copy h1{font:900 clamp(56px,5.2vw,76px)/1.17 "PMingLiU","Noto Serif TC",serif;letter-spacing:5px;margin:22px 0 17px;color:#383c35;text-shadow:0 2px #fff,0 4px 12px #c6b38133}.has-home-page .hero-copy h1 em{font-style:normal;color:#95733d;text-shadow:0 2px #fff5,0 3px 0 #5d45221a}.has-home-page .hero-subtitle{display:block;color:#8c7856;font:10px/1.6 Georgia,serif;letter-spacing:3px}.has-home-page .hero-copy p{color:#53574e;font-size:15px;line-height:2;letter-spacing:.4px;max-width:430px;margin:25px 0 25px} .has-home-page .hero-actions{display:flex;gap:13px;flex-wrap:wrap}.has-home-page :is(.hero-actions,.oath-support) .button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:49px;min-width:180px;padding:12px 22px;border:1px solid #94733c;border-radius:0;background:linear-gradient(#d9c28d,#b49451);box-shadow:inset 0 0 0 2px #fff4,inset 0 4px 8px #fff3,0 3px 8px #60471520;color:#352811;font:700 16px/1.5 "PMingLiU",serif;letter-spacing:3px;text-shadow:0 1px #fff7}.has-home-page :is(.hero-actions,.oath-support) .button.secondary{background:linear-gradient(#fffdf6,#dfd5bf);border-color:#b5a078;color:#6d542d;box-shadow:inset 0 0 0 2px #fff8,0 3px 8px #60471510;text-shadow:0 1px #fff}.has-home-page :is(.hero-actions,.oath-support) .button:hover{filter:brightness(1.07)} .has-home-page .hero-tags{display:flex;gap:0;margin-top:23px;font-size:12px;color:#766444;letter-spacing:1px}.has-home-page .hero-tags span+span{border-left:1px solid #bbaa85;padding-left:18px;margin-left:18px}.has-home-page .hero-explore{display:inline-flex;align-items:center;gap:18px;color:#8a713f;font-size:10px;letter-spacing:3px;min-height:44px;margin-top:23px}.has-home-page .hero-explore span{font-size:17px;line-height:1}.has-home-page .hero-caption{right:max(calc((100vw - 1240px)/2),28px);bottom:92px;color:#6e5730;text-shadow:0 1px 10px #fff;font:11px Georgia,serif;letter-spacing:3px}.has-home-page .hero-caption span{font-size:12px;color:#6e5730} .has-home-page .portal.portal-wide{display:block;max-width:1296px;margin:0 auto;padding:0 28px 65px;position:relative;z-index:20}.has-home-page .portal-main{width:100%;min-width:0} .has-home-page .oath-frame{position:relative;border:1px solid #baa16a;border-radius:0;background:linear-gradient(135deg,#fffdf7f5,#eee6d5dc);box-shadow:inset 0 0 0 4px #fff7,inset 0 0 0 5px #d7c9a77d,0 5px 18px #5844210a} .has-home-page .oath-frame:before,.has-home-page .oath-frame:after{content:"";position:absolute;z-index:1;width:7px;height:7px;top:7px;background:linear-gradient(135deg,#ead7a5,#ad8742);border:1px solid #b99551;transform:rotate(45deg);pointer-events:none}.has-home-page .oath-frame:before{left:7px}.has-home-page .oath-frame:after{right:7px} .has-home-page .oath-ribbon { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -39px 0 0; padding: 15px 10px; background: linear-gradient(#faf6ec, #e9dfc8); } .has-home-page .oath-ribbon a { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 16px 30px; border-right: 1px solid #cdbd99; color: #655230; text-decoration: none; transition: background 0.3s ease; } .has-home-page .oath-ribbon a:last-child { border: 0; } .has-home-page .oath-ribbon .ribbon-content { display: flex; flex-direction: column; gap: 5px; } .has-home-page .oath-ribbon span { font-size: 11px; letter-spacing: 2px; color: #8a7a5c; } .has-home-page .oath-ribbon strong { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; color: #4a3b22; transition: transform 0.3s ease, color 0.3s ease; } .has-home-page .oath-ribbon .ribbon-icon { width: 32px; height: 32px; color: #ad8f56; flex-shrink: 0; transition: transform 0.3s ease, color 0.3s ease; } .has-home-page .oath-ribbon a:hover { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); } .has-home-page .oath-ribbon a:hover .ribbon-icon { color: #c49a4f; transform: scale(1.15); } .has-home-page .oath-ribbon a:hover strong { color: #a87f32; transform: translateX(4px); } .has-home-page .oath-section{margin:0;padding-top:66px;scroll-margin-top:26px}.has-home-page .oath-heading{text-align:center;margin:0 0 32px}.has-home-page .oath-heading h2{display:table;position:relative;font:700 27px/1.4 "PMingLiU",serif;letter-spacing:5px;color:#7b5c2b;margin:0 auto 13px;padding:12px 45px;background:linear-gradient(#fbf8ef,#dfd1b1);border-top:1px solid #ad9056;border-bottom:1px solid #ad9056;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);text-shadow:0 1px white}.has-home-page .oath-heading>span{font:10px/1.5 Georgia,serif;letter-spacing:4px;color:#8a806b}.has-home-page .oath-heading i{display:block;position:relative;width:220px;height:1px;background:linear-gradient(90deg,transparent,#b5a173,transparent);margin:22px auto 0}.has-home-page .oath-heading i:after{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:7px;height:7px;background:#b28e49;transform:rotate(45deg)} .has-home-page .oath-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.has-home-page .oath-feature{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 24px 24px;color:#45483f}.has-home-page .oath-emblem{display:grid;place-items:center;position:relative;width:64px;height:64px;margin:0 0 15px}.has-home-page .oath-emblem:before{content:"";position:absolute;inset:5px;border:1px solid #bd9f60;transform:rotate(45deg);background:linear-gradient(135deg,#e2d4b755,#fff7)}.has-home-page .oath-emblem svg{position:relative;width:35px;height:35px;fill:none;stroke:#98783b;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.has-home-page .oath-feature h3{font:700 24px/1.4 "PMingLiU",serif;letter-spacing:3px;color:#765b2d;margin:8px 0 6px}.has-home-page .oath-feature small{font:9px Georgia,serif;letter-spacing:2.5px;color:#95896f}.has-home-page .oath-feature p{font-size:14px;line-height:1.9;color:#66675b;margin:22px 0 17px}.has-home-page .oath-more{font-size:12px;color:#8b6b32;letter-spacing:1px;margin-top:auto;display:inline-flex;gap:18px;min-height:32px;align-items:center}.has-home-page .oath-feature:hover{border-color:#9b7739;background:linear-gradient(135deg,#fffdf8,#eadbbd)} .has-home-page .oath-guide-grid { display: grid; /* 修正1：將左右比例改為 1:1，並限制最大寬度為 1080px 且置中，解決左右太長的問題 */ grid-template-columns: 1fr 1fr; max-width: 1080px; margin: 0 auto; gap: 24px; } .has-home-page .oath-news, .has-home-page .oath-guides { padding: 25px 26px 15px; display: flex; flex-direction: column; justify-content: space-between; } .has-home-page .oath-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #beab7c; padding-bottom: 16px; margin-bottom: 2px; } .has-home-page .oath-panel-title h3 { font: 700 21px/1.4 "PMingLiU", serif; letter-spacing: 3px; color: #77613b; margin: 0; } .has-home-page .oath-panel-title a { font-size: 12px; color: #8b713e; } .has-home-page .oath-panel-title>span { font: 9px Georgia, serif; letter-spacing: 2px; color: #978666; } /* 重新設計底部提醒：改為滿版底欄樣式，將下方大片留白優雅填滿 */ .has-home-page .oath-news-note { margin: 20px -26px -15px -26px; padding: 12px 20px; background: linear-gradient(90deg, rgba(223, 209, 177, 0.15), rgba(223, 209, 177, 0.45) 50%, rgba(223, 209, 177, 0.15)); border-top: 1px dashed #dcae65; font-size: 12.5px; color: #7a6e57; text-align: center; border-radius: 0 0 4px 4px; } .has-home-page .oath-news-note a { color: #8c6d35; font-weight: 700; text-decoration: none; transition: color 0.2s ease, text-shadow 0.2s ease; } .has-home-page .oath-news-note a:hover { color: #b8860b; text-shadow: 0 0 6px rgba(184, 134, 11, 0.3); } .has-home-page .home-update { display: grid; grid-template-columns: 42px minmax(0, 1fr) 12px; gap: 15px; align-items: center; /* 修正2：將 padding 與 min-height 縮小，讓左側的 4 條公告更加緊湊俐落 */ padding: 11px 10px; border-bottom: 1px solid #e2d7c0; min-height: 64px; color: #4e5148; border-radius: 4px; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .has-home-page .update-type { display: grid; place-items: center; padding: 5px 2px; border: 1px solid #c5b182; font-size: 11px; color: #8b6c34; background: #efe6d2; border-radius: 2px; } .has-home-page .home-update strong { font-size: 14px; line-height: 1.65; font-weight: 500; transition: color 0.2s ease, transform 0.2s ease; } .has-home-page .home-update time { display: block; font: 11px/1.5 Georgia, serif; color: #968871; margin-top: 3px; letter-spacing: 1px; } .has-home-page .home-update b { font-size: 21px; color: #a98c55; font-weight: 400; transition: color 0.2s ease, transform 0.2s ease; } /* 微卡片懸浮效果：滑鼠移上去時，會有輕微凸起感與金光襯底 */ .has-home-page .home-update:hover { background-color: rgba(255, 253, 245, 0.85); box-shadow: 0 2px 8px rgba(184, 134, 11, 0.08); } .has-home-page .home-update:hover strong { color: #9c7836; transform: translateX(4px); } .has-home-page .home-update:hover b { color: #c49a4f; transform: translateX(3px); } .has-home-page .oath-guides>a{display:flex;gap:16px;align-items:center;min-height:90px;padding:18px 0;border-bottom:1px solid #ddd2ba;color:#4e5148}.has-home-page .oath-guides>a:last-child{border:0}.has-home-page .guide-no{font:italic 27px Georgia,serif;color:#b29a67;flex-shrink:0}.has-home-page .oath-guides strong{display:block;font-size:15px;font-weight:600;color:#645439}.has-home-page .oath-guides small{display:block;font-size:12px;color:#857d6a;margin-top:5px}.has-home-page .oath-guides b{margin-left:auto;color:#a78b55;font-weight:400;font-size:20px}.has-home-page .oath-guides a:hover strong{color:#9c7836} .has-home-page .oath-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #c9b787;background:linear-gradient(#fffcf5c9,#eee7d8c9);padding:24px 0;box-shadow:inset 0 0 0 4px #fff6}.has-home-page .oath-step{display:flex;gap:17px;align-items:center;padding:5px 24px;color:#5c594c;border-right:1px solid #d8c8a1;min-width:0}.has-home-page .oath-step:last-child{border:0}.has-home-page .oath-step>span{font:36px Georgia,serif;color:#b59a61}.has-home-page .oath-step h3{font:700 21px "PMingLiU",serif;letter-spacing:2px;color:#7a5f31;margin:0 0 7px}.has-home-page .oath-step p{font-size:12px;line-height:1.7;margin:0;color:#7c7667}.has-home-page .oath-step>b{font-weight:400;color:#a48750;margin-left:auto}.has-home-page .oath-step:hover h3{color:#a88035} .has-home-page .oath-support{margin:62px 0 0;padding:45px 30px;text-align:center;background:radial-gradient(ellipse at 50% 0,#fffdf5,#e1d3b7);border-top:3px double #ad925a;border-bottom:3px double #ad925a}.has-home-page .oath-kicker{font:10px Georgia,serif;letter-spacing:3px;color:#a08a5b}.has-home-page .oath-support h2{font:700 32px/1.4 "PMingLiU",serif;letter-spacing:3px;color:#775b2b;margin:17px 0 12px}.has-home-page .oath-support p{font-size:14px;color:#78715f;margin:0 0 24px}.has-home-page .oath-support>div{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.has-home-page .oath-support .button{font-size:14px;letter-spacing:1px;min-width:180px;min-height:45px;padding:10px 18px} .has-home-page :is(.portal-main,.realm-hero) a:focus-visible{outline:3px solid #4e727c;outline-offset:4px}.has-home-page :is(.oath-feature,.oath-step,.home-update,.oath-guides>a){text-decoration:none} @media(min-width:1700px){.has-home-page .realm-hero{min-height:700px;background-position:center 32%}} @media(max-width:1100px){.has-home-page .realm-hero{min-height:610px;padding-top:60px;padding-bottom:90px;background-position:60% 30%}.has-home-page .hero-copy h1{font-size:60px}.has-home-page .oath-features{gap:16px}.has-home-page .oath-feature{padding:28px 18px 20px}.has-home-page .oath-ribbon a{padding:0 20px}.has-home-page .oath-ribbon strong{font-size:16px}.has-home-page .oath-step{padding:4px 18px;gap:12px}.has-home-page .oath-guide-grid{gap:18px}} @media(max-width:760px){ .has-home-page .realm-hero{min-height:660px;padding:44px 24px 95px;align-items:flex-start;background:linear-gradient(90deg,#f4f0e5f7 0%,#f4f0e5c9 48%,#f4f0e56b 78%,#f4f0e544),linear-gradient(0deg,#ece4d199,transparent 60%),url('platinum-realm-v1.jpg') 68% 38%/auto 105% no-repeat}.has-home-page .realm-hero:after{background:linear-gradient(0deg,#f0ede5,transparent 18%)}.has-home-page .hero-copy{max-width:100%}.has-home-page .hero-kicker{font-size:10px;letter-spacing:2px;padding:6px 10px}.has-home-page .hero-copy h1{font-size:52px;line-height:1.2;letter-spacing:4px;margin:24px 0 18px}.has-home-page .hero-subtitle{font-size:8px;letter-spacing:1.7px;line-height:1.8}.has-home-page .hero-copy p{font-size:14px;line-height:1.95;margin:24px 0;max-width:330px}.has-home-page .hero-actions{gap:10px;flex-wrap:nowrap}.has-home-page .hero-actions .button{min-width:0;min-height:47px;padding:10px 15px;gap:14px;font-size:15px;letter-spacing:2px}.has-home-page .hero-tags{margin-top:24px;font-size:11px;letter-spacing:.5px}.has-home-page .hero-tags span+span{padding-left:13px;margin-left:13px}.has-home-page .hero-explore{margin-top:23px;font-size:10px;letter-spacing:2px}.has-home-page .hero-caption{display:none} .has-home-page .portal.portal-wide{padding:0 18px 38px}.has-home-page .oath-ribbon{grid-template-columns:1fr;padding:10px 19px;margin-top:-45px}.has-home-page .oath-ribbon a{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 3px;border-right:0;border-bottom:1px solid #d4c4a1}.has-home-page .oath-ribbon span{font-size:10px;letter-spacing:1px;white-space:nowrap}.has-home-page .oath-ribbon strong{font-family:"Microsoft JhengHei",sans-serif;font-size:12px;letter-spacing:0;text-align:right;font-weight:500} .has-home-page .oath-section{padding-top:42px;scroll-margin-top:20px}.has-home-page .oath-heading{margin-bottom:24px}.has-home-page .oath-heading h2{font-size:23px;letter-spacing:4px;padding:11px 30px;margin-bottom:11px}.has-home-page .oath-heading>span{font-size:9px;letter-spacing:2.5px}.has-home-page .oath-heading i{margin-top:18px;width:180px} .has-home-page .oath-features{grid-template-columns:1fr;gap:15px}.has-home-page .oath-feature{padding:25px 22px 18px}.has-home-page .oath-emblem{width:56px;height:56px;margin-bottom:7px}.has-home-page .oath-emblem svg{width:32px;height:32px}.has-home-page .oath-feature h3{font-size:24px;margin-top:7px}.has-home-page .oath-feature p{font-size:14px;margin:16px 0 10px;line-height:1.85}.has-home-page .oath-feature small{font-size:9px}.has-home-page .oath-more{font-size:12px;min-height:36px} .has-home-page .oath-guide-grid{grid-template-columns:1fr;gap:18px}.has-home-page .oath-news,.has-home-page .oath-guides{padding:23px 20px 15px}.has-home-page .oath-panel-title h3{font-size:21px;letter-spacing:2px}.has-home-page .oath-panel-title a{font-size:11px}.has-home-page .home-update{grid-template-columns:36px minmax(0,1fr) 10px;gap:11px;padding:15px 0;min-height:80px}.has-home-page .home-update strong{font-size:14px}.has-home-page .home-update time{font-size:11px;letter-spacing:.5px}.has-home-page .oath-guides>a{min-height:86px;gap:14px}.has-home-page .oath-guides strong{font-size:15px}.has-home-page .oath-guides small{font-size:12px;line-height:1.6} .has-home-page .oath-steps{grid-template-columns:1fr;padding:3px 20px}.has-home-page .oath-step{border-right:0;border-bottom:1px solid #d8c8a1;padding:24px 0;gap:20px}.has-home-page .oath-step>span{width:32px;text-align:center;font-size:32px}.has-home-page .oath-step h3{font-size:22px;margin-bottom:6px}.has-home-page .oath-step p{font-size:13px;line-height:1.7}.has-home-page .oath-step>b{font-size:18px}.has-home-page .oath-support{margin-top:38px;padding:30px 20px}.has-home-page .oath-kicker{font-size:8px;letter-spacing:2px}.has-home-page .oath-support h2{font-size:26px;letter-spacing:2px;margin:15px 0 12px}.has-home-page .oath-support p{font-size:13px;line-height:1.8;margin-bottom:21px}.has-home-page .oath-support>div{gap:10px}.has-home-page .oath-support .button{font-size:14px;flex:1 0 100%;max-width:290px;min-height:45px} } @media(max-width:359px){.has-home-page .realm-hero{padding-left:20px;padding-right:20px;min-height:640px}.has-home-page .hero-copy h1{font-size:48px}.has-home-page .hero-actions .button{padding:11px 12px;font-size:14px;gap:8px}.has-home-page .oath-ribbon{padding-left:14px;padding-right:14px}.has-home-page .oath-ribbon strong{font-size:11px}.has-home-page .oath-news,.has-home-page .oath-guides{padding-left:16px;padding-right:16px}.has-home-page .oath-panel-title h3{font-size:20px}} /* --- 發光粒子上升動畫特效 --- */ /* 確保父容器可以包住光點，並隱藏超出範圍的部分 */ .realm-hero { position: relative; overflow: hidden; } /* 光點特效的透明圖層，覆蓋整個背景 */ .particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* 讓滑鼠點擊可以穿透光點 */ z-index: 1; /* 確保光點在背景圖片上，文字下方 */ } /* 光點的基本設定 */ .particle { position: absolute; bottom: -10px; /* 從畫面最底下出發 */ width: 7px; height: 7px; background-color: #ffffff; border-radius: 50%; /* 核心純白，外圈疊加兩層清晰且飽和的深金色光暈，確保在亮底上不被吃掉 */ box-shadow: 0 0 5px 2px rgba(218, 165, 32, 0.8), 0 0 12px 4px rgba(184, 134, 11, 0.5); opacity: 0; animation-name: floatUp; animation-timing-function: linear; animation-iteration-count: infinite; } /* 定義往上飄的動畫軌跡 */ @keyframes floatUp { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 20% { opacity: 0.9; } 80% { opacity: 0.8; } 100% { transform: translateY(-800px) scale(2.0); opacity: 0; } } /* 隨機化：為 15 個不同的光點設定不同的位置、速度與延遲 */ .particle:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; } .particle:nth-child(2) { left: 25%; animation-duration: 12s; animation-delay: 2s; width: 4px; height: 4px;} .particle:nth-child(3) { left: 40%; animation-duration: 9s; animation-delay: 1s; } .particle:nth-child(4) { left: 55%; animation-duration: 15s; animation-delay: 4s; } .particle:nth-child(5) { left: 70%; animation-duration: 10s; animation-delay: 0.5s; width: 2px; height: 2px;} .particle:nth-child(6) { left: 85%; animation-duration: 14s; animation-delay: 3s; } .particle:nth-child(7) { left: 15%; animation-duration: 11s; animation-delay: 5s; } .particle:nth-child(8) { left: 35%; animation-duration: 13s; animation-delay: 2.5s; width: 5px; height: 5px;} .particle:nth-child(9) { left: 65%; animation-duration: 9s; animation-delay: 6s; } .particle:nth-child(10){ left: 80%; animation-duration: 16s; animation-delay: 1.5s; } .particle:nth-child(11){ left: 5%; animation-duration: 10s; animation-delay: 7s; } .particle:nth-child(12){ left: 45%; animation-duration: 12s; animation-delay: 0.2s; width: 2px; height: 2px;} .particle:nth-child(13){ left: 75%; animation-duration: 14s; animation-delay: 4.5s; } .particle:nth-child(14){ left: 20%; animation-duration: 11s; animation-delay: 8s; } .particle:nth-child(15){ left: 90%; animation-duration: 15s; animation-delay: 3.5s; } /* --- 方案一：3A 級圖層拆分 3D 視差與白龍浮空 --- */ /* 1. 主視差容器 */ .has-home-page .realm-hero-parallax { position: relative; width: 100%; min-height: 620px; overflow: hidden !important; background: #f8f5eb; } /* 2. 背景層：遠處城堡與天空 */ .has-home-page .realm-hero-layer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('hero-bg.jpg') center center / cover no-repeat; z-index: 1; } /* 3. 中景層：光點粒子 */ .has-home-page .realm-hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* 4. 前景層：去背白龍（向上縮退 140px 避開黃色卡片） */ .has-home-page .realm-hero-layer-dragon { position: absolute; top: 0; bottom: 0; right: 0; width: 58%; height: 100%; background: url('hero-dragon.png') right bottom / contain no-repeat; z-index: 2; pointer-events: none; animation: dragonFloat 6s ease-in-out infinite; will-change: transform; } /* 5. 最上層：文字內容與按鈕 */ .has-home-page .realm-hero-content { position: relative; z-index: 4; } /* 6. 白龍浮空 Keyframes */ @keyframes dragonFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } /* --- 主視覺：伺服器倍率面板 (Server Rates) --- */ .has-home-page .hero-rates { display: flex; gap: 20px; margin-top: 35px; /* 與上方按鈕保持呼吸空間 */ padding-top: 25px; border-top: 1px solid rgba(188, 164, 111, 0.4); /* 加上一條極淡的金色分隔線 */ } .has-home-page .rate-item { display: flex; flex-direction: column; gap: 4px; } .has-home-page .rate-item strong { font-family: Georgia, serif; font-size: 24px; font-weight: 700; color: #8c6d35; /* 經典暗金色 */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); letter-spacing: 1px; line-height: 1; } .has-home-page .rate-item strong i { font-size: 16px; font-style: italic; color: #bfa671; margin-left: 2px; } .has-home-page .rate-item span { font-size: 11px; font-weight: 600; color: #6e6451; letter-spacing: 1.5px; } /* --- 快速導航列 (oath-ribbon) 手機版樣式 --- */ @media (max-width: 760px) { .has-home-page .oath-ribbon { grid-template-columns: 1fr; padding: 5px 15px; margin-top: -45px; } .has-home-page .oath-ribbon a { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; padding: 15px 10px; border-right: 0; border-bottom: 1px solid #d4c4a1; } .has-home-page .oath-ribbon .ribbon-icon { width: 26px; height: 26px; } .has-home-page .oath-ribbon .ribbon-content { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; gap: 10px; } .has-home-page .oath-ribbon span { font-size: 10px; letter-spacing: 1px; white-space: nowrap; } .has-home-page .oath-ribbon strong { font-size: 13px; text-align: right; margin-left: auto; transform: none !important; } } /* --- 強制修正：三格快速導航列排版與巨無霸圖示 --- */ .has-home-page .oath-ribbon a { display: flex !important; flex-direction: row !important; /* 強制改為左圖右文 */ align-items: center !important; justify-content: center !important; gap: 16px !important; } .has-home-page .oath-ribbon .ribbon-icon { width: 32px !important; /* 強制限制圖示寬度 */ height: 32px !important; /* 強制限制圖示高度 */ flex-shrink: 0 !important; /* 絕對禁止圖示被拉伸或放大 */ color: #ad8f56; } .has-home-page .oath-ribbon .ribbon-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* 讓文字靠左對齊圖示 */ gap: 4px !important; } /* --- 微調：縮減黃色金框的高度與總寬度 --- */ .has-home-page .oath-ribbon { max-width: 800px !important; /* 限制最大寬度，解決左右過長的問題 */ margin: -39px auto 0 !important; /* 確保金框在畫面中完美置中 */ padding: 2px 10px !important; /* 縮減外框本身的上下留白 */ } .has-home-page .oath-ribbon a { padding: 12px 20px !important; min-height: 74px !important; } /* --- 重返龍族世界：卡片扁平化、金屬標籤與懸浮特效 --- */ .has-home-page .oath-features { gap: 20px; } .has-home-page .oath-feature { position: relative; padding: 22px 20px 18px !important; /* 壓縮上下留白，將正方形改為修長橫矩形 */ transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* 金屬小標籤樣式 */ .has-home-page .oath-tag { position: absolute; top: -12px; background: linear-gradient(135deg, #f7f1e3, #e5d5b3); border: 1px solid #bfa671; color: #785c2c; font-size: 11px; font-weight: 700; padding: 2px 10px; letter-spacing: 1.5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } /* 調整徽章圖示與標題間距 */ .has-home-page .oath-emblem { width: 52px !important; height: 52px !important; margin: 6px 0 10px !important; } .has-home-page .oath-feature h3 { font-size: 22px !important; margin: 4px 0 2px !important; } .has-home-page .oath-feature small { color: #8c7856 !important; /* 深化英文副標題顏色，提升文字對比度 */ } .has-home-page .oath-feature p { font-size: 13.5px !important; line-height: 1.7 !important; margin: 12px 0 15px !important; color: #4f5249 !important; } .has-home-page .oath-more b { display: inline-block; transition: transform 0.3s ease; } /* 3D 懸浮發光特效 (Hover) */ .has-home-page .oath-feature:hover { transform: translateY(-6px) !important; /* 卡片向上浮起 6px */ border-color: #aa8647 !important; box-shadow: 0 12px 24px rgba(88, 68, 33, 0.18) !important; /* 投射暗金色柔和光暈 */ background: linear-gradient(135deg, #ffffff, #f4ebda) !important; } .has-home-page .oath-feature:hover .oath-more b { transform: translateX(5px); /* 底部箭頭向右滑動 */ } /* --- 社群與榮耀：緊湊 2x2 金屬雙欄樣式 --- */ .has-home-page .oath-features.oath-grid-4 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; max-width: 1080px !important; /* 限制總寬度，避免橫向拉伸過寬造成空洞 */ margin: 0 auto !important; /* 居中顯示 */ } .has-home-page .oath-card-item { display: flex !important; flex-direction: row !important; /* 改為左圖右文橫向結構 */ align-items: flex-start !important; gap: 20px !important; padding: 24px 26px !important; min-height: 145px !important; position: relative !important; text-align: left !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* 左側 SVG 圖示外框 */ .has-home-page .oath-card-icon { width: 52px !important; height: 52px !important; flex-shrink: 0 !important; display: grid !important; place-items: center !important; background: linear-gradient(135deg, #fdfbf7, #efe6d3) !important; border: 1px solid #c9b68a !important; box-shadow: inset 0 0 0 2px #ffffff, 0 3px 8px rgba(88, 68, 33, 0.08) !important; } .has-home-page .oath-card-icon svg { width: 26px !important; height: 26px !important; color: #a48243 !important; } /* 右側內容區塊 */ .has-home-page .oath-card-body { display: flex !important; flex-direction: column !important; flex: 1 !important; } .has-home-page .oath-card-head { display: flex !important; align-items: baseline !important; gap: 10px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(201, 182, 138, 0.3) !important; padding-bottom: 6px !important; } .has-home-page .oath-card-head h3 { font-size: 20px !important; font-weight: 700 !important; color: #765b2d !important; margin: 0 !important; } .has-home-page .oath-card-head small { font-family: Georgia, serif !important; font-size: 10px !important; color: #928263 !important; letter-spacing: 1.5px !important; } .has-home-page .oath-card-body p { font-size: 13px !important; line-height: 1.6 !important; color: #53564e !important; margin: 4px 0 10px !important; } .has-home-page .oath-card-item .oath-more { margin-top: auto !important; font-size: 12px !important; font-weight: 600 !important; color: #8b6b32 !important; } /* 懸浮發光特效 */ .has-home-page .oath-card-item:hover { transform: translateY(-4px) !important; border-color: #aa8647 !important; box-shadow: 0 10px 22px rgba(88, 68, 33, 0.15) !important; background: linear-gradient(135deg, #ffffff, #f4ebda) !important; } .has-home-page .oath-card-item:hover .oath-card-icon { border-color: #aa8647 !important; background: linear-gradient(135deg, #ffffff, #e8d7b8) !important; } .has-home-page .oath-card-item:hover .oath-more b { transform: translateX(4px); } /* 手機版自適應 RWD */ @media (max-width: 760px) { .has-home-page .oath-features.oath-grid-4 { grid-template-columns: 1fr !important; } .has-home-page .oath-card-item { flex-direction: row !important; padding: 18px 16px !important; gap: 14px !important; } .has-home-page .oath-card-icon { width: 44px !important; height: 44px !important; } .has-home-page .oath-card-icon svg { width: 22px !important; height: 22px !important; } } /* --- 5+4 雙排寬幅蜂巢陣樣式 --- */ .has-home-page .oath-hex-container.oath-wide-grid { display: flex !important; flex-direction: column !important; align-items: center !important; max-width: 1180px !important; /* 寬幅展開至 1180px */ margin: 0 auto !important; } .has-home-page .oath-wide-grid .oath-hex-row { display: flex !important; justify-content: center !important; gap: 12px !important; position: relative !important; z-index: 1 !important; } .has-home-page .oath-wide-grid .oath-hex-row:first-child { margin-bottom: -28px !important; /* 第一排與第二排六角形嵌合 Margin */ } /* 適合 5 欄排列的修長六角形尺寸 (205px x 230px) */ .has-home-page .oath-hex-item { width: 205px !important; height: 230px !important; background: linear-gradient(135deg, #d4c197, #8c6d35) !important; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important; padding: 2px !important; transition: transform 0.3s ease, filter 0.3s ease !important; filter: drop-shadow(0 4px 10px rgba(88, 68, 33, 0.12)) !important; } .has-home-page .oath-hex-inner { width: 100% !important; height: 100% !important; background: linear-gradient(135deg, #fdfbf7, #eee5d3) !important; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 18px 14px !important; box-sizing: border-box !important; position: relative !important; /* 關鍵：影片的絕對定位基準點 */ } /* 確保內部文字圖示不會被影片蓋住 (排除影片標籤) */ .has-home-page .oath-hex-inner > :not(video) { position: relative !important; z-index: 2 !important; pointer-events: none !important; } /* 正中央主核心發光樣式 */ .has-home-page .oath-hex-main-core { background: linear-gradient(135deg, #fce0a6, #b8860b) !important; filter: drop-shadow(0 0 14px rgba(184, 134, 11, 0.45)) !important; } .has-home-page .oath-hex-main-core .oath-hex-inner { background: linear-gradient(135deg, #ffffff, #fcebc7) !important; } .has-home-page .oath-hex-main-core h3 { color: #8c5d14 !important; } .has-home-page .hex-icon { width: 32px !important; height: 32px !important; margin-bottom: 5px !important; color: #a48243 !important; } .has-home-page .hex-icon svg { width: 100% !important; height: 100% !important; } .has-home-page .oath-hex-inner h3 { font-size: 14.5px !important; font-weight: 700 !important; color: #6d5328 !important; margin: 0 0 4px !important; } .has-home-page .oath-hex-inner p { font-size: 10.5px !important; line-height: 1.4 !important; color: #55584f !important; margin: 0 !important; } /* Hover 浮空放大特效 (加大比例至 1.25 倍) */ .has-home-page .oath-hex-item:hover { transform: scale(1.25) translateY(-4px) !important; z-index: 10 !important; background: linear-gradient(135deg, #fff2d1, #c89d4c) !important; filter: drop-shadow(0 10px 20px rgba(184, 134, 11, 0.4)) !important; } /* 影片浮現設定 */ .has-home-page .oath-hex-item:hover .hex-hover-video { opacity: 0.65 !important; /* 3. 暫時關閉色彩增值，避免影片顏色太暗跟底色融合後消失 */ /* mix-blend-mode: multiply !important; */ } /* RWD 自適應：平板/手機平滑自動換行 */ @media (max-width: 1050px) { .has-home-page .oath-wide-grid .oath-hex-row { flex-wrap: wrap !important; margin-bottom: 0 !important; gap: 12px !important; } .has-home-page .oath-hex-item { width: 30% !important; height: 220px !important; } } @media (max-width: 600px) { .has-home-page .oath-hex-item { width: 46% !important; height: 200px !important; } } /* --- 雙向淡入淡出動畫系統 (擴充支援蜂巢牆、情報冒險與理念宣告區) --- */ .oath-section .oath-heading, .oath-section .oath-hex-item, .oath-section .oath-news, .oath-section .oath-guides, .oath-section.oath-support { opacity: 0; transform: translateY(35px) scale(0.92); pointer-events: none; /* 核心修正：隱形時強制關閉滑鼠互動，徹底消滅幽靈影片與誤觸 */ /* 淡出時：無延遲迅速縮小透明，保證離開視角時乾淨俐落 */ transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } /* 當 JS 偵測到區塊進入視角 (.is-visible) 時觸發淡入綻放 */ .oath-section.is-visible .oath-heading, .oath-section.is-visible .oath-hex-item, .oath-section.is-visible .oath-news, .oath-section.is-visible .oath-guides, .oath-section.is-visible.oath-support { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; /* 核心修正：元素出現後，恢復所有正常的滑鼠點擊與懸浮功能 */ } /* --- 設定階梯式延遲 (僅在進入畫面淡入時啟用遞延) --- */ .oath-section.is-visible .oath-heading { transition-delay: 0.1s; } /* 新增：情報與冒險區塊的左右面板延遲，創造視覺層次感 */ .oath-section.is-visible .oath-news { transition-delay: 0.25s; } .oath-section.is-visible .oath-guides { transition-delay: 0.4s; } /* 第一排：正中央在線積分(第3格)率先解鎖，隨後向兩側擴散 */ #realm-systems.is-visible .oath-hex-row:first-child .oath-hex-item:nth-child(3) { transition-delay: 0.25s; } #realm-systems.is-visible .oath-hex-row:first-child .oath-hex-item:nth-child(2) { transition-delay: 0.35s; } #realm-systems.is-visible .oath-hex-row:first-child .oath-hex-item:nth-child(4) { transition-delay: 0.35s; } #realm-systems.is-visible .oath-hex-row:first-child .oath-hex-item:nth-child(1) { transition-delay: 0.45s; } #realm-systems.is-visible .oath-hex-row:first-child .oath-hex-item:nth-child(5) { transition-delay: 0.45s; } /* 第二排：完美收尾 */ #realm-systems.is-visible .oath-hex-row-stagger .oath-hex-item:nth-child(2) { transition-delay: 0.55s; } #realm-systems.is-visible .oath-hex-row-stagger .oath-hex-item:nth-child(3) { transition-delay: 0.55s; } #realm-systems.is-visible .oath-hex-row-stagger .oath-hex-item:nth-child(1) { transition-delay: 0.65s; } #realm-systems.is-visible .oath-hex-row-stagger .oath-hex-item:nth-child(4) { transition-delay: 0.65s; } /* --- 蜂巢天賦牆：背景霧化半透明遮罩 --- */ #hex-backdrop-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9998; /* 層級低於影片投影 9999 */ pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #hex-backdrop-overlay.is-active { opacity: 1; } /* --- 蜂巢天賦牆：中央投影大螢幕 (100% 對齊對稱金框) --- */ #hex-central-projection { position: fixed; top: 0; left: 0; transform: translate(calc(var(--start-x, 50vw) - 50%), calc(var(--start-y, 50vh) - 50%)) scale(0.2); width: 55vw; max-width: 700px; aspect-ratio: 205 / 230; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); filter: drop-shadow(0 0 35px rgba(218, 165, 32, 0.65)); /* 修正金框對齊：使用三色漸層底 + Flexbox 置中 */ background: linear-gradient(135deg, #ffe5a3, #b8860b, #e0b044); display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); box-sizing: border-box; } #hex-central-projection.is-active { opacity: 1; transform: translate(calc(50vw - 50%), calc(50vh - 50%)) scale(1); } #hex-central-video { /* 修正金框對齊：精準等比縮小 10px，完美露出四周對稱的金色邊框 */ width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; opacity: 0.9; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } /* --- 公告區與商城大橫幅視覺優化 (CSP 安全樣式) --- */ /* 左側：活動標籤專屬紅色系配色 */ .has-home-page .update-type.update-event { background: #fbe6e1; border-color: #d79e8c; color: #a52a2a; font-weight: 700; } /* 右側：高亮文字與數字 */ .has-home-page .guide-highlight { color: #c49a4f !important; } .has-home-page .text-highlight { color: #9c7836 !important; } @keyframes absoluteGlow { 0% { opacity: 0.4; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px 2px rgba(240, 190, 50, 0.4); } 100% { opacity: 1; box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 35px 8px rgba(240, 190, 50, 0.7); } } .has-home-page .shop-promo-banner { position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #e3cd9d, #b9934c); padding: 22px 24px; border-radius: 6px; text-decoration: none; border: 1px solid #dfc285; transition: transform 0.25s ease, box-shadow 0.25s ease; } .has-home-page .shop-promo-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 6px; background: transparent; z-index: -1; pointer-events: none; animation: absoluteGlow 1.5s infinite alternate ease-in-out; } /* 下面包含 div, strong, small, b 以及 :hover 的設定請照舊貼上 */ .has-home-page .shop-promo-banner div { display: flex; flex-direction: column; gap: 4px; } .has-home-page .shop-promo-banner strong { font-size: 18px; color: #433113; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); margin: 0; } .has-home-page .shop-promo-banner small { font-size: 12px; color: #6d5225; margin: 0; } .has-home-page .shop-promo-banner b { font-size: 26px; color: #433113; margin-left: 10px; transition: transform 0.25s ease; } .has-home-page .shop-promo-banner:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(185, 147, 76, 0.55); } .has-home-page .shop-promo-banner:hover::before { animation: none; opacity: 0; } .has-home-page .shop-promo-banner:hover b { transform: translateX(5px); } /* --- 白金羊皮紙風格：緊湊型四欄頁尾 --- */ .realm-site-end { background: linear-gradient(180deg, #e2d3b5 0%, #d0be98 100%) !important; color: #4a3e2a !important; border-top: 2px solid #b89753 !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05) !important; font-family: "Microsoft JhengHei", "PingFang TC", sans-serif !important; margin-top: 25px !important; width: 100% !important; } #realm-footer { padding: 24px 24px 18px !important; max-width: 1180px !important; margin: 0 auto !important; background: transparent !important; } .footer-columns { display: grid !important; grid-template-columns: 2.2fr 1fr 1fr 1fr !important; gap: 24px !important; padding-bottom: 18px !important; border-bottom: 1px solid rgba(139, 107, 50, 0.25) !important; } .footer-col-title { color: #6b4e1d !important; font-size: 15px !important; font-weight: 700 !important; margin: 0 0 10px !important; letter-spacing: 1px !important; } .footer-col-brand .footer-col-title { font-size: 18px !important; color: #5c4114 !important; } .footer-col-brand .footer-col-title span { font-size: 11px !important; color: #8c7142 !important; margin-left: 8px !important; font-family: Georgia, serif !important; letter-spacing: 2px !important; } .footer-desc { font-size: 12.5px !important; line-height: 1.65 !important; color: #5e523c !important; margin: 0 0 10px !important; max-width: 380px !important; } .footer-contact p { font-size: 12.5px !important; color: #5e523c !important; margin: 4px 0 !important; } .footer-contact a { color: #8c5d14 !important; font-weight: 700 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .footer-contact a:hover { color: #b8860b !important; text-decoration: underline !important; } .footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; } .footer-links li { margin-bottom: 6px !important; } .footer-links a { color: #5e523c !important; font-size: 13px !important; text-decoration: none !important; transition: color 0.2s ease !important; } .footer-links a:hover { color: #9c7328 !important; font-weight: 600 !important; } .footer-bottom-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 14px !important; font-size: 11.5px !important; color: #7a6c54 !important; } .footer-legal-notice { max-width: 620px !important; text-align: right !important; line-height: 1.5 !important; } /* RWD 自適應手機/平板版 */ @media (max-width: 860px) { .footer-columns { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .footer-bottom-bar { flex-direction: column !important; gap: 10px !important; text-align: center !important; } .footer-legal-notice { text-align: center !important; } } @media (max-width: 500px) { .footer-columns { grid-template-columns: 1fr !important; } } /* --- 經營理念宣告區：高顯眼度黃金白光擦亮 (Shine Sweep) 特效 --- */ .has-home-page .oath-support { position: relative !important; overflow: hidden !important; } .has-home-page .oath-shine { display: block !important; position: absolute !important; top: 0 !important; left: -120%; width: 12% !important; /* 將 60% 的肥胖光塊縮減為 12% 的俐落細光 */ height: 100% !important; /* 改用乾淨純粹的白色半透明漸層，營造玻璃與金屬的質感反射 */ background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100% ) !important; transform: skewX(-25deg) !important; pointer-events: none !important; z-index: 1 !important; /* 降低層級，避免光束把文字與按鈕吃掉 */ filter: none !important; /* 移除俗氣的黃色發光陰影 */ animation: oathShineSweep 4.5s infinite ease-in-out !important; } @keyframes oathShineSweep { 0% { left: -120%; } 30% { left: 180%; } 100% { left: 180%; } }