:root{ /* 品牌色：依官方主視覺封面圖採樣 —— 深青綠 + 香檳金 */ --navy-900:#16302e; --navy-800:#1e433f; --navy-700:#2a5f62; --navy-600:#35787c; --gold:#c9a45c; --gold-light:#e8cf9a; --gold-deep:#a07f3a; --ink:#172a28; --paper:#f4f3ee; --paper-2:#e8e8e0; --red:#cf1c23; --radius:18px; --safe-b:env(safe-area-inset-bottom,0px); --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','PingFang TC','HarmonyOS Sans SC','HarmonyOS Sans','MiSans','Noto Sans CJK SC','Microsoft YaHei',sans-serif; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%} html{ /* 寬屏時整個視窗鋪深孔雀綠，不留白邊 */ background:#12292c; background-image: radial-gradient(90% 60% at 50% 0%, #2a5866 0%, transparent 62%), radial-gradient(70% 50% at 50% 100%, #1d434c 0%, transparent 58%); background-attachment:fixed; } body{ font-family:var(--font-ui); background:transparent; color:var(--ink); max-width:520px; margin:0 auto; min-height:100dvh; overscroll-behavior-y:none; box-shadow:0 0 80px rgba(0,0,0,.45); } .serif{font-family:'Noto Serif TC','Noto Sans TC',serif} /* ---------- 開屏：獨立品牌區 + 底部查詢卡 ---------- 背景只承擔氣氛；官方 logo 與活動文字均是獨立內容，鍵盤彈出時不會 因 background cover 重新裁切，也不會被查詢卡遮住。 */ #splash{ position:fixed; inset:0; z-index:100; max-width:520px; margin:0 auto; height:100svh;min-height:100svh; background:#b20d15 url('assets/mobile-red-gold-bg.png') center bottom/cover no-repeat; display:flex; flex-direction:column; justify-content:flex-start; color:#f3ead6; text-align:center; overflow:hidden; animation:coverIn 1.1s cubic-bezier(.2,.8,.2,1) both; } @keyframes coverIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}} /* 底部壓暗，保證面板文字清晰 */ #splash::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;z-index:1; background:linear-gradient(180deg,transparent,rgba(11,29,29,.28) 34%,rgba(8,25,27,.9) 100%); } /* 品牌區固定在上半部；文字不再焊死在背景圖裡。 */ .splash-brand{ flex:none;height:clamp(270px,40svh,350px);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center; padding:clamp(28px,5.6svh,50px) 18px 0;animation:brandIn .9s .12s cubic-bezier(.2,.8,.2,1) both; } .splash-brand-kicker{ margin-top:13px;color:#ead7a9;font-family:'Noto Serif TC',serif;font-size:13px;font-weight:600; letter-spacing:.17em;text-indent:.17em;text-shadow:0 2px 9px rgba(0,0,0,.7); } .splash-brand h1{ margin-top:7px;color:#f5e5b9;font-family:'Noto Serif TC',serif;font-size:clamp(15.5px,4.6vw,20px); font-weight:900;line-height:1.48;letter-spacing:.08em;text-indent:.08em;text-shadow:0 3px 12px rgba(0,0,0,.8); } .splash-brand h1 span{display:block;white-space:nowrap} @keyframes brandIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} /* 查詢面板：懸浮玻璃卡，背景從四周完整透出。 */ .splash-panel{ flex:none; margin:0 14px; padding:19px 18px 16px; display:flex; flex-direction:column; align-items:stretch; position:relative; z-index:2; background:linear-gradient(165deg,rgba(16,51,50,.88),rgba(7,27,29,.82)); backdrop-filter:blur(20px) saturate(1.14); -webkit-backdrop-filter:blur(20px) saturate(1.14); border:1px solid rgba(232,207,154,.48); border-radius:20px; box-shadow:0 20px 52px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1); animation:fadeUp .9s .45s both; } .splash-panel::before{ content:'';position:absolute;left:18%;right:18%;top:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(244,226,184,.82),transparent); } @keyframes emblemIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .guest-line{margin-top:2px;text-align:center;animation:fadeUp .8s .05s both} .guest-line .hello{font-size:13.5px;color:rgba(243,234,214,.6);letter-spacing:.2em} .guest-line .gname{font-size:33px;font-weight:700;color:#fff;margin-top:4px} .guest-line .gtitle{font-size:12.5px;color:var(--gold-light);margin-top:5px;letter-spacing:.08em} .phone-box{margin-top:0;width:100%;animation:fadeUp .8s .5s both} .lookup-intro{text-align:left;padding:0 2px} .lookup-title{font-family:'Noto Serif TC',serif;font-size:18px;font-weight:700;color:#f5e5b9;letter-spacing:.1em} .lookup-sub{margin-top:4px;font-size:11px;color:rgba(243,234,214,.54);letter-spacing:.07em} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .lookup-row{display:flex;align-items:stretch;gap:10px;margin-top:14px} .phone-box input{ flex:1;min-width:0;height:54px;padding:0 16px;border-radius:13px;border:1px solid rgba(232,207,154,.38); background:rgba(3,20,22,.48);color:#fff;font-size:17px;text-align:left;letter-spacing:0;outline:none; font-family:var(--font-ui);font-weight:500; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); caret-color:var(--gold-light);transition:border-color .2s,box-shadow .2s,background .2s; } .phone-box input::placeholder{color:rgba(243,234,214,.56);font-size:16px;font-weight:400;letter-spacing:0;font-family:var(--font-ui)} .phone-box input:focus{border-color:#ead49f;background:rgba(3,20,22,.66);box-shadow:0 0 0 3px rgba(201,164,92,.12),inset 0 1px 0 rgba(255,255,255,.07)} .phone-err{font-size:12px;color:#e8a0a6;margin-top:10px;min-height:17px;letter-spacing:.03em} .phone-err:empty{display:none} .phone-box input[type=text]{font-size:17px;letter-spacing:0} /* 同名選擇 */ .pick-box{margin-top:6px;max-height:38dvh;overflow-y:auto;width:min(90%,320px);animation:fadeUp .5s both} .pick-box .plabel{font-size:13px;color:rgba(243,234,214,.65);letter-spacing:.16em;margin-bottom:12px} .pick-row{ display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(201,164,92,.4);border-radius:13px; padding:11px 14px;margin-bottom:9px;color:#f3ead6; } .pick-row:active{background:rgba(201,164,92,.18)} .pick-row .pk-name{font-size:16px;font-weight:700;font-family:var(--font-ui)} .pick-row .pk-sub{font-size:11.5px;color:rgba(243,234,214,.6);margin-top:2px} .pick-row .pk-no{margin-left:auto;flex:none;font-family:'Noto Serif TC',serif;font-size:22px;font-weight:900;color:var(--gold-light)} .pick-row .pk-no small{display:block;font-size:10px;font-weight:400;letter-spacing:.1em;color:rgba(243,234,214,.5)} .guest-line .gtable{ color:var(--gold-light);margin-top:9px;padding:0 2px; display:flex;align-items:center;justify-content:center;gap:.55em;min-width:0; font-size:clamp(13px,3.8vw,16px);letter-spacing:clamp(.04em,.35vw,.1em);line-height:1.55; white-space:nowrap;word-break:keep-all; } .guest-line .gtable .seat-brief{display:block;white-space:nowrap} .guest-line .gtable .seat-divider{flex:none;color:rgba(232,207,154,.7);letter-spacing:0} /* 極窄手機固定拆成兩行，每行保持一段完整席位，避免單字掉到第三行。 */ @media (max-width:360px){ .guest-line .gtable.gtable-pair{display:grid;grid-template-columns:1fr;justify-items:center;gap:1px} .guest-line .gtable.gtable-pair .seat-divider{display:none} } .back-link{display:inline-block;align-self:center;margin-top:14px;font-size:12px;color:rgba(243,234,214,.5);text-decoration:underline;text-underline-offset:3px;cursor:pointer;letter-spacing:.1em} #btnLookup{ flex:0 0 104px;width:auto;height:54px;margin:0;padding:0;border:none;border-radius:13px; background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep)); color:#2a1f08;font-size:15px;font-weight:700;letter-spacing:.08em;text-indent:.08em; font-family:var(--font-ui);cursor:pointer; box-shadow:0 8px 20px rgba(201,164,92,.24),inset 0 1px 0 rgba(255,255,255,.32); } #btnCheckin{ margin-top:13px;width:100%;height:52px;padding:0;border:none;border-radius:14px; background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep)); color:#2a1f08;font-size:16px;font-weight:700;letter-spacing:.14em;text-indent:.14em; font-family:var(--font-ui); cursor:pointer; box-shadow:0 9px 24px rgba(201,164,92,.28),inset 0 1px 0 rgba(255,255,255,.35); } #btnCheckin:active,#btnLookup:active{transform:scale(.96)} .splash-foot{text-align:center;font-size:10px;color:rgba(243,234,214,.42);margin-top:10px;letter-spacing:.08em;animation:fadeUp .8s .9s both} /* ---------- 主应用 ---------- */ #app{display:none;min-height:100dvh;background:var(--paper);flex-direction:column} #app.on{display:flex} header.appbar{ position:sticky;top:0;z-index:40; background:linear-gradient(180deg,var(--navy-900),var(--navy-800)); color:#f3ead6;padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px; display:flex;align-items:center;gap:12px; box-shadow:0 2px 14px rgba(12,22,51,.35); } .appbar .mini-emblem{width:34px;height:34px;flex:none} .appbar .t1{font-size:13px;font-weight:700;line-height:1.35;letter-spacing:.08em;font-family:'Noto Serif TC',serif} .appbar .t2{font-size:10.5px;line-height:1.4;color:rgba(243,234,214,.68);letter-spacing:.035em;margin-top:2px} main{flex:1;padding:16px 16px calc(86px + var(--safe-b))} .page{display:none;animation:pageIn .35s ease both} .page.on{display:block} @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 卡片通用 */ .card{background:#fff;border-radius:var(--radius);box-shadow:0 4px 18px rgba(28,35,64,.07);padding:18px;margin-bottom:14px;border:1px solid rgba(28,35,64,.05)} .card h3{font-family:'Noto Serif TC',serif;font-size:16px;color:var(--navy-800);letter-spacing:.08em;display:flex;align-items:center;gap:8px;margin-bottom:12px} .card h3::before{content:'';width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--gold-light),var(--gold-deep))} /* 桌号主卡 */ .table-card{ border-radius:22px;overflow:hidden;margin-bottom:14px;color:#f3ead6;position:relative; background: radial-gradient(140% 90% at 85% -20%, #357f80 0%, transparent 55%), linear-gradient(160deg,var(--navy-800),var(--navy-900)); box-shadow:0 10px 30px rgba(12,22,51,.35); padding:22px 20px 20px; } .table-card::after{content:'';position:absolute;inset:8px;border:1px solid rgba(201,164,92,.35);border-radius:16px;pointer-events:none} .tc-top{display:flex;justify-content:space-between;align-items:flex-start} .tc-hello{font-size:13px;color:rgba(243,234,214,.7);letter-spacing:.1em} .tc-name{font-size:22px;font-weight:700;color:#fff;margin-top:4px;font-family:var(--font-ui)} .tc-role{display:inline-block;margin-top:7px;font-size:11px;color:var(--gold-light);border:1px solid rgba(201,164,92,.5);border-radius:999px;padding:3px 10px;letter-spacing:.12em} .tc-role:empty{display:none} .tc-badge{text-align:center;flex:none;margin-left:12px} .tc-badge .lbl{font-size:11px;letter-spacing:.3em;text-indent:.3em;color:rgba(243,234,214,.65)} .tc-num{ font-family:'Noto Serif TC',serif;font-size:64px;font-weight:900;line-height:1; background:linear-gradient(180deg,#f2e0b6,var(--gold) 65%,var(--gold-deep)); -webkit-background-clip:text;background-clip:text;color:transparent; margin-top:2px;text-shadow:0 6px 22px rgba(201,164,92,.25); } .tc-tname{font-size:12px;color:var(--gold-light);letter-spacing:.28em;text-indent:.28em;margin-top:2px} .tc-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(201,164,92,.5),transparent);margin:16px 0 12px} /* 典禮 / 晚宴 雙座位 */ .seat-list{margin-top:16px;display:flex;flex-direction:column;gap:10px} .seat-item{ display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px; background:rgba(255,255,255,.07);border:1px solid rgba(201,164,92,.4); } .seat-item.primary{background:rgba(201,164,92,.15);border-color:rgba(201,164,92,.75)} .seat-ico{ flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:rgba(201,164,92,.2);color:var(--gold-light); } .seat-main{flex:1;min-width:0} .seat-k{font-size:11px;letter-spacing:.22em;color:rgba(243,234,214,.6)} .seat-v{font-size:17px;font-weight:700;color:#fff;margin-top:3px;font-family:'Noto Serif TC',serif;line-height:1.35} .seat-v em{font-style:normal;font-size:30px;color:var(--gold-light);margin:0 2px;letter-spacing:.02em} .seat-item.none{background:rgba(255,255,255,.04);border-style:dashed;border-color:rgba(243,234,214,.25)} .seat-item.none .seat-v{color:rgba(243,234,214,.55);font-size:15px;font-weight:400} .seat-go{ flex:none;padding:7px 12px;border-radius:9px;border:1px solid rgba(201,164,92,.5); background:none;color:var(--gold-light);font-size:12px;cursor:pointer;letter-spacing:.06em; } .tc-meta{display:flex;gap:14px;font-size:12px;line-height:1.65;color:rgba(243,234,214,.78)} .tc-meta div{flex:1} .tc-meta .k{color:rgba(243,234,214,.5);font-size:10.5px;letter-spacing:.1em;margin-bottom:3px} .tc-actions{display:flex;gap:10px;margin-top:16px} .tc-actions button{ flex:1;padding:11px 0;border-radius:12px;border:1px solid rgba(201,164,92,.55); background:rgba(201,164,92,.12);color:var(--gold-light);font-size:13.5px;letter-spacing:.1em;cursor:pointer;font-weight:500; } .tc-actions button.primary{background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));color:#2a1f08;border:none;font-weight:700} .tc-actions button.lead{ padding:15px 0;font-size:17px;letter-spacing:.22em;text-indent:.1em;font-family:'Noto Serif TC',serif; border-radius:14px;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(201,164,92,.35); } .tc-actions button.lead::after{ content:'';position:absolute;top:0;bottom:0;width:46px;left:-60px;transform:skewX(-24deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:shine 2.8s ease-in-out infinite; } @keyframes shine{0%,55%{left:-60px}85%,100%{left:120%}} /* 快捷宫格 */ .quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .quick a{ background:#fff;border-radius:14px;padding:13px 4px 11px;text-align:center;text-decoration:none;color:var(--navy-800); box-shadow:0 3px 12px rgba(28,35,64,.06);border:1px solid rgba(28,35,64,.05); } .quick .qi{width:30px;height:30px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(135deg,#f2e6cc,#e6d3a6);color:var(--gold-deep)} .quick .qt{font-size:11.5px;letter-spacing:.05em} /* 公告 */ .notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:linear-gradient(135deg,#fdf8ec,#f7efdb);border:1px solid rgba(201,164,92,.35);border-radius:14px;margin-bottom:14px} .notice .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold-light);margin-top:6px;opacity:.72} @keyframes blink{50%{opacity:.25}} .notice p{font-size:12.5px;line-height:1.75;color:#5a4a22} /* 同一部手機可連續替本人、同行嘉賓或官員簽到，無需返回二維碼入口。 */ .continue-checkin{ width:100%;display:flex;align-items:center;justify-content:center;gap:10px; padding:15px 18px;margin:0 0 14px;border-radius:14px;cursor:pointer; border:1px solid rgba(201,164,92,.55);background:linear-gradient(135deg,rgba(232,207,154,.2),rgba(29,67,76,.65)); color:var(--gold-light);font-size:16px;font-weight:700;letter-spacing:.14em; box-shadow:0 8px 24px rgba(0,0,0,.2);transition:transform .18s,box-shadow .18s; } .continue-checkin:active{transform:scale(.98);box-shadow:0 4px 14px rgba(0,0,0,.2)} /* 流程 timeline */ .tl{position:relative;--tl-gutter:24px;--tl-axis:8px;padding-left:var(--tl-gutter)} .tl::before{content:'';position:absolute;left:var(--tl-axis);top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--gold),rgba(201,164,92,.15))} .tl-item{position:relative;padding:0 0 20px} .tl-item::before{content:'';position:absolute;left:calc(var(--tl-axis) - var(--tl-gutter) - 8px);top:4px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 0 0 3px rgba(201,164,92,.15)} .tl-item.now::before{background:var(--gold);animation:pulseDot 1.6s infinite} @keyframes pulseDot{50%{box-shadow:0 0 0 7px rgba(201,164,92,.12)}} .tl-time{font-size:12px;color:var(--gold-deep);font-weight:700;letter-spacing:.05em;font-family:'Noto Serif TC',serif} .tl-title{font-size:15px;font-weight:700;color:var(--navy-800);margin:3px 0 4px} .tl-desc{font-size:12.5px;line-height:1.8;color:#6b7086} .tl-tag{display:inline-block;font-size:10.5px;color:var(--red);border:1px solid rgba(176,52,60,.35);background:rgba(176,52,60,.06);border-radius:6px;padding:2px 7px;margin-top:6px;letter-spacing:.05em} .agenda-meta{margin:-2px 0 18px;padding:10px 12px;border-radius:11px;background:#f8f3e8;border:1px solid rgba(201,164,92,.28);font-size:12px;line-height:1.65;color:#74613a} .agenda-meta b{color:var(--navy-800);font-family:'Noto Serif TC',serif;font-size:13px} .agenda-card .tl-item{padding-bottom:17px} .agenda-card .tl-title{font-size:14px;line-height:1.55;margin-top:3px} /* 同桌嘉宾 */ .table-switch{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none} .table-switch::-webkit-scrollbar{display:none} .ts-chip{ flex:none;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid rgba(28,35,64,.12); font-size:13px;color:var(--navy-700);cursor:pointer;letter-spacing:.03em; } .ts-chip.on{background:var(--navy-800);color:var(--gold-light);border-color:var(--navy-800);font-weight:600} .ts-chip .mini{font-size:10px;opacity:.65;margin-left:3px} .guest-row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid rgba(28,35,64,.06);cursor:pointer} .guest-row:last-child{border-bottom:none} .avatar{ flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:'Noto Serif TC',serif;font-size:18px;font-weight:700;color:#fff; border:2px solid rgba(201,164,92,.7); } .g-main{flex:1;min-width:0} .g-name{font-size:15.5px;font-weight:700;color:var(--navy-800);display:flex;align-items:center;gap:7px;flex-wrap:wrap} .g-badge{font-size:10px;color:var(--gold-deep);border:1px solid rgba(201,164,92,.55);background:rgba(201,164,92,.1);border-radius:5px;padding:1.5px 6px;font-weight:500} .g-badge.me{color:#fff;background:var(--red);border-color:var(--red)} .g-title{font-size:12px;color:#6b7086;margin-top:3px;line-height:1.6} .g-bio{font-size:12.5px;line-height:1.8;color:#4a5068;background:var(--paper);border-radius:10px;padding:10px 12px;margin-top:9px;display:none} .g-bio.open{display:block;animation:pageIn .25s ease} .g-arrow{flex:none;color:#c2c6d4;font-size:12px;margin-top:14px;transition:transform .25s} .guest-row.open .g-arrow{transform:rotate(90deg)} .table-head-note{font-size:12px;color:#8a8fa3;line-height:1.7;margin-bottom:6px} /* 会场导览 */ .map-wrap{background:#fff;border-radius:var(--radius);box-shadow:0 4px 18px rgba(28,35,64,.07);padding:14px 10px 6px;margin-bottom:14px;border:1px solid rgba(28,35,64,.05)} .map-route-hint{ width:max-content;max-width:calc(100% - 16px);margin:0 auto 8px;padding:7px 14px;border-radius:999px; background:#f6efdf;color:#8a6a2c;font-size:11px;font-weight:600;letter-spacing:.06em;text-align:center; } .map-secondary-hint{ display:none;width:calc(100% - 16px);max-width:none;margin:0 8px 10px;padding:10px 16px;border-radius:12px; background:linear-gradient(135deg,#f7df91,#c99d3a);color:#2f1d00;border:1px solid rgba(255,248,224,.98); font-size:13.5px;font-weight:900;letter-spacing:.04em;text-align:center;box-shadow:0 7px 20px rgba(201,164,92,.38); } .map-secondary-hint.on{display:block} svg#venue{width:100%;height:auto;display:block} .door-pick{display:flex;gap:8px;padding:10px 8px 12px} .door-pick button{ flex:1;padding:10px 0;border-radius:11px;border:1px solid rgba(28,35,64,.14);background:#fff; font-size:13px;color:var(--navy-700);cursor:pointer;letter-spacing:.05em; } .door-pick button.on{background:var(--navy-800);color:var(--gold-light);border-color:var(--navy-800);font-weight:600} .legend{display:flex;flex-wrap:wrap;gap:12px;padding:0 8px 12px;font-size:11px;color:#6b7086} .legend span{display:inline-flex;align-items:center;gap:5px} svg#venue{cursor:zoom-in} .map-zoom{ display:block;width:calc(100% - 16px);margin:6px 8px 12px;padding:11px 0;border-radius:11px; border:1px solid rgba(201,164,92,.55);background:linear-gradient(135deg,#fdf8ec,#f6ecd6); color:var(--gold-deep);font-size:13.5px;font-weight:700;letter-spacing:.1em;cursor:pointer; } /* 全屏橫向看圖 */ #mapFull{position:fixed;inset:0;z-index:130;background:#172a28;display:none;overflow:hidden} #mapFull.on{display:block} /* 橫向鋪滿：絕對定位 + 中心旋轉。原先用 flex 會把 .rot 壓縮成正方形， 導致「放大看清楚」其實沒放大。 */ #mapFull .rot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px} #mapFull svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block;shape-rendering:geometricPrecision;text-rendering:geometricPrecision} #mapFull .mf-close{ position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2; width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,164,92,.6); background:rgba(0,0,0,.45);color:var(--gold-light);font-size:17px;cursor:pointer; } #mapFull .mf-tip{ position:absolute;bottom:calc(16px + var(--safe-b));left:50%;transform:translateX(-50%); color:rgba(243,234,214,.7);font-size:12px;letter-spacing:.1em;white-space:nowrap; } .lg{width:10px;height:10px;border-radius:3px;display:inline-block} /* 联会介绍 */ .about-hero{ border-radius:var(--radius);overflow:hidden;margin-bottom:14px;padding:24px 20px;color:#f3ead6;text-align:center; background:radial-gradient(120% 100% at 50% -20%, #357f80 0%, transparent 60%),linear-gradient(160deg,var(--navy-800),var(--navy-900)); } .about-hero .ah1{font-family:'Noto Serif TC',serif;font-size:20px;font-weight:900;letter-spacing:.15em} .about-hero .ah2{font-size:12px;color:var(--gold-light);margin-top:8px;letter-spacing:.25em;text-indent:.25em} .mission{display:flex;gap:8px;margin:16px 0 4px;justify-content:center} .mission span{font-size:12px;border:1px solid rgba(201,164,92,.5);color:var(--gold-light);border-radius:999px;padding:5px 13px;letter-spacing:.1em} .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .stat{background:#fff;border-radius:14px;text-align:center;padding:15px 6px;box-shadow:0 3px 12px rgba(28,35,64,.06);border:1px solid rgba(28,35,64,.05)} .stat .n{font-family:'Noto Serif TC',serif;font-size:24px;font-weight:900;color:var(--navy-800)} .stat .n em{font-style:normal;font-size:13px;color:var(--gold-deep)} .stat .k{font-size:11px;color:#8a8fa3;margin-top:4px;letter-spacing:.05em} .about-p{font-size:13.5px;line-height:2;color:#4a5068;text-align:justify} .milestone{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(28,35,64,.1)} .milestone:last-child{border-bottom:none} .ms-year{flex:none;font-family:'Noto Serif TC',serif;font-weight:900;color:var(--gold-deep);font-size:15px;width:44px} .ms-body{font-size:13px;line-height:1.75;color:#4a5068} /* 底部导航 */ nav#tabbar{ position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:50; background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(28,35,64,.08);display:flex;padding:8px 4px calc(8px + var(--safe-b)); } #tabbar a{flex:1;text-align:center;text-decoration:none;color:#9aa0b4;font-size:10.5px;letter-spacing:.05em} #tabbar .ni{width:24px;height:24px;margin:0 auto 3px;display:flex;align-items:center;justify-content:center} #tabbar a.on{color:var(--navy-800);font-weight:700} #tabbar a.on .ni{color:var(--gold-deep)} #tabbar svg{width:21px;height:21px} /* ===== 視覺統一裝飾層（金色綢帶 + 星光，呼應官方封面） ===== */ /* ========================================================================= decor.css —— 港區省級政協委員聯誼會二十周年慶典 · 全站裝飾層 金色綢帶 + 四角星光 + 金線／金邊，呼應官方開屏封面圖 純 CSS / 內聯 SVG，零外部圖片；動畫僅用 transform + opacity 依賴既有變數：--navy-900 --navy-800 --navy-700 --gold --gold-light --gold-deep --paper ========================================================================= */ /* 本檔「不」重新宣告 :root 變數 —— 避免覆蓋 index.html 既有的品牌色 （例如 index.html 的 --navy-700 是 #2a5f62，與草案值不同）。 所有取用都寫成 var(--x, 兜底值)，因此單獨引入本檔也能正常顯示。 */ /* ------------------------------------------------------------------------- 1) 裝飾宿主：深色區塊加上 .deco-host，讓裝飾層落在背景與文字之間 isolation:isolate 建立層疊上下文 → .decor 用 z-index:-1 即可壓在區塊背景之上、所有正文之下，無需改動任何內容元素 ------------------------------------------------------------------------- */ .deco-host{position:relative;isolation:isolate;overflow:hidden} .decor{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; border-radius:inherit; --ribbon-size:190px; /* 綢帶方塊邊長 */ --ribbon-op:.26; /* 綢帶整體透明度（建議 .12 ~ .30） */ --star-color:#f4e6c4; --star-op:.85; } /* ------------------------------------------------------------------------- 2) 金色綢帶：右上 (::before) / 左下 (::after)，同一張 SVG 旋轉 180° 復用 修飾類：.decor--tr（僅右上） .decor--bl（僅左下） ------------------------------------------------------------------------- */ .decor::before, .decor::after{ content:''; position:absolute; width:var(--ribbon-size); height:var(--ribbon-size); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E %3Cstop offset='0' stop-color='%23e8cf9a' stop-opacity='0'/%3E %3Cstop offset='.28' stop-color='%23f4e6c4' stop-opacity='1'/%3E %3Cstop offset='.58' stop-color='%23c9a45c' stop-opacity='.78'/%3E %3Cstop offset='1' stop-color='%23a07f3a' stop-opacity='0'/%3E %3C/linearGradient%3E %3ClinearGradient id='b' x1='.1' y1='0' x2='.9' y2='1'%3E %3Cstop offset='0' stop-color='%23f4e6c4' stop-opacity='0'/%3E %3Cstop offset='.42' stop-color='%23e8cf9a' stop-opacity='.95'/%3E %3Cstop offset='1' stop-color='%23a07f3a' stop-opacity='0'/%3E %3C/linearGradient%3E %3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='1'%3E %3Cstop offset='0' stop-color='%23c9a45c' stop-opacity='0'/%3E %3Cstop offset='.42' stop-color='%23f4e6c4' stop-opacity='.9'/%3E %3Cstop offset='1' stop-color='%23c9a45c' stop-opacity='0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath d='M52 0C118 2 176 54 220 124V86C182 34 132 2 92 0Z' fill='url%28%23a%29'/%3E %3Cpath d='M126 0C162 6 196 32 220 66V44C198 20 168 2 144 0Z' fill='url%28%23b%29'/%3E %3Cpath d='M14 0C96 14 166 74 212 168' stroke='url%28%23c%29' stroke-width='2.6'/%3E %3Cpath d='M0 18C86 34 152 94 196 188' stroke='url%28%23c%29' stroke-width='1.1'/%3E %3Cpath d='M98 0C142 12 188 48 220 98' stroke='url%28%23c%29' stroke-width='.9'/%3E %3Cpath d='M170 0C192 6 208 16 220 28' stroke='url%28%23c%29' stroke-width='1.6'/%3E %3C/svg%3E"); background-size:100% 100%; background-repeat:no-repeat; opacity:var(--ribbon-op); } .decor::before{ top:calc(var(--ribbon-size) * -.07); right:calc(var(--ribbon-size) * -.07); } .decor::after { bottom:calc(var(--ribbon-size) * -.07); left:calc(var(--ribbon-size) * -.07); transform:rotate(180deg); opacity:calc(var(--ribbon-op) * .8); } .decor--tr::after{display:none} .decor--bl::before{display:none} /* ------------------------------------------------------------------------- 3) 星光層： 為一顆四角星，可用行內變數覆寫 --x/--y 位置 --s 尺寸 --d 動畫相位(負值=隨機錯開) --r 靜態旋轉 --o 峰值透明度 不寫變數時，由下方 nth-child 給出預設散佈（5~9 顆） ------------------------------------------------------------------------- */ .decor i{ position:absolute; display:block; left:var(--x,50%); top:var(--y,50%); width:var(--s,10px); height:var(--s,10px); margin:calc(var(--s,10px) / -2); opacity:0; animation:decoTwinkle var(--dur,5.2s) ease-in-out infinite; animation-delay:var(--d,0s); will-change:transform,opacity; } /* 星芒本體：四角星 clip-path，中心白熱、芒尖漸淡 */ .decor i::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, #fff 0%, var(--star-color,#f4e6c4) 24%, rgba(232,207,154,.62) 48%, rgba(201,164,92,.32) 100%); clip-path:polygon( 50% 0%, 54.5% 38%, 62% 45.5%, 100% 50%, 62% 54.5%, 54.5% 62%, 50% 100%, 45.5% 62%, 38% 54.5%, 0% 50%, 38% 45.5%, 45.5% 38%); } /* 柔光暈：用 radial-gradient 代替 blur，移動端零濾鏡開銷 */ .decor i::after{ content:''; position:absolute; inset:-45%; background:radial-gradient(circle at 50% 50%, rgba(244,230,196,.32) 0%, rgba(201,164,92,.14) 38%, transparent 68%); } /* 明滅但不熄滅：谷底仍保留 ~28% 亮度，任一瞬間星光都可見，避免「空窗期」 */ @keyframes decoTwinkle{ 0%,100%{ opacity:calc(var(--o,.85) * .28); transform:rotate(var(--r,0deg)) scale(.62) } 22% { opacity:var(--o,.85); transform:rotate(var(--r,0deg)) scale(1) } 40% { opacity:calc(var(--o,.85) * .48); transform:rotate(var(--r,0deg)) scale(.8) } 62% { opacity:calc(var(--o,.85) * .92); transform:rotate(var(--r,0deg)) scale(.97) } 82% { opacity:calc(var(--o,.85) * .34); transform:rotate(var(--r,0deg)) scale(.7) } } /* 預設散佈：深色卡片／區塊（9 顆，大小相位皆不同，避開中央文字帶） */ .decor i:nth-child(1){--x:7%; --y:76%; --s:15px; --d:-.3s; --dur:5.6s} .decor i:nth-child(2){--x:21%; --y:90%; --s:8px; --d:-2.7s; --dur:4.8s; --r:18deg} .decor i:nth-child(3){--x:38%; --y:10%; --s:7px; --d:-1.5s; --dur:6.1s} .decor i:nth-child(4){--x:69%; --y:7%; --s:11px; --d:-3.4s; --dur:5.0s; --r:-14deg} .decor i:nth-child(5){--x:88%; --y:22%; --s:17px; --d:-.9s; --dur:6.4s} .decor i:nth-child(6){--x:95%; --y:56%; --s:8px; --d:-4.2s; --dur:4.6s; --r:22deg} .decor i:nth-child(7){--x:13%; --y:33%; --s:6px; --d:-2.1s; --dur:5.9s} .decor i:nth-child(8){--x:57%; --y:93%; --s:10px; --d:-3.8s; --dur:5.3s; --r:-20deg} .decor i:nth-child(9){--x:79%; --y:72%; --s:6px; --d:-1.2s; --dur:6.8s} /* ------------------------------------------------------------------------- 4) 頁頭專用：矮而寬，綢帶縮小、星光沿頂部與右側分佈，不壓標題 ------------------------------------------------------------------------- */ /* 頁頭很矮很寬：把綢帶橫向拉伸成「淺弧長掃」，比方形綢帶更貼合 bar 的比例 */ .decor--bar{ --ribbon-op:.30; --star-op:.8 } .decor--bar::before{ width:80%; height:190px; top:-62px; right:-4%; bottom:auto; left:auto; } .decor--bar::after{ width:66%; height:170px; bottom:-104px; left:-6%; top:auto; right:auto; opacity:calc(var(--ribbon-op) * .7); } .decor--bar i:nth-child(1){--x:58%; --y:24%; --s:12px; --d:-.4s; --dur:5.4s} .decor--bar i:nth-child(2){--x:72%; --y:72%; --s:8px; --d:-2.5s; --dur:4.9s; --r:20deg} .decor--bar i:nth-child(3){--x:86%; --y:30%; --s:15px; --d:-1.1s; --dur:6.2s} .decor--bar i:nth-child(4){--x:95%; --y:74%; --s:7px; --d:-3.6s; --dur:5.1s} .decor--bar i:nth-child(5){--x:44%; --y:84%; --s:6px; --d:-4.3s; --dur:6.6s; --r:-16deg} .decor--bar i:nth-child(6){--x:26%; --y:16%; --s:6px; --d:-1.9s; --dur:5.7s} .decor--bar i:nth-child(7){--x:9%; --y:82%; --s:8px; --d:-3.1s; --dur:6.0s} .decor--bar i:nth-child(8), .decor--bar i:nth-child(9){display:none} /* 頁頭底部金線：與開屏底邊的描邊質感呼應 */ .appbar-gold-edge{ position:absolute; left:0; right:0; bottom:0; height:1.5px; z-index:1; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(201,164,92,.15) 12%, var(--gold-light,#e8cf9a) 42%, var(--gold,#c9a45c) 58%, rgba(201,164,92,.15) 88%, transparent 100%); } /* 稀疏版：小卡片／窄區塊只留 5 顆 */ .decor--sparse i:nth-child(n+6){display:none} /* ------------------------------------------------------------------------- 5) 金色分隔線與金邊 ------------------------------------------------------------------------- */ /* 5.1 深色底上的細金線（無襯飾） */ .gold-rule{ height:1px; border:0; margin:14px 0; background:linear-gradient(90deg,transparent,rgba(201,164,92,.55) 22%, var(--gold,#c9a45c) 50%, rgba(201,164,92,.55) 78%, transparent); } /* 淺色底（--paper 區）用略深的金 */ .gold-rule.on-light{ background:linear-gradient(90deg,transparent,rgba(160,127,58,.28) 22%, var(--gold-deep,#a07f3a) 50%, rgba(160,127,58,.28) 78%, transparent); opacity:.7; } /* 5.2 帶菱形結點的分隔（章節標題間） */ .gold-rule-diamond{ display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--gold,#c9a45c); } .gold-rule-diamond::before, .gold-rule-diamond::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,currentColor); opacity:.5; } .gold-rule-diamond::after{ background:linear-gradient(270deg,transparent,currentColor) } .gold-rule-diamond > i{ width:6px; height:6px; flex:none; transform:rotate(45deg); background:linear-gradient(135deg,var(--gold-light,#e8cf9a),var(--gold-deep,#a07f3a)); } /* 5.3 內嵌金邊框（深色區塊通用，等同 .table-card::after 的可復用版） */ .gold-frame{ position:relative } .gold-frame > .gold-frame-line, .gold-frame::after{ content:''; position:absolute; inset:8px; z-index:1; border:1px solid rgba(201,164,92,.35); border-radius:calc(var(--radius,18px) - 6px); pointer-events:none; } /* 四角加重的金框（封面描邊質感） */ .gold-corners{ position:relative } .gold-corners::before, .gold-corners::after{ content:''; position:absolute; width:26px; height:26px; z-index:1; pointer-events:none; border:1.5px solid var(--gold,#c9a45c); opacity:.55; } .gold-corners::before{ top:8px; left:8px; border-right:0; border-bottom:0; border-radius:8px 0 0 0 } .gold-corners::after { bottom:8px; right:8px; border-left:0; border-top:0; border-radius:0 0 8px 0 } /* 5.4 淺色卡片金邊（.card 增強版） */ .card--gold{ border:1px solid rgba(201,164,92,.42) !important; box-shadow:0 4px 18px rgba(28,35,64,.07), inset 0 0 0 3px rgba(232,207,154,.13); position:relative; overflow:hidden; } /* 卡片頂部金色細飾條 */ .card--gold::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold-light,#e8cf9a) 30%, var(--gold,#c9a45c) 50%, var(--gold-light,#e8cf9a) 70%, transparent); opacity:.9; } /* ------------------------------------------------------------------------- 6) 無障礙：尊重 prefers-reduced-motion —— 星光靜止顯示，綢帶保留 ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .decor i{ animation:none; opacity:calc(var(--o,.85) * .8); transform:rotate(var(--r,0deg)) scale(.95); } } /* ========================================================================= ritual.css —— 港區省級政協委員聯誼會二十周年慶典 · 簽到高光時刻 深孔雀綠底 + 帆船會徽點亮 + 金色光環 + 星光綻放 + 金色綢帶掃過 純 CSS / 內聯 SVG，品牌標識使用 assets/emblem-event.png 動畫僅使用 transform / opacity；總時長 ≈ 2.95s，收尾自動淡出 取代 index.html 原有的 #ritual / .ring / .seal / .ritual-msg / .petal 樣式 ========================================================================= */ /* ---- 時間軸（可整體加減速：改 --rt-scale 之外的值請成組調整） ---------- 0.00 底幕亮起 0.20 會徽點亮浮現 0.28 星光四射 0.30 綢帶 A 掃過 0.50 綢帶 B 掃過 0.50 / 0.72 / 0.94 三圈金色光環錯峰擴散 0.95 「歡迎蒞臨」 1.25 嘉賓姓名（大字金漸變） 1.55 金色分隔線展開 1.80 「正在為您呈上座位安排」 2.45 整體優雅淡出 → 2.95 交給主界面 */ #ritual{ position:fixed; inset:0; z-index:110; max-width:520px; margin:0 auto; display:none; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; color:#fff; text-align:center; /* 深孔雀綠：中心微亮，四周壓深，與官方封面同色系 */ background: radial-gradient(120% 78% at 50% 34%, #2a5866 0%, #1d434c 34%, #16333a 62%, #12292c 100%); } #ritual.on{ display:flex; animation:rtOut .5s 2.45s cubic-bezier(.4,0,.7,1) both } /* 頂部／底部極淡的青光暈，讓純色底不死板 */ #ritual::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60% 34% at 50% 8%, rgba(49,118,125,.34), transparent 70%), radial-gradient(80% 40% at 50% 104%,rgba(46,105,114,.30), transparent 72%); opacity:0; animation:rtFade .8s .05s ease-out both; } /* ------------------------------------------------------------------------- 1) 金色綢帶：兩道弧線，錯峰自左下向右上／右下向左上掃過 ------------------------------------------------------------------------- */ .rt-ribbons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .rt-rb{position:absolute;left:-46%;width:192%;height:auto;will-change:transform,opacity;opacity:0} .rt-rb-a{top:6%} .rt-rb-b{bottom:4%} #ritual.on .rt-rb-a{animation:rtSweepA 1.75s .30s cubic-bezier(.22,.62,.2,1) both} #ritual.on .rt-rb-b{animation:rtSweepB 1.85s .50s cubic-bezier(.22,.62,.2,1) both} @keyframes rtSweepA{ 0% {opacity:0; transform:translate3d(-26%,14%,0) rotate(-7deg) scale(1.06)} 38% {opacity:.95} 100%{opacity:0; transform:translate3d(20%,-6%,0) rotate(1.5deg) scale(1.06)} } @keyframes rtSweepB{ 0% {opacity:0; transform:translate3d(22%,12%,0) rotate(6deg) scale(1.05)} 40% {opacity:.85} 100%{opacity:0; transform:translate3d(-22%,-4%,0) rotate(-2deg) scale(1.05)} } /* ------------------------------------------------------------------------- 2) 會徽 + 光環 + 星光（共用一個定位中心 .rt-core） ------------------------------------------------------------------------- */ .rt-core{ position:relative; z-index:3; width:132px; height:132px; flex:none; display:flex; align-items:center; justify-content:center; } /* 2.1 會徽背後的金色柔光（代替 filter，移動端零開銷） */ .rt-glow{ position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(244,232,198,.42) 0%, rgba(201,164,92,.26) 26%, rgba(201,164,92,.10) 48%, transparent 72%); } #ritual.on .rt-glow{animation:rtGlow 1.5s .18s ease-out both} @keyframes rtGlow{ 0% {opacity:0; transform:scale(.35)} 34% {opacity:1; transform:scale(1.02)} 100%{opacity:.62; transform:scale(1)} } /* 2.2 會徽本體：由中心點亮、縮放浮現，外加一圈金環 */ .rt-emblem{ position:relative; z-index:2; width:118px; height:118px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), transparent 70%); box-shadow:0 0 0 1px rgba(201,164,92,.75), 0 0 0 7px rgba(201,164,92,.14), 0 14px 44px rgba(0,0,0,.34); opacity:0; } .rt-emblem img{width:100%;height:100%;display:block;border-radius:50%} #ritual.on .rt-emblem{animation:rtEmblem .95s .20s cubic-bezier(.16,1.02,.3,1) both} @keyframes rtEmblem{ 0% {opacity:0; transform:scale(.42)} 46% {opacity:1} 70% {transform:scale(1.045)} 100%{opacity:1; transform:scale(1)} } /* 2.3 金色光環：三圈錯峰擴散 */ .rt-ring{ position:absolute; width:132px; height:132px; border-radius:50%; pointer-events:none; border:1.5px solid rgba(232,207,154,.7); opacity:0; will-change:transform,opacity; } .rt-ring:nth-of-type(2){border-width:1px;border-color:rgba(201,164,92,.6)} .rt-ring:nth-of-type(3){border-width:.8px;border-color:rgba(201,164,92,.45)} #ritual.on .rt-ring{animation:rtRing 1.45s cubic-bezier(.16,.72,.24,1) both} #ritual.on .rt-ring:nth-of-type(1){animation-delay:.50s} #ritual.on .rt-ring:nth-of-type(2){animation-delay:.72s} #ritual.on .rt-ring:nth-of-type(3){animation-delay:.94s} @keyframes rtRing{ 0% {opacity:0; transform:scale(.62)} 16% {opacity:.95} 100%{opacity:0; transform:scale(3.1)} } /* 2.4 星光綻放：12 顆四角星由中心射出後緩慢消隱 */ .rt-burst{position:absolute;inset:0;pointer-events:none} .rt-burst i{ position:absolute; left:50%; top:50%; display:block; width:var(--s,13px); height:var(--s,13px); margin:calc(var(--s,13px) / -2); opacity:0; will-change:transform,opacity; } .rt-burst i::before{ /* 四角星芒：中心白熱、芒尖漸淡 */ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, #fff 0%, #f4e6c4 26%, rgba(232,207,154,.6) 52%, rgba(201,164,92,.25) 100%); clip-path:polygon(50% 0%, 54.5% 38%, 62% 45.5%, 100% 50%, 62% 54.5%, 54.5% 62%, 50% 100%, 45.5% 62%, 38% 54.5%, 0% 50%, 38% 45.5%, 45.5% 38%); } #ritual.on .rt-burst i{animation:rtStar 1.25s cubic-bezier(.12,.68,.22,1) both} @keyframes rtStar{ 0% {opacity:0; transform:translate3d(0,0,0) scale(.2) rotate(0deg)} 22% {opacity:1} 60% {opacity:.85} 100%{opacity:0; transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.62) rotate(38deg)} } /* 12 個方位（每 30°），半徑長短交錯，大小與相位各異 */ .rt-burst i:nth-child(1) {--tx:158px; --ty:0; --s:15px; animation-delay:.28s} .rt-burst i:nth-child(2) {--tx:97px; --ty:56px; --s:9px; animation-delay:.38s} .rt-burst i:nth-child(3) {--tx:79px; --ty:137px; --s:12px; animation-delay:.31s} .rt-burst i:nth-child(4) {--tx:0; --ty:112px; --s:8px; animation-delay:.42s} .rt-burst i:nth-child(5) {--tx:-79px; --ty:137px; --s:11px; animation-delay:.34s} .rt-burst i:nth-child(6) {--tx:-97px; --ty:56px; --s:9px; animation-delay:.40s} .rt-burst i:nth-child(7) {--tx:-158px;--ty:0; --s:16px; animation-delay:.28s} .rt-burst i:nth-child(8) {--tx:-97px; --ty:-56px; --s:10px; animation-delay:.36s} .rt-burst i:nth-child(9) {--tx:-79px; --ty:-137px; --s:13px; animation-delay:.30s} .rt-burst i:nth-child(10){--tx:0; --ty:-112px; --s:8px; animation-delay:.44s} .rt-burst i:nth-child(11){--tx:79px; --ty:-137px; --s:14px; animation-delay:.32s} .rt-burst i:nth-child(12){--tx:97px; --ty:-56px; --s:9px; animation-delay:.39s} /* ------------------------------------------------------------------------- 3) 文字：三段依次浮現 ------------------------------------------------------------------------- */ .rt-words{position:relative;z-index:3;margin-top:38px;padding:0 22px;max-width:100%} .rt-w1{ font-size:14.5px; font-weight:500; color:rgba(240,246,242,.72); letter-spacing:.42em; text-indent:.42em; opacity:0; } .rt-name{ margin-top:14px; line-height:1.2; font-weight:900; font-size:clamp(30px,10.8vw,44px); letter-spacing:.1em; text-indent:.1em; background:linear-gradient(180deg,#fdf6e2 0%,#f1e0b0 32%,#e8cf9a 55%,#c9a45c 82%,#a98a45 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; opacity:0; word-break:break-word; } .rt-rule{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:15px;opacity:0} .rt-rule::before,.rt-rule::after{ content:''; width:52px; height:1px; background:linear-gradient(90deg,transparent,rgba(201,164,92,.85)); } .rt-rule::after{background:linear-gradient(270deg,transparent,rgba(201,164,92,.85))} .rt-rule > i{ width:5px;height:5px;flex:none;transform:rotate(45deg); background:linear-gradient(135deg,#e8cf9a,#a07f3a); } .rt-w2{ margin-top:15px; font-size:12px; color:rgba(240,246,242,.5); letter-spacing:.2em; text-indent:.2em; opacity:0; } #ritual.on .rt-w1 {animation:rtUp .7s .95s cubic-bezier(.2,.75,.25,1) both} #ritual.on .rt-name{animation:rtNameIn .85s 1.25s cubic-bezier(.16,.9,.28,1) both} #ritual.on .rt-rule{animation:rtRule .6s 1.55s ease-out both} #ritual.on .rt-w2 {animation:rtUp .7s 1.80s cubic-bezier(.2,.75,.25,1) both} @keyframes rtUp {from{opacity:0;transform:translate3d(0,12px,0)} to{opacity:1;transform:none}} @keyframes rtNameIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.93)} to{opacity:1;transform:none}} @keyframes rtRule {from{opacity:0;transform:scaleX(.3)} to{opacity:1;transform:none}} @keyframes rtFade {from{opacity:0} to{opacity:1}} /* 收尾：整體優雅淡出並輕微前推，交給主界面 */ @keyframes rtOut{ 0%,84%{opacity:1;transform:scale(1)} 100% {opacity:0;transform:scale(1.035)} } /* ------------------------------------------------------------------------- 4) 無障礙：prefers-reduced-motion —— 600ms 簡單淡入淡出，畫面靜態呈現 （JS 同步把等待時間縮短到 620ms，見 ritual.js） ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ #ritual.on, #ritual.on .rt-rb-a, #ritual.on .rt-rb-b, #ritual.on .rt-glow, #ritual.on .rt-emblem, #ritual.on .rt-ring, #ritual.on .rt-burst i, #ritual.on .rt-w1, #ritual.on .rt-name, #ritual.on .rt-rule, #ritual.on .rt-w2, #ritual::before{animation:none !important} #ritual.on{animation:rtCalm .6s linear both !important} #ritual::before{opacity:1} #ritual.on .rt-glow{opacity:.6} #ritual.on .rt-emblem{opacity:1} #ritual.on .rt-rb-a{opacity:.5;transform:translate3d(-2%,4%,0) rotate(-4deg)} #ritual.on .rt-rb-b{opacity:.4;transform:translate3d(2%,2%,0) rotate(3deg)} #ritual.on .rt-ring{opacity:.3;transform:scale(1.5)} #ritual.on .rt-ring:nth-of-type(2){opacity:.2;transform:scale(2.1)} #ritual.on .rt-ring:nth-of-type(3){opacity:.14;transform:scale(2.7)} #ritual.on .rt-burst i{opacity:.5;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.7)} #ritual.on .rt-w1,#ritual.on .rt-name,#ritual.on .rt-rule,#ritual.on .rt-w2{opacity:1;transform:none} } /* 靜態淡入淡出（reduced-motion 專用） */ @keyframes rtCalm{0%{opacity:0}22%{opacity:1}74%{opacity:1}100%{opacity:0}} /* ================= 深色玻璃主題（正宗孔雀綠，對齊官方海報） ================= */ /* ========================================================================= theme_dark.css —— 電子禮賓深色主題基底 用法：整段貼到 index.html