/* Append AFTER existing ui.css; put class teeoff-v3 on body. */ body.teeoff-v3{--paper:#f5f8f5;--ink:#20392e;--ink-soft:#52655b;--grey:#52655b;--green:#00904a;--green-deep:#00703a;--green-tint:#edf7ef;--line:#d5e2d9;--sans:system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;--mono:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:16px;font-weight:400;padding-bottom:calc(78px + env(safe-area-inset-bottom))} .teeoff-v3 .card{border-radius:10px;padding:16px}.teeoff-v3 .btn{border-radius:8px;min-height:48px;font-size:16px}.teeoff-v3 input,.teeoff-v3 select,.teeoff-v3 textarea{border-color:#8fa797;border-radius:6px;min-height:48px}.teeoff-v3 .slot{min-height:58px;font-size:14px;border-radius:5px}.teeoff-v3 .slot small{font-size:12px}.teeoff-v3 .gt{flex-basis:48px;font-size:13px}.teeoff-v3 .mini .k,.teeoff-v3 .fl2,.teeoff-v3 .fh,.teeoff-v3 .sec span,.teeoff-v3 .pill{font-size:13px}.teeoff-v3 .mini .v{font-size:23px}.teeoff-v3 .mini,.teeoff-v3 .note{border-radius:6px}.teeoff-v3 .tb{font-size:13px;min-height:52px}.teeoff-v3 .tabbar{padding-bottom:env(safe-area-inset-bottom)}.teeoff-v3 .swbtn,.teeoff-v3 .sb,.teeoff-v3 .mrt .lnk{min-height:44px}.teeoff-v3 .paths{gap:10px}.teeoff-v3 .path.a,.teeoff-v3 .path.b{background:white;border:1px solid #bdd6c5;color:var(--ink);border-radius:12px}.teeoff-v3 .path h2{color:var(--ink)}.teeoff-v3 .path .arw{background:var(--green-deep);color:white;padding:10px;border:0;border-radius:6px}.teeoff-v3 .path p{font-size:14px}.teeoff-v3 :focus-visible{outline:3px solid #265dc4;outline-offset:3px}.teeoff-v3 .note.danger{border-radius:4px}@media print{body.teeoff-v3{padding:0;background:white}.teeoff-v3 .mascot{display:none}} /* v4: adjust asset path to production location */ .teeoff-v3 .path{position:relative;isolation:isolate;overflow:hidden} .teeoff-v3 .path.a{background:#eaf8ef}.teeoff-v3 .path.b{background:#fff7d6} .teeoff-v3 .path:before{content:"";position:absolute;inset:auto 0 38px;height:135px;background:url(/assets/brand/fairway.svg) center bottom/auto 135px no-repeat;opacity:.7;z-index:-1;pointer-events:none} .teeoff-v3 .path .mascot{background-color:transparent;mix-blend-mode:multiply} /* ══════════════════════════════════════════════════════════ v4 登入／分流頁的專用 class（原 ui.css 沒有這些） 資產路徑已改成本專案的 /assets/brand/ ══════════════════════════════════════════════════════════ */ .teeoff-v3 .hero{text-align:center;padding:8px 0 12px} .teeoff-v3 .hero h1{font-size:27px;font-weight:700;margin:0;line-height:1.35; letter-spacing:.01em;color:var(--ink)} .teeoff-v3 .hero p{margin:10px 0 0;font-size:15px;color:var(--ink-soft)} .teeoff-v3 .roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px} .teeoff-v3 .role{display:flex;flex-direction:column;min-width:0;position:relative; isolation:isolate;overflow:hidden;border:0;border-radius:12px; padding:15px 13px;background:#EAF8EF;min-height:310px; color:var(--ink);text-decoration:none} .teeoff-v3 .role.b{background:#FFF7D6} .teeoff-v3 .role .pk{font-family:var(--mono);font-size:12px;letter-spacing:.1em; color:var(--ink-soft)} .teeoff-v3 .role h2{margin:5px 0 0;font-size:21px;font-weight:700;color:var(--ink)} .teeoff-v3 .role p{margin:9px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.7} /* 球場草坡：共用向量，沒有外部請求 */ .teeoff-v3 .role:before{content:"";position:absolute;z-index:-1;inset:auto 0 38px; height:135px;background:url(/assets/brand/fairway.svg) center bottom/auto 135px no-repeat; opacity:.75;pointer-events:none} .teeoff-v3 .role.b:before{filter:sepia(.2);opacity:.65} /* 吉祥物：白底 sprite，用 multiply 融進卡片底色（交接文件指定）*/ .teeoff-v3 .mascot{width:140px;max-width:100%;height:108px;margin:8px auto 14px; flex-shrink:0;background-image:url(/assets/brand/mascots.webp);background-repeat:no-repeat; background-size:300px auto;background-position:-20px 0; background-color:transparent;mix-blend-mode:multiply} .teeoff-v3 .mascot.girl{background-position:-160px 0} .teeoff-v3 .role .btn{position:relative;z-index:1;margin-top:auto;font-size:15px} .teeoff-v3.course-page{padding-bottom:170px} /* ⚠️ 這裡不能用 z-index:-1。body 自己有背景色，負 z-index 的偽元素 會被 body 的背景蓋掉（實測整條草坡都看不見）。改成 z-index:0， 再把內容墊到 z-index:1。 */ .teeoff-v3.course-page:after{content:"";position:fixed;bottom:0;left:0;right:0;height:150px; z-index:0;background:url(/assets/brand/fairway.svg) center bottom/auto 170px repeat-x; pointer-events:none} .teeoff-v3.course-page > *{position:relative;z-index:1} .teeoff-v3 .course-footer{text-align:center;font-size:13px;color:var(--ink-soft);margin:22px 0 0} .teeoff-v3 .course-footer a{color:var(--green-deep)} @media (max-width:359px){ .teeoff-v3 .roles{gap:6px} .teeoff-v3 .role{padding:12px 10px;min-height:286px} .teeoff-v3 .mascot{background-size:270px auto;height:96px;background-position:-18px 0} .teeoff-v3 .mascot.girl{background-position:-144px 0} .teeoff-v3 .hero h1{font-size:24px} } @media (prefers-reduced-motion:reduce){ .teeoff-v3 *{animation:none!important;transition:none!important} } /* ══════════════════════════════════════════════════════════ 組位的頭像 Jess 指定：球友選位子時要看得到人的顯圖。 v4 把 .slot 加高到 58px，正好放得下 26px 的圓頭像 —— 舊的 18px 在四欄格子裡等於沒有。 ⚠️ 未登入者（分享連結）拿到的是 v_user_anon，那支 view 刻意 不給頭像，所以這裡不會有圖，只會有遮字姓名。這是設計不是漏做。 ══════════════════════════════════════════════════════════ */ .teeoff-v3 .slot{padding:5px 3px;gap:1px;align-content:center} .teeoff-v3 .slot .pic{width:26px;height:26px;margin:0 auto 2px; border:1px solid rgba(255,255,255,.65)} .teeoff-v3 .slot.fl .pic{border-color:var(--line)} .teeoff-v3 .slot small{font-size:11px} /* 窄機身（320px）四欄會擠，頭像縮一號但不拿掉 */ @media (max-width:359px){ .teeoff-v3 .slot{min-height:54px;font-size:13px} .teeoff-v3 .slot .pic{width:22px;height:22px} } /* ══════════════════════════════════════════════════════════ 頂欄：返回 · Logo · 身分切換 原本的切換鍵是一個 44px 寬的小框，裡面塞「切換/球友」兩行字， 字擠在一起又沒置中，而且看不出「現在在哪一邊」。 改成分段控制：兩邊都畫出來，亮起來的那個就是現在的身分。 ══════════════════════════════════════════════════════════ */ .teeoff-v3 .top-in{gap:8px} /* 回上一層。用固定的對照表，不是 history.back()（見 parentOf） */ .teeoff-v3 .top .back{display:flex;align-items:center;justify-content:center; width:34px;height:44px;margin:0 -6px 0 -8px;padding:0;border:0;background:none; color:var(--ink-soft);cursor:pointer;flex:0 0 auto} .teeoff-v3 .top .back svg{width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .teeoff-v3 .top .back:active{color:var(--green-deep)} /* Logo 連到分流頁 */ .teeoff-v3 .logo-link{display:flex;align-items:center;flex:0 0 auto; text-decoration:none;-webkit-tap-highlight-color:transparent} .teeoff-v3 .logo-link:active{opacity:.65} /* 身分切換 */ /* 軌道是凹的、目前那一格是浮起來的 —— 這樣「我在哪一邊」不用讀字 也看得出來。扁一點（34px）比較俐落，圓角收成 8px 不做藥丸狀。 */ .teeoff-v3 .modesw{display:flex;flex:0 0 auto;background:var(--surface-2); border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px; margin-right:6px} /* 跟頭像拉開，不然兩個圓形擠在一起 */ /* 置中用 grid + place-items，不用 flex + line-height:1。 中文字在 line-height:1 的情況下，字身會貼著 em 框的上緣， 視覺上整排字會偏高 —— 看起來就是「沒有上下置中」。 grid 的 place-items:center 會對「行框」置中，再配 line-height:normal 讓上下的半行距平均分掉，中文才真的落在正中間。 */ .teeoff-v3 .modesw button{appearance:none;border:0;background:none;font:inherit; font-size:12px;line-height:normal;letter-spacing:.02em;white-space:nowrap; padding:0 10px;height:24px;min-width:44px;display:grid;place-items:center; color:var(--ink-soft);cursor:pointer;border-radius:6px; transition:background .12s ease, color .12s ease} .teeoff-v3 .modesw button.on{background:var(--green-deep);color:#fff;font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.20), 0 2px 5px rgba(0,0,0,.10)} .teeoff-v3 .modesw button:not(.on):active{background:rgba(0,0,0,.05)} @media (prefers-reduced-motion:reduce){ .teeoff-v3 .modesw button{transition:none} } /* 窄機身：球隊名先讓位，切換鍵與返回鍵優先 */ @media (max-width:389px){ .teeoff-v3 .ctx{max-width:22vw} .teeoff-v3 .modesw button{padding:0 8px;min-width:41px;font-size:11.5px;height:23px} .teeoff-v3 .logo-top{height:32px;margin-left:-5px} } @media (max-width:339px){ .teeoff-v3 .ctx span{display:none} /* 只留隊徽那個小圓 */ .teeoff-v3 .ctx{padding-left:6px;border-left:0} } /* ══════════════════════════════════════════════════════════ 登入頁的制度與免責 摺疊起來，因為這一頁的工作是「做一個決定」，把規章攤開會稀釋 那件事。但它必須找得到 —— 這是對外的法律陳述，不是裝飾文案。 ══════════════════════════════════════════════════════════ */ .teeoff-v3 .legal{margin-top:14px;text-align:left;background:var(--surface); border:1px solid var(--line);border-radius:10px;overflow:hidden} .teeoff-v3 .legal > summary{list-style:none;cursor:pointer;padding:12px 14px; font-size:13px;color:var(--green-deep);text-align:center; -webkit-tap-highlight-color:transparent} .teeoff-v3 .legal > summary::-webkit-details-marker{display:none} .teeoff-v3 .legal > summary::after{content:"　▾"} .teeoff-v3 .legal[open] > summary{border-bottom:1px solid var(--line-soft)} .teeoff-v3 .legal[open] > summary::after{content:"　▴"} .teeoff-v3 .legal h3{margin:14px 14px 6px;font-size:12px;font-weight:700; letter-spacing:.08em;color:var(--ink)} .teeoff-v3 .legal ul{margin:0;padding:0 14px 0 30px;list-style:disc} .teeoff-v3 .legal li{font-size:12.5px;line-height:1.85;color:var(--ink-soft); margin-bottom:6px} .teeoff-v3 .legal li b{color:var(--ink);font-weight:500} .teeoff-v3 .legal .op{margin:16px 14px 0;padding-top:12px;font-size:12.5px; border-top:1px solid var(--line-soft);color:var(--ink-soft)} .teeoff-v3 .legal .op b{color:var(--ink);font-weight:700} .teeoff-v3 .legal .rev{margin:6px 14px 14px;font-size:11.5px;line-height:1.7; color:var(--grey)} /* ══════════════════════════════════════════════════════════ 梯次卡上的球隊與可見度 顏色是主要訊號、文字是備援：內部場整張卡換成墨藍色條與墨藍標籤， 掃過去就分得出來不用讀字。墨藍是 ui.css 既有的第二身分色， 跟品牌綠同為冷色系，放一起不吵架。 ══════════════════════════════════════════════════════════ */ .teeoff-v3 .tline{display:flex;align-items:center;gap:7px;margin-top:9px; padding-top:9px;border-top:1px solid var(--line-soft)} .teeoff-v3 .tline .tmini.sm{width:22px;height:22px} .teeoff-v3 .tline .tn{flex:1;min-width:0;font-size:12.5px;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .teeoff-v3 .vtag{flex:0 0 auto;font-size:10.5px;font-family:var(--mono); letter-spacing:.06em;padding:2px 7px;border-radius:3px;white-space:nowrap; border:1px solid var(--green-edge);color:var(--green-deep);background:var(--green-tint)} .teeoff-v3 .vtag.priv{border-color:#B8860B;color:#7A4E08;background:#FFF3CC} /* 內部場：整張卡換成暖黃。 3px 色條太細，掃過去分不出來，所以整片換底色 + 整圈外框。 外框用 inset box-shadow 加厚，不動 border-width —— 改寬度會讓 卡片位移 1px，清單捲動時整排會跳。 ⚠️ 色票不是直接用交接文件的 accent #F2C94C：那個黃當外框只有 1.49:1，UI 邊界需要 3:1，等於畫了跟沒畫一樣。所以底色沿用 #FFF8E1（接近開球主卡的 #FFF7D6），外框壓深到 #B8860B（3.1:1）， 文字用 #7A4E08（6.8:1）。色相仍是同一家族。 為什麼是黃色：登入頁的「開球主／開團」那一張卡本來就是淡黃， 黃色在這個產品裡已經等於「球隊自己那一側」，拿來標內部場是 延續既有語意，不是另外發明一個顏色。 */ .teeoff-v3 .card.priv{ background:#FFF8E1; border-color:#B8860B; box-shadow:inset 0 0 0 1px #B8860B; } .teeoff-v3 .card.priv.tap:active{background:#FBEFC9} .teeoff-v3 .card.priv .pill.on{background:#7A4E08;border-color:#7A4E08} .teeoff-v3 .card.priv .pill.lk{border-color:#7A4E08;color:#7A4E08} .teeoff-v3 .card.priv .tline{border-top-color:#EADCAE} .teeoff-v3 .card.priv .v.g{color:#7A4E08} /* 金額跟著換，不要綠黃混雜 */ .teeoff-v3 .card.priv .bar{background:#EADCAE} .teeoff-v3 .card.priv .bar i{background:#B8860B} .teeoff-v3 .note.fl.priv{border-left-color:#B8860B;background:#FFF8E1} /* 抬頭那行的標籤要跟文字隔開 */ .teeoff-v3 .note .vtag{margin-left:8px;display:inline-block;vertical-align:1px} /* ══════════════════════════════════════════════════════════ 排序列：跟頂欄的「球友｜管理」用同一種分段控制 原本兩顆獨立的框看起來像兩個各自獨立的開關， 但它們其實是「二選一」。用同一套凹軌道 + 浮起來的選中格， 使用者只要學一次。順便把跟下面卡片的距離拉開。 ══════════════════════════════════════════════════════════ */ .teeoff-v3 .srt{gap:10px;margin-bottom:14px;align-items:center} .teeoff-v3 .srt .sl{font-size:12px;color:var(--grey);flex:0 0 auto} /* 把相鄰的 .sb 包成一條軌道 —— 它們在 DOM 上是兄弟， 用第一個的 margin 與圓角做出「連在一起」的樣子。 */ /* ⚠️ 高度由本檔第 3 行的 `.teeoff-v3 .sb{min-height:44px}` 決定，不是這裡。 那是 v3 交接套件訂的「可點擊元件最小 44px」。這裡別再寫 height —— 寫了 也不會生效（min-height 壓過 height），只會讓下一個人量出來跟讀到的不一樣。 */ .teeoff-v3 .srt .sb{background:none;border:0;border-radius:7px; min-width:52px;padding:0 12px;display:grid;place-items:center; font-size:12.5px;line-height:normal;color:var(--ink-soft);cursor:pointer; transition:background .12s ease, color .12s ease} .teeoff-v3 .srt .sb.on{background:var(--green-deep);color:#fff;font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.20), 0 2px 5px rgba(0,0,0,.10)} .teeoff-v3 .srt .sb:not(.on):active{background:rgba(0,0,0,.05)} /* 軌道本體：用一個包住兩顆按鈕的容器 */ .teeoff-v3 .segwrap{display:flex;gap:2px;padding:2px;flex:0 0 auto; background:var(--surface-2);border:1px solid var(--line);border-radius:8px} .teeoff-v3 .srt .csel{flex:1;min-width:0;height:32px;border-radius:8px} @media (prefers-reduced-motion:reduce){ .teeoff-v3 .srt .sb{transition:none} } /* 球隊名可能很長，軌道要能捲動而不是把頁面撐爆 */ .teeoff-v3 .segwrap{max-width:100%;overflow-x:auto;scrollbar-width:none} .teeoff-v3 .segwrap::-webkit-scrollbar{display:none} .teeoff-v3 .segwrap .sb{white-space:nowrap;flex:0 0 auto} /* ── 梯次卡底部的動作列（找球打／我的報名／管理端共用）────── 整張卡本身是可點的（點進去看組位），所以這兩顆鈕要用一條分隔線切開， 不然想按「分享」會一直誤進內頁。handler 那邊也擋了冒泡。 尺寸對齊同一頁上的「日期｜球場」排序鍵：44px 高、12.5px 字、圓角 7px。 為什麼是 44 不是頂欄那顆 24 —— 44px 是 v3 交接套件訂的可點擊元件最小 尺寸（本檔第 3 行），排序鍵吃得到那條規則，頂欄的 .modesw 是自己寫的 所以沒吃到。使用者是 45–65 歲、在球場停車場單手操作，24px 約 5.5mm， 按不準。頂欄那顆維持 24px 是刻意的空間取捨，不是標準。 靠右對齊：卡片的資訊是靠左讀的，動作放右邊才不會跟內容搶第一眼。 */ .teeoff-v3 .card .cacts{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; padding-top:8px; border-top:1px solid var(--line-soft); } .teeoff-v3 .card .cacts .ca{ appearance:none; font:inherit; font-size:12.5px; line-height:normal; letter-spacing:.02em; white-space:nowrap; min-height:44px; min-width:52px; padding:0 14px; display:grid; place-items:center; border-radius:7px; cursor:pointer; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); transition:background .12s ease, color .12s ease; } /* 主動作用「浮起來的綠」，跟切換鍵選中的那一格同一套語彙 */ .teeoff-v3 .card .cacts .ca.pri{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.20), 0 2px 5px rgba(0,0,0,.10); } .teeoff-v3 .card .cacts .ca:active{ transform:translateY(1px); } .teeoff-v3 .card .cacts .ca:disabled{ opacity:.5; cursor:default; } @media (prefers-reduced-motion:reduce){ .teeoff-v3 .card .cacts .ca{ transition:none } } /* 內部場那張卡底色是琥珀色，分隔線與次要鈕都要跟著深一階才看得見 */ .teeoff-v3 .card.priv .cacts{ border-top-color:#E0C58A; } .teeoff-v3 .card.priv .cacts .ca:not(.pri){ background:#FFFDF6; border-color:#E0C58A; } /* ── 長得像按鈕的連結 ────────────────────────────────────── 用在「撥電話」「寄 Email」這種必須是真連結的動作 （tel: 與 mailto: 不能用