/* ============================================================ 轉播藍（skin=broadcast）整站樣式——由 esports.css 逐色映射生成＋尾段字體覆蓋。 ⚠ 修改 esports.css 版面規則後，請重跑生成（見 git log 該次 commit 的 sed 映射） 再檢查本檔尾段覆蓋是否仍適用。載入方式：layouts/app.blade.php 於 skin=broadcast 時「取代」esports.css 載入本檔（非疊加）。 ============================================================ */ /* ============================================================ SF esports —— 冠軍殿堂（深墨金）版面。純手寫，無 build step。 /* ============================================================ SF esports —— 冠軍殿堂（深墨金）版面。純手寫，無 build step。 來源：cup-design/{Main,Register,SignIn,Manage}.dc.html 深墨 #07080f ＋ 香檳金 #18a0ff、Noto Serif TC / Cormorant Garamond。 四個頁面各自的通用 class（.card/.inp/.grid/.steps…）以頁面外層 （.hp / .rg / .sg / .mg）scope 起來，避免跨頁衝突。 字型 fallback 一律不落到裸 serif/cursive（繁中 Windows cursive=標楷體）。 ============================================================ */ /* 每屆換膚：layout 依 event.config.theme 發 --es-* 覆蓋（App\Support\EventTheme）， 未發（或無主題設定）時取 var() 第二參數預設值＝現行殿堂配色，視覺與原版完全一致。 半透明處一律 rgba(var(--*-rgb),α) 形式，換色時同步跟動。 */ :root{ --ink: var(--es-ink, #07080f); --ink-rgb: var(--es-ink-rgb, 7,8,15); --ink-2: var(--es-ink-2, #0a0f1f); --ink-3: var(--es-ink-3, #090d18); --gold: var(--es-accent, #18a0ff); --gold-rgb: var(--es-accent-rgb, 24,160,255); --gold-hi: var(--es-accent-hi, #5bbcff); --gold-deep:var(--es-accent-deep, #0f7fd6); --cream: #eef2ff; --cream-hi: #ffffff; --line: rgba(var(--gold-rgb),.16); --line-2: rgba(var(--gold-rgb),.12); --txt-2: #aeb9d6; --txt-3: #8ea0c6; --txt-4: #6b7ea6; --ok: #5fc890; --warn-bd: #7a3b34; --warn-tx: #f2a89f; } /* 顯示用襯線（中文用 Noto Serif TC，載入失敗退到 sans，絕不落標楷體） */ :root{ --serif: "Noto Serif TC","Source Han Serif TC","PingFang TC","Microsoft JhengHei",sans-serif; --sans: "Noto Sans TC","Microsoft JhengHei","PingFang TC",-apple-system,"Segoe UI",Arial,sans-serif; --latin: "Cormorant Garamond",Georgia,"Times New Roman",serif; /* 純拉丁字元用 */ } *{ box-sizing:border-box; } body{ margin:0; background:var(--ink); color:var(--cream); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:var(--gold); text-decoration:none; } a:hover{ color:var(--gold-hi); } img{ max-width:100%; } /* ============================================================ 共用 header / footer（layout 提供，四頁一致） ============================================================ */ .site-hd{ position:relative; z-index:5; height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(20px,5vw,60px); border-bottom:1px solid var(--line); background:rgba(var(--ink-rgb),.86); } .site-hd .bd{ font-family:var(--latin); font-weight:700; font-size:24px; letter-spacing:5px; color:var(--gold); white-space:nowrap; } .site-hd nav{ display:flex; gap:clamp(16px,2.4vw,34px); font-size:16px; color:var(--txt-2); letter-spacing:2px; } .site-hd nav a{ color:var(--txt-2); } .site-hd nav a:hover{ color:var(--cream); } .site-hd .hd-right{ display:flex; align-items:center; gap:16px; white-space:nowrap; } .site-hd .apply{ font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:3px; color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); padding:11px 26px; } .site-hd .apply:hover{ color:var(--ink); filter:brightness(1.05); } .site-hd .who{ font-size:15px; color:var(--txt-2); letter-spacing:1px; } .site-hd .who b{ color:var(--cream); } .site-ft{ border-top:1px solid var(--line); padding:40px clamp(20px,5vw,60px); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; } .site-ft .bd{ font-family:var(--latin); font-weight:700; font-size:19px; letter-spacing:4px; color:var(--gold); } .site-ft nav{ display:flex; gap:26px; font-size:14px; color:var(--txt-3); letter-spacing:2px; flex-wrap:wrap; } .site-ft nav a{ color:var(--txt-3); } .site-ft nav a:hover{ color:var(--gold); } .site-ft .cr{ font-size:12.5px; color:#6b7ea6; letter-spacing:1px; } /* 共用 flash / 錯誤提示 */ .es-alert{ width:min(1080px,90%); margin:22px auto 0; padding:13px 18px; font-size:14.5px; letter-spacing:.5px; border:1px solid var(--line); background:rgba(var(--gold-rgb),.05); color:var(--cream); } .es-alert.err{ border-color:var(--warn-bd); background:rgba(179,54,43,.1); color:#f0c9c4; } .es-alert.ok{ border-color:#2e6d4c; background:rgba(95,200,144,.08); color:#bfe9d1; } /* ============================================================ 通用 utility（沿用設計；名稱不與頁面衝突者放全域） ============================================================ */ .ey{ font-family:var(--latin); font-weight:600; letter-spacing:8px; text-transform:uppercase; color:var(--gold); font-size:19px; } .gold{ color:var(--gold); } /* ============================================================ HOME —— .hp（Main.dc.html） ============================================================ */ .hp{ position:relative; width:100%; max-width:1440px; margin:0 auto; background:var(--ink); color:var(--cream); overflow:hidden; } .hp .col{ width:min(1040px,88%); margin:0 auto; } .hp .sec-h{ font-family:var(--serif); font-weight:900; font-size:44px; letter-spacing:4px; margin:10px 0 0; color:var(--cream-hi); } .hp .rule{ width:56px; height:1px; background:var(--gold); margin:16px 0 34px; } /* hero */ .hp .hero{ position:relative; min-height:936px; text-align:center; overflow:hidden; } .hp .hero-kv{ position:absolute; inset:0; background-position:center right; background-size:cover; background-repeat:no-repeat; filter:grayscale(1) sepia(.55) saturate(1.15) brightness(.82) contrast(1.02); opacity:.5; } .hp .hero-scrim{ position:absolute; inset:0; background: radial-gradient(1200px 820px at 50% 44%, rgba(var(--ink-rgb),.4), rgba(var(--ink-rgb),.92) 80%), radial-gradient(1100px 760px at 50% 2%, rgba(var(--gold-rgb),.16), transparent 60%), linear-gradient(180deg, rgba(var(--ink-rgb),.5), transparent 24% 66%, var(--ink) 98%); } .hp .hero-in{ position:relative; z-index:2; padding:172px 20px 40px; } .hp .hero .eyebrow{ font-family:var(--latin); font-weight:600; font-size:24px; letter-spacing:14px; color:var(--gold); text-transform:uppercase; } .hp .hero-rule{ width:60px; height:1px; background:var(--gold); margin:18px auto 22px; position:relative; } .hp .hero-rule::before,.hp .hero-rule::after{ content:"\25C6"; position:absolute; top:-9px; color:var(--gold); font-size:11px; } .hp .hero-rule::before{ left:-26px; } .hp .hero-rule::after{ right:-26px; } .hp .hero .preyr{ font-family:var(--latin); font-weight:600; font-size:44px; letter-spacing:18px; color:var(--gold); margin-bottom:12px; } .hp .hero h1{ font-family:var(--serif); font-weight:900; font-size:clamp(56px,11vw,120px); line-height:1; letter-spacing:8px; margin:0; color:var(--cream-hi); text-shadow:0 6px 40px rgba(0,0,0,.55); } .hp .hero h1 .sf{ font-family:var(--latin); font-weight:700; letter-spacing:6px; } .hp .hero .slogan{ margin-top:26px; font-family:var(--serif); font-weight:700; font-size:27px; letter-spacing:6px; color:var(--gold-hi); } .hp .hero .cta{ margin-top:40px; display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; } .hp .btn-g{ font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:6px; color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); padding:17px 52px; box-shadow:0 16px 44px rgba(var(--gold-rgb),.3); } .hp .btn-g:hover{ color:var(--ink); filter:brightness(1.04); } .hp .btn-o{ font-family:var(--latin); font-weight:600; font-size:19px; letter-spacing:5px; color:var(--txt-2); text-transform:uppercase; border-bottom:1px solid rgba(var(--gold-rgb),.4); padding-bottom:5px; } .hp .hero .meta{ margin-top:48px; display:flex; justify-content:center; gap:0; flex-wrap:wrap; } .hp .hero .meta .c{ padding:0 44px; border-right:1px solid rgba(var(--gold-rgb),.22); } .hp .hero .meta .c:last-child{ border-right:0; } .hp .hero .meta .k{ font-family:var(--latin); font-size:14px; letter-spacing:4px; color:var(--txt-3); text-transform:uppercase; } .hp .hero .meta .v{ font-family:var(--serif); font-weight:700; font-size:26px; margin-top:6px; letter-spacing:2px; } .hp .hero .meta .v em{ color:var(--gold); font-style:normal; } /* section */ .hp .sec{ padding:88px 0; border-top:1px solid var(--line-2); } /* schedule */ .hp .sch{ width:100%; border-collapse:collapse; margin-top:6px; } .hp .sch th,.hp .sch td{ text-align:left; padding:16px 8px; border-bottom:1px solid rgba(var(--gold-rgb),.14); } .hp .sch th{ font-family:var(--latin); font-size:15px; letter-spacing:4px; color:var(--txt-4); text-transform:uppercase; font-weight:600; } .hp .sch td{ font-size:18px; color:#dbe3f7; } .hp .sch .date{ font-family:var(--serif); font-weight:700; color:var(--cream-hi); white-space:nowrap; font-variant-numeric:tabular-nums; } .hp .sch .type{ color:var(--txt-2); white-space:nowrap; } .hp .sch .fin td{ color:var(--gold); } .hp .sch .fin .type{ color:var(--gold); } .hp .sch .act{ text-align:right; font-size:15px; letter-spacing:1px; white-space:nowrap; } .hp .sch .full{ color:var(--txt-4); } .hp .sch tr:last-child td{ border-bottom:0; } /* 賽程每場次：報名／簽到／查看三顆按鈕（開 modal） */ .hp .sch .sch-btns{ display:inline-flex; gap:8px; justify-content:flex-end; flex-wrap:nowrap; align-items:center; } .hp .sch-btn{ font-family:var(--serif); font-weight:700; font-size:13px; letter-spacing:2px; white-space:nowrap; padding:7px 15px; cursor:pointer; color:var(--gold-hi); background:transparent; border:1px solid rgba(var(--gold-rgb),.4); border-radius:2px; transition:background .15s, color .15s, border-color .15s, filter .15s; } .hp .sch-btn:hover{ color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); border-color:var(--gold); } .hp .sch-btn.is-apply{ color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); border-color:var(--gold); } .hp .sch-btn.is-apply:hover{ filter:brightness(1.06); } /* rules */ .hp .rules{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-top:6px; } .hp .rc{ border:1px solid rgba(var(--gold-rgb),.2); background:rgba(var(--gold-rgb),.03); padding:26px 30px; } .hp .rc .n{ font-family:var(--latin); font-weight:600; font-size:16px; letter-spacing:4px; color:var(--gold); text-transform:uppercase; } .hp .rc .t{ font-family:var(--serif); font-weight:700; font-size:24px; margin:8px 0; color:var(--cream-hi); letter-spacing:1px; } .hp .rc p{ margin:0; font-size:16px; line-height:1.8; color:var(--txt-2); } .hp .rc p em{ color:var(--gold-hi); font-style:normal; font-weight:700; } .hp .more{ margin-top:26px; font-family:var(--latin); font-weight:600; font-size:19px; letter-spacing:3px; } /* register block on home */ .hp .reg{ display:grid; grid-template-columns:340px 1fr; gap:56px; margin-top:6px; align-items:start; } .hp .reg .elig .lab{ font-family:var(--latin); font-weight:600; letter-spacing:4px; color:var(--txt-3); text-transform:uppercase; font-size:14px; } .hp .reg .elig ul{ list-style:none; margin:12px 0 0; padding:0; } .hp .reg .elig li{ position:relative; padding:9px 0 9px 22px; font-size:16px; color:#c9d4ee; border-bottom:1px dashed rgba(var(--gold-rgb),.14); } .hp .reg .elig li::before{ content:"\25C6"; position:absolute; left:0; top:11px; color:var(--gold); font-size:9px; } .hp .reg .elig .when{ margin-top:20px; font-size:15px; color:var(--txt-3); } .hp .reg .elig .when b{ color:var(--gold-hi); font-weight:700; } .hp .steps{ counter-reset:s; } .hp .steps .st{ counter-increment:s; position:relative; padding:0 0 26px 66px; } .hp .steps .st:last-child{ padding-bottom:0; } .hp .steps .st::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-4px; font-family:var(--latin); font-weight:700; font-size:34px; color:var(--gold); } .hp .steps .st::after{ content:""; position:absolute; left:16px; top:38px; bottom:8px; width:1px; background:rgba(var(--gold-rgb),.2); } .hp .steps .st:last-child::after{ display:none; } .hp .steps .st h4{ margin:0 0 4px; font-family:var(--serif); font-weight:700; font-size:20px; color:var(--cream-hi); letter-spacing:1px; } .hp .steps .st p{ margin:0; font-size:15.5px; color:#93a3c6; line-height:1.7; } .hp .reg-cta{ margin-top:36px; } /* prizes */ .hp .prizes{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; margin-top:6px; } .hp .pz{ text-align:center; border:1px solid rgba(var(--gold-rgb),.2); padding:30px 14px; } .hp .pz.champ{ border-color:var(--gold); background:rgba(var(--gold-rgb),.06); } .hp .pz .rank{ font-family:var(--latin); font-weight:600; font-size:15px; letter-spacing:4px; color:var(--txt-3); text-transform:uppercase; } .hp .pz .zh{ font-family:var(--serif); font-weight:900; font-size:34px; margin:6px 0 12px; color:var(--cream-hi); } .hp .pz.champ .zh{ color:var(--gold); } .hp .pz .val{ font-family:var(--serif); font-weight:700; font-size:22px; color:#dbe3f7; letter-spacing:1px; } .hp .pz.champ .val{ color:var(--gold-hi); } .hp .pz .val.tbd{ font-family:var(--sans); font-weight:400; font-size:14px; color:#6b7ea6; } .hp .pz-note{ text-align:center; margin-top:24px; font-size:14px; color:var(--txt-4); letter-spacing:1px; } /* sponsors */ .hp .spon-row{ display:flex; justify-content:center; align-items:center; gap:64px; margin-top:20px; flex-wrap:wrap; } .hp .spon-row img.spon-logo{ height:72px; width:auto; opacity:.92; } .hp .spon-note{ margin-top:26px; font-size:13px; color:var(--txt-4); letter-spacing:1px; text-align:center; } /* ============================================================ 共用表單外殼（register / signin / manage 共通） root 分別 .rg / .sg / .mg，衝突值於各自 root 覆蓋 ============================================================ */ .rg,.sg,.mg{ position:relative; width:100%; max-width:1440px; margin:0 auto; min-height:60vh; background:var(--ink); color:var(--cream); background-image:radial-gradient(1100px 620px at 50% -8%, rgba(var(--gold-rgb),.12), transparent 60%); } .rg .wrap,.sg .wrap,.mg .wrap{ width:min(1080px,90%); margin:0 auto; padding:44px 0 60px; } .rg .h1,.sg .h1,.mg .h1{ font-family:var(--serif); font-weight:900; font-size:clamp(30px,4.4vw,42px); letter-spacing:3px; margin:8px 0 0; color:var(--cream-hi); } .rg .lead,.sg .lead{ margin:12px 0 0; color:#93a3c6; font-size:16px; } /* 水平 stepper（register / signin） */ .rg .steps,.sg .steps{ display:flex; align-items:center; margin:34px 0 40px; flex-wrap:wrap; gap:8px 0; } .rg .stp,.sg .stp{ display:flex; align-items:center; gap:14px; } .rg .stp .num,.sg .stp .num{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--gold-rgb),.4); display:flex; align-items:center; justify-content:center; font-family:var(--latin); font-weight:700; font-size:19px; color:var(--txt-3); flex:none; } .rg .stp .tx,.sg .stp .tx{ font-size:15px; color:var(--txt-3); letter-spacing:1px; } .sg .stp.done .num{ border-color:rgba(var(--gold-rgb),.5); color:var(--gold); } .rg .stp.on .num,.sg .stp.on .num{ background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); border-color:var(--gold); color:var(--ink); } .rg .stp.on .tx,.sg .stp.on .tx{ color:var(--cream); font-weight:700; } .rg .stp .bar,.sg .stp .bar,.rg .bar,.sg .bar{ width:clamp(28px,5vw,64px); height:1px; background:rgba(var(--gold-rgb),.24); margin:0 clamp(8px,1.5vw,18px); } /* grid：主表單 + 側欄 */ .rg .grid,.sg .grid,.mg .grid{ display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; } .sg .grid{ grid-template-columns:1fr 372px; } /* card / fields */ .rg .card,.sg .card,.mg .card{ border:1px solid rgba(var(--gold-rgb),.28); background:rgba(var(--gold-rgb),.05); padding:34px 36px; } .mg .card{ padding:32px 34px; } .rg .fl,.sg .fl,.mg .fl{ margin-bottom:22px; } .rg .fl label,.sg .fl label,.mg .fl label{ display:block; font-size:14px; letter-spacing:1px; color:var(--txt-2); margin-bottom:8px; } .rg .fl label em,.sg .fl label em,.mg .fl label em{ color:#8296bd; font-style:normal; font-size:12.5px; margin-left:8px; } .rg .inp,.sg .inp,.mg .inp{ width:100%; height:50px; background:#161c30; border:1px solid rgba(var(--gold-rgb),.42); color:var(--cream); font-family:inherit; font-size:16px; padding:0 16px; box-sizing:border-box; } /* 真表單元件用同一外觀 */ .rg select.inp,.sg select.inp,.mg select.inp{ -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 16px center; background-size:14px; padding-right:40px; } .rg .inp:focus,.sg .inp:focus,.mg .inp:focus{ outline:none; border-color:var(--gold); } .rg .inp::placeholder,.sg .inp::placeholder,.mg .inp::placeholder{ color:#7d90b8; } /* 鎖定欄（唯讀/系統帶入）：金底淡染＋金字，與可編輯欄（深底亮框）明確區分 */ .rg .inp.fixed,.sg .inp.fixed,.mg .inp.fixed{ color:var(--gold-hi); background:rgba(var(--gold-rgb),.07); border-color:rgba(var(--gold-rgb),.18); display:flex; align-items:center; } .rg .ph,.sg .ph,.mg .ph{ color:#7d90b8; } /* 名單列 */ .rg .rlab,.mg .rlab{ display:flex; align-items:baseline; justify-content:space-between; margin:6px 0 12px; gap:12px; flex-wrap:wrap; } .rg .rlab .t,.mg .rlab .t{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--cream-hi); letter-spacing:1px; } .rg .rlab .h,.mg .rlab .h{ font-size:13px; color:var(--txt-3); } .rg .mrow,.mg .mrow{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .rg .mrow .tag,.mg .mrow .tag{ width:92px; flex:none; font-size:13px; letter-spacing:1px; color:#8ea0c6; } .mg .mrow .tag{ width:60px; } .rg .mrow .tag.sub,.mg .mrow .tag.sub{ color:#7d90b8; } .rg .mrow .inp,.mg .mrow .inp{ height:46px; flex:1; } /* CTA / 按鈕 */ .rg .cta,.sg .cta,.mg .cta{ margin-top:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .mg .cta{ margin-top:30px; } .rg .btn-g,.sg .btn-g,.mg .btn-g{ font-family:var(--serif); font-weight:700; font-size:18px; letter-spacing:5px; color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); padding:16px 46px; border:0; cursor:pointer; } .sg .btn-g{ letter-spacing:6px; padding:16px 52px; } .mg .btn-g{ letter-spacing:4px; padding:16px 44px; } .rg .btn-g:hover,.sg .btn-g:hover,.mg .btn-g:hover{ filter:brightness(1.04); } .rg .btn-o,.mg .btn-o{ font-family:var(--latin); font-weight:600; font-size:17px; letter-spacing:4px; color:var(--txt-2); text-transform:uppercase; background:none; border:0; cursor:pointer; } /* note */ .rg .note{ margin-top:20px; font-size:14px; color:#93a3c6; line-height:1.7; border-left:2px solid rgba(var(--gold-rgb),.4); padding-left:14px; } .rg .note b{ color:var(--gold-hi); } /* 側欄（register / manage 通用清單樣式） */ .rg .side .st,.mg .side .st{ font-family:var(--latin); font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-size:15px; } .rg .side h3,.mg .side h3{ font-family:var(--serif); font-weight:700; font-size:22px; margin:6px 0 16px; color:var(--cream-hi); letter-spacing:1px; } .rg .side ul{ list-style:none; margin:0; padding:0; } .rg .side li{ position:relative; padding:11px 0 11px 20px; font-size:14.5px; color:#b6c4e4; border-bottom:1px dashed rgba(var(--gold-rgb),.14); line-height:1.6; } .rg .side li::before{ content:"\25C6"; position:absolute; left:0; top:14px; color:var(--gold); font-size:8px; } .rg .side .when{ margin-top:18px; font-size:14px; color:var(--txt-3); } .rg .side .when b{ color:var(--gold-hi); } /* ============================================================ SIGNIN 專屬（.sg） ============================================================ */ .sg .otp{ display:flex; gap:12px; } .sg .otp .inp{ flex:1; } .sg .otp .send{ flex:none; padding:0 22px; height:50px; border:1px solid rgba(var(--gold-rgb),.4); background:transparent; color:var(--gold); font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:2px; cursor:pointer; white-space:nowrap; } .sg .otp .send:hover{ border-color:var(--gold); color:var(--gold-hi); } .sg .side .st{ display:flex; align-items:baseline; justify-content:space-between; } .sg .side .st .team{ font-family:var(--serif); font-weight:700; font-size:22px; color:var(--cream-hi); letter-spacing:1px; } .sg .side .st .cnt{ font-family:var(--latin); font-weight:700; font-size:18px; color:var(--gold); } .sg .side .venue{ font-size:13.5px; color:var(--txt-4); margin:4px 0 18px; } .sg .roster{ list-style:none; margin:0; padding:0; } .sg .roster li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line-2); } .sg .roster .who{ font-size:15px; color:#c9d4ee; } .sg .roster .who .r{ color:var(--txt-4); font-size:12.5px; margin-left:8px; } .sg .edit{ margin-top:16px; font-size:13.5px; color:var(--txt-3); line-height:1.7; } .sg .edit b{ color:var(--gold-hi); } .sg .reset{ margin-top:20px; font-size:13.5px; color:#c9a0a0; line-height:1.7; border-left:2px solid var(--warn-bd); padding-left:14px; } .sg .reset b{ color:#e79a92; } /* badge（signin / manage 共用） */ .bdg{ flex:none; font-size:12.5px; letter-spacing:1px; padding:3px 11px; border-radius:999px; border:1px solid; white-space:nowrap; } .bdg.ok{ color:var(--ok); border-color:#2e6d4c; background:rgba(95,200,144,.08); } .bdg.no{ color:var(--txt-4); border-color:rgba(var(--gold-rgb),.2); } .bdg.me{ color:var(--gold-hi); border-color:#0c6cc0; background:rgba(var(--gold-rgb),.08); } /* ============================================================ MANAGE 專屬（.mg） ============================================================ */ .mg .warn{ margin:24px 0 32px; display:flex; gap:14px; align-items:flex-start; border:1px solid var(--warn-bd); background:rgba(179,54,43,.1); padding:16px 20px; } .mg .warn svg{ width:22px; height:22px; flex:none; margin-top:2px; } .mg .warn .t{ font-size:15px; line-height:1.7; color:#f0c9c4; } .mg .warn .t b{ color:var(--warn-tx); } .mg .mrow .bdg{ font-size:12px; padding:3px 10px; } .mg .rm{ flex:none; width:38px; height:38px; border:1px solid rgba(var(--gold-rgb),.22); background:transparent; color:#a88; cursor:pointer; display:flex; align-items:center; justify-content:center; } .mg .rm svg{ width:14px; height:14px; } .mg .addrow{ margin-top:6px; display:flex; align-items:center; gap:10px; color:var(--gold); font-size:15px; cursor:pointer; border:1px dashed rgba(var(--gold-rgb),.3); padding:12px 16px; justify-content:center; letter-spacing:1px; } .mg .addrow svg{ width:15px; height:15px; } .mg .inp.val{ color:var(--cream); display:flex; align-items:center; justify-content:space-between; } .mg .side .kv{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line-2); font-size:14.5px; } .mg .side .kv .k{ color:var(--txt-3); } .mg .side .kv .v{ color:#dbe3f7; font-weight:700; } .mg .side .kv .v.g{ color:var(--ok); } .mg .side .memo{ margin-top:18px; font-size:13.5px; color:#93a3c6; line-height:1.75; } .mg .side .memo b{ color:var(--gold-hi); } /* 隊長登入卡（manage 未登入態） */ .mg .login-card{ max-width:520px; } /* ============================================================ TEAMS 報名隊伍列表（.tm）—— 沿用金色 tokens ============================================================ */ .tm{ width:100%; max-width:1440px; margin:0 auto; background:var(--ink); color:var(--cream); background-image:radial-gradient(1100px 620px at 50% -8%, rgba(var(--gold-rgb),.12), transparent 60%); } .tm .wrap{ width:min(1080px,90%); margin:0 auto; padding:44px 0 60px; } .tm .h1{ font-family:var(--serif); font-weight:900; font-size:clamp(28px,4vw,40px); letter-spacing:3px; margin:8px 0 0; color:var(--cream-hi); } .tm .venue{ margin:10px 0 0; color:#93a3c6; font-size:15px; } .tm .cap{ margin:6px 0 0; font-size:14px; color:var(--txt-4); } .tm table{ width:100%; border-collapse:collapse; margin-top:28px; } .tm th,.tm td{ text-align:left; padding:15px 10px; border-bottom:1px solid rgba(var(--gold-rgb),.14); } .tm th{ font-family:var(--latin); font-size:14px; letter-spacing:3px; color:var(--txt-4); text-transform:uppercase; font-weight:600; } .tm td{ font-size:16px; color:#dbe3f7; } .tm td.team{ font-family:var(--serif); font-weight:700; color:var(--cream-hi); } .tm td.n{ color:var(--txt-3); font-variant-numeric:tabular-nums; } .tm .status{ font-size:12.5px; letter-spacing:1px; padding:3px 11px; border-radius:999px; border:1px solid; } .tm .status.ok{ color:var(--ok); border-color:#2e6d4c; background:rgba(95,200,144,.08); } .tm .status.wait{ color:var(--txt-4); border-color:rgba(var(--gold-rgb),.2); } .tm .empty{ padding:40px 10px; text-align:center; color:var(--txt-4); } .tm .back{ margin-top:30px; font-family:var(--latin); letter-spacing:2px; } /* ============================================================ RWD —— 表單/側欄在窄螢幕收成單欄 ============================================================ */ @media (max-width:900px){ .rg .grid,.sg .grid,.mg .grid{ grid-template-columns:1fr; gap:28px; } .hp .reg{ grid-template-columns:1fr; gap:32px; } .hp .rules{ grid-template-columns:1fr; } .hp .prizes{ grid-template-columns:repeat(2, minmax(0,1fr)); } .hp .sec{ padding:60px 0; } .hp .hero{ min-height:640px; } .hp .hero-in{ padding-top:110px; } .site-hd nav{ display:none; } } @media (max-width:560px){ .hp .prizes{ grid-template-columns:1fr; } .hp .hero .meta .c{ border-right:0; padding:8px 0; } /* 賽程表在窄螢幕改「卡片式」堆疊——保留報名/簽到/查看按鈕（不再隱藏 .act） */ .hp .sch, .hp .sch tbody, .hp .sch tr, .hp .sch td{ display:block; width:auto; } .hp .sch thead{ display:none; } .hp .sch tr{ border:1px solid rgba(var(--gold-rgb),.2); border-radius:2px; padding:14px 16px; margin-bottom:14px; } .hp .sch tr.fin{ border-color:rgba(var(--gold-rgb),.34); } .hp .sch td{ border-bottom:0; padding:3px 0; white-space:normal; } .hp .sch td[data-l]::before{ content:attr(data-l)"　"; color:var(--txt-4); font-family:var(--latin); letter-spacing:2px; font-size:12px; } .hp .sch .type{ color:var(--gold); } .hp .sch .date{ font-size:19px; } .hp .sch .act{ text-align:left; margin-top:12px; } .hp .sch .act .sch-btns{ justify-content:flex-start; flex-wrap:wrap; } .rg .card,.sg .card,.mg .card{ padding:24px 20px; } } /* ---- 報名確認頁（register/confirm）---- */ .cf-summary{ display:flex; gap:40px; flex-wrap:wrap; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid rgba(var(--gold-rgb),.16); } .cf-summary .k{ display:block; font-size:13px; color:#8ea0c6; letter-spacing:1px; margin-bottom:4px; } .cf-summary .v{ font-family:"Noto Serif TC",serif; font-weight:700; font-size:19px; color:#ffffff; } .cf-roster{ width:100%; border-collapse:collapse; } .cf-roster th{ text-align:left; padding:10px 12px; font-size:12.5px; letter-spacing:1px; color:#6b7ea6; border-bottom:1px solid rgba(var(--gold-rgb),.16); } .cf-roster td{ padding:12px; border-bottom:1px solid rgba(var(--gold-rgb),.1); } .cf-roster .slot{ color:#8ea0c6; font-size:14px; } .cf-roster .acc{ color:#aeb9d6; font-family:"JetBrains Mono",monospace; font-size:14px; } .cf-roster .nick strong{ color:var(--gold-hi); font-family:"Noto Serif TC",serif; font-size:18px; } .cf-roster .nick .no{ color:#e79a92; font-size:13.5px; } .cf-warn{ margin-top:18px; padding:14px 18px; border:1px solid #7a3b34; background:rgba(179,54,43,.1); color:#f0c9c4; font-size:14px; line-height:1.7; } .cf-actions{ margin-top:28px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .cf-actions form{ margin:0; } /* ============================================================ RULES 賽事規章頁（.ru）—— 沿用金色 tokens 內容＝event.rules 純文字經 e() 跳脫後轉

/

/