/* ══════════════════════════════════════════════════════════════ chrome.css — 全站共用外框（top bar · 右上角 selector · 按鈕 · 頁尾 · 會員卡） ⛔ 只放外框，唔放內容樣式。site.css 有 h1/h2/.card，landing 有自己一套排版， 兩者撞埋會拆咗個首頁。呢個檔要喺每一頁 最後 link。 ⛔ 設計基準 = 首頁。之前四個檔各有一套（1180/820/760/920px、 SVG wordmark vs 純文字、64/60/58px），跨頁走一轉個 logo 會左右跳。 ══════════════════════════════════════════════════════════════ */ :root{ --shell:1180px; } .top{position:sticky;top:0;z-index:60;background:rgba(240,238,230,.94); backdrop-filter:saturate(1.6) blur(9px);border-bottom:1px solid var(--hair)} .top .in{max-width:var(--shell);margin:0 auto;padding:0 20px;height:64px; display:flex;align-items:center;gap:18px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none; flex:0 0 auto;min-height:44px;color:var(--ink)} /* wordmark 係自家畫嘅 SVG 唔係字型 —— currentColor，點放大都唔會蒙 */ .wm{display:block;height:14px;width:auto;flex:0 0 auto} .brand:hover .wm{color:var(--gold-d)} .brand .mk{width:34px;height:34px;border-radius:8px;overflow:hidden;display:block; flex:0 0 auto;background:var(--paper)} .brand .mk img{width:205%;height:205%;margin:-52.5%;display:block} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .spacer,.sp{flex:1} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px; padding:0 16px;border-radius:9px;font-size:15px;font-weight:700;text-decoration:none; border:0;cursor:pointer;font-family:inherit;transition:all .18s var(--ease)} .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair);background:none} .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink3);background:var(--paper2)} .btn.gold{background:var(--gold);color:#241C00;box-shadow:0 1px 0 var(--gold-d)} .btn.gold:hover{background:var(--gold-d);color:#fff} .btn.lg{min-height:54px;padding:0 26px;border-radius:11px} .btn.sm{padding:0 13px;font-size:12px;border-radius:8px} /* ⛔ 唔縮 min-height：44px 觸控下限 */ .btn.danger{color:var(--rust);box-shadow:inset 0 0 0 1.5px #E4C7BE;background:none} .badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px; background:var(--gold-l);color:#4A3800;white-space:nowrap;flex:0 0 auto} /* ══ 頭像 ══ 首字母圓圈，底色跟層級 —— 一眼睇到自己邊個層 */ .av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%; font-weight:700;font-size:15px;flex:0 0 auto; background:#DED8C6;color:var(--ink2);overflow:hidden} .av.big{width:46px;height:46px;font-size:19px} .av-free{background:#DED8C6;color:#4A4638} .av-basic{background:#B9BFC6;color:#26292E} .av-premium{background:var(--gold);color:#241C00} .av-vip{background:#22242B;color:#BFE3F5;box-shadow:inset 0 0 0 1.5px #6FA9C4} .av-anon{background:none;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--hair)} /* ══ 右上角 selector ══ */ .usel{position:relative;flex:0 0 auto} .usel>summary{list-style:none;cursor:pointer;display:grid;place-items:center; width:44px;height:44px;border-radius:50%;transition:background .18s var(--ease)} .usel>summary::-webkit-details-marker{display:none} .usel>summary:hover{background:#E7E2D4} .usel>summary:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px} .usel[open]>summary{background:#E2DCCC} .umenu{position:absolute;right:0;top:calc(100% + 10px);width:290px;z-index:70; background:var(--paper2);border:1px solid var(--hair);border-radius:14px; box-shadow:0 12px 32px rgba(28,27,23,.14);overflow:hidden} .uhead{display:flex;gap:12px;align-items:center;padding:15px 16px; border-bottom:1px solid var(--hair)} .uinfo{min-width:0;flex:1} .unm{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .uem{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .utier{display:inline-block;margin-top:6px;font-size:12px;font-weight:700; padding:2px 9px;border-radius:999px} /* ⛔ 四個 chip 嘅顏色一定要同會員卡（.mc-*）夾得埋，亦要對得住個層名。 .t-basic 一路都係淺綠 —— 嗰陣個層仲叫「基本」睇唔出問題，改咗做 SILVER 之後，訂閱頁三張卡並排就變成「綠色嘅 SILVER、金色嘅 GOLD、黑色嘅 DIAMOND」， 一眼就知有樣嘢錯咗。改返銀色，同 .mc-basic 個漸變同一家族。 */ .t-free{background:#EDE8DA;color:var(--ink2)} .t-basic{background:#DDE1E5;color:#2C3238} .t-premium{background:var(--gold-l);color:#4A3800} .t-vip{background:#22242B;color:#BFE3F5} .ugrp{padding:6px;border-bottom:1px solid var(--hair)} .ugrp:last-child{border-bottom:0} .ugrp a,.ugrp button{display:flex;align-items:center;gap:11px;width:100%; min-height:44px;padding:0 11px;border-radius:9px;font:inherit;font-size:15px; color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer; text-align:left} .ugrp a:hover,.ugrp button:hover{background:#EDE8DA} .ugrp a[aria-current=page]{background:#E7E2D4;font-weight:700} .ugrp a.hi{color:var(--gold-d);font-weight:700} .ugrp .ui{display:grid;place-items:center;width:20px;color:var(--ink3); font-size:13px;flex:0 0 auto} .ugrp form{margin:0} /* ⛔ 次要連結一樣要 44px 觸控高度，只縮字唔縮高 */ .ugrp.sub a{font-size:12px;color:var(--ink3)} /* ══ 會員卡 ══ 四層各一個色。⛔ 唔用同一款卡加個字 —— 分層係產品核心， 一眼認得出邊個層，比讀文字快，亦令升級有實感。 */ .mcard{position:relative;border-radius:16px;padding:20px 22px 22px;overflow:hidden; aspect-ratio:1.62/1;max-width:430px;display:flex;flex-direction:column; box-shadow:0 6px 20px rgba(28,27,23,.13)} .mcard .tier{font-size:19px;font-weight:800;letter-spacing:.06em;line-height:1.15} .mcard .sub{font-size:12px;font-weight:600;letter-spacing:.22em;opacity:.72; text-transform:uppercase;margin-top:2px} /* 用戶名置中（用戶指定）：卡中央，唔跟參考圖擺左下 */ .mcard .who{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;gap:4px;padding:6px 0} .mcard .nm{font-size:24px;font-weight:700;letter-spacing:.03em;line-height:1.2; word-break:break-word} .mcard .meta{font-size:12px;letter-spacing:.1em;opacity:.78} .mcard .exp{font-size:12px;opacity:.8;font-family:var(--mono)} /* 右上角水印 = 品牌馬（用戶指定），顏色跟層級走。 ⛔ 原圖 logo.png 係全不透明（RGBA 但 alpha 全 255），做唔到 mask → 由原圖抽出馬嘅輪廓另存 logo-mask.png（白色 + alpha）， 再用 mask-image + background-color 逐層上色。唔可以用 CSS filter 硬 tint。 */ /* ⛔ 個盒要大過張卡，令馬嘅底邊**溢出卡外**畀 overflow:hidden 切走。 盒細過張卡嘅話，原圖個直角底邊會露喺卡中間，睇落似圖爛咗。 用 % 唔用 px：手機卡細啲，比例要跟住縮。 */ /* 尺寸點計：馬長寬比 382:487 ≈ 0.784。盒高 126% 卡高（265×1.26≈334）， 所以盒**至少要 334×0.784≈262px ＝ 卡闊 61%** 先裝得落成隻馬。 盒窄過呢個數 → 馬畀盒切走左邊，出一條垂直硬邊（試過 46% 就係咁）。 取 64% 留鬆動，再 right:-24% 推出去，令右半隻馬喺卡外由 overflow 切走， 卡入面淨返馬頭 —— 認得出，又唔會壓住置中嘅用戶名。 */ .mcard .mark{position:absolute;right:-24%;top:-8%;width:64%;height:126%; pointer-events:none; -webkit-mask:url(/static/logo-mask.png) no-repeat right top/auto 100%; mask:url(/static/logo-mask.png) no-repeat right top/auto 100%} .mc-free{background:linear-gradient(135deg,#EFEBDD 0%,#DBD4C0 100%);color:#3A362B} .mc-free .tier{color:#6E6650} .mc-free .mark{background:#6E6650;opacity:.14} /* SILVER */ .mc-basic{background:linear-gradient(135deg,#E4E7EA 0%,#A9B0B8 100%);color:#22262B} .mc-basic .tier{color:#4A5560} .mc-basic .mark{background:#FFFFFF;opacity:.40} /* GOLD */ .mc-premium{background:linear-gradient(135deg,#EBC44A 0%,#B98705 100%);color:#2A1F00} .mc-premium .tier{color:#fff} .mc-premium .mark{background:#FFFFFF;opacity:.26} /* DIAMOND */ .mc-vip{background:linear-gradient(135deg,#2B2E37 0%,#14161B 100%);color:#E7F3FA} .mc-vip .tier{color:#8FD3F4} .mc-vip .mark{background:#8FD3F4;opacity:.20} /* ══ 個人設定版面 ══ ⛔ 唔可以喺 1180px 闊嘅版面度擺一張 430px 卡靠晒左 —— 空一大片。 整版收窄成一條置中欄，卡同標題都置中。 */ .acct{max-width:470px;margin:0 auto;padding-bottom:8px} .acct .ttl{text-align:center;margin:8px 0 26px} .acct .mcard{margin:0 auto 34px} /* 唯讀資料列。⛔ 唔用一個個獨立框（睇落似 disabled 嘅輸入框，好舊）： 改用一塊面板 + 髮絲分隔線，label 細而灰、值企右邊。 */ .info{border:1px solid var(--hair);border-radius:14px;background:var(--paper2); overflow:hidden} .info .row{display:flex;align-items:baseline;gap:14px;padding:15px 18px; border-bottom:1px solid var(--hair)} .info .row:last-child{border-bottom:0} .info .k{font-size:12px;color:var(--ink3);font-weight:700;flex:0 0 88px; letter-spacing:.02em} .info .v{flex:1;text-align:right;word-break:break-word;font-weight:600} .info .v.mono{font-family:var(--mono);font-weight:500;letter-spacing:-.01em} /* 「不可更改」用細灰字，唔用 🔒 emoji —— emoji 本身就係一種舊感 */ .info .fixed{font-size:12px;color:var(--ink3);font-weight:400;flex:0 0 auto; padding:2px 8px;border-radius:999px;background:#EDE8DA} .info .fixed.wait{background:var(--gold-l);color:#4A3800;font-weight:700} /* ══ 待核付款卡（/admin）══ 左邊對數、右邊張截圖，一屏睇齊唔使捲上捲落 */ .pcard{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px; background:var(--paper2);border:1px solid var(--hair);border-radius:14px; padding:16px 18px;margin-bottom:14px;align-items:start} .pcard .pno{font-size:12px;color:var(--ink3);font-weight:700;margin-bottom:8px} .pcard .info{background:#fff} .pproof{position:relative} .pproof img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain; background:#fff;border:1px solid var(--hair);border-radius:10px} .pproof .sm{margin-top:6px;text-align:center} .noproof{display:grid;place-items:center;min-height:150px;border-radius:10px; border:1px dashed #E4C7BE;background:#FBEDE8;color:#7A2E15;font-size:13px} @media(max-width:820px){ .pcard{grid-template-columns:1fr} } /* ══ 付款狀態 ══ 擺喺會員卡下面 —— 客畀完錢入嚟第一眼就要見到「而家去到邊」 */ .pstat{border-radius:14px;padding:17px 19px 19px;margin:0 0 22px;text-align:left} .pstat .pt{font-size:15px;font-weight:700;margin-bottom:3px} .pstat .pl{font-size:14px;margin-bottom:2px} .pstat .pd{font-size:12px;color:var(--ink3);margin:0} .pstat p{font-size:13px;margin:9px 0 0} /* 核實中＝進行緊，用金色（同全站「而家嗰樣」一致）； ⛔ 唔用綠色 —— 綠會讀成「搞掂」，但佢實情係仲未開通。 */ .pstat.s-pending{background:#fff;box-shadow:inset 0 0 0 1.5px var(--gold)} .pstat.s-pending .pt{color:#6B4E00} .pstat.s-rejected{background:#FBEDE8;box-shadow:inset 0 0 0 1.5px #E4C7BE} .pstat.s-rejected .pt{color:#7A2E15} .pstat.s-rejected p{color:#7A2E15} /* 頁尾 */ .foot{border-top:1px solid var(--hair);margin-top:34px;padding:26px 0 46px; font-size:12px;color:var(--ink3)} .foot .in{max-width:var(--shell);margin:0 auto;padding:0 20px} .foot .lk{display:flex;flex-wrap:wrap;gap:0 18px;margin-bottom:10px} .foot a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .foot a:hover{color:var(--ink)} .foot .age{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--ink);color:var(--paper);font-size:12px;font-weight:700; flex:0 0 auto;margin-right:10px} .foot .l18{display:flex;align-items:flex-start;line-height:1.75;margin:0} /* ⛔ 段落文字必須包喺 .l18t 一個 element 入面（見 _footer.html 註）。 flex container 之下，每段連續 inline 文字同每個子元素都會各自變成一個 anonymous flex item —— 直接放裸文字， 就會自己霸一欄直住排。 min-width:0 係俾佢喺窄螢幕縮得返，唔會被最長嗰個字撐爆。 */ .foot .l18 .l18t{flex:1 1 auto;min-width:0} /* 窄螢幕：SVG wordmark 141px 逼爆 bar（實測溢出 51px）→ 換做文字 wordmark（~84px）。 ⛔ 唔可以淨係收起唔補返：右上角頭像已經係同一隻馬，左邊淨返一隻馬就變咗 左右兩隻一模一樣嘅馬，睇落似重複咗個 logo。 */ .brand .txtwm{display:none;font-size:15px;font-weight:700;letter-spacing:-.01em} @media(max-width:560px){ .brand .wm{display:none} .brand .txtwm{display:block} .top .in{gap:10px} .umenu{width:calc(100vw - 32px);right:-6px} .mcard{max-width:none} .mcard .nm{font-size:19px} }