@charset "UTF-8"; /* ------------------------------------------------------------------ * iOS 風格主選單（固定於畫面底部的 Tab Bar） * 後台開關：admin/store/edit#store-edit-other → 前台選單使用 iOS 風格 * 僅在時套用，關閉時完全不影響原有樣式 * 註：點「會員」展開的側邊選單維持原本樣式，此檔不做任何調整 * ------------------------------------------------------------------ */ .ios-menu { /* iOS system colors */ --ios-accent: var(--brand, #007aff); --ios-label: #1c1c1e; --ios-label-2: #6b6b70; --ios-fill: rgba(118, 118, 128, .12); --ios-separator: rgba(60, 60, 67, .16); --ios-ease: cubic-bezier(.32, .72, 0, 1); } /* ================================================================== * 1. 主選單：課程預約 / 師資陣容 / 課卡方案 / 關於場館 * → 固定於畫面底部的 iOS Tab Bar (浮動玻璃膠囊) * ================================================================== */ /* 捲動時固定於頂部的標題列，改為 iOS 毛玻璃 + 髮絲線 */ .ios-menu .homeTopWrap .sticky-top.isFixed { background: rgba(255, 255, 255, .78); background-color: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 .5px 0 var(--ios-separator); } /* 以頁面標題呈現的頁 (標題列非白底)，固定時改用底色毛玻璃 */ .ios-menu .homeTopWrap.bg-body .sticky-top.isFixed { background: rgba(238, 242, 243, .82); background-color: rgba(238, 242, 243, .82); } /* 底部選單高度，讓頁面內容不會被蓋住 */ .ios-menu.has-ios-tabbar { padding-bottom: calc(86px + env(safe-area-inset-bottom)); } /* 版權列不顯示 */ .ios-menu #footer { display: none; } /* 頁面自己的浮動底部按鈕 (如家庭成員頁) 要浮在底部選單之上。 .btn-fixed-footer 是貼底、滿版、透明的 fixed 容器 (z-index 998)，即使按鈕已被 margin 推高，容器本身仍會蓋住底部選單並吃掉點擊，因此容器不接收事件、只讓按鈕本身可點。 */ .has-ios-tabbar .btn-fixed-footer { pointer-events: none; } .has-ios-tabbar .btn-fixed-footer .btn { margin-bottom: calc(88px + env(safe-area-inset-bottom)); pointer-events: auto; } /* 登入 / 註冊 / 驗證等本來就隱藏選單的頁面，底部選單一併隱藏 */ .hideMenu .iosTabbar { display: none; } .ios-menu.has-ios-tabbar.hideMenu { padding-bottom: 0; } .iosTabbar { position: fixed; z-index: 98; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; } .iosTabbar_inner { display: flex; width: 100%; max-width: 460px; padding: 5px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid rgba(255, 255, 255, .7); border-radius: 26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .08); pointer-events: auto; } .iosTabbar_item { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 6px 2px 5px; border-radius: 21px; font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.2; text-align: center; color: var(--ios-label-2); transition: background .25s var(--ios-ease), color .25s var(--ios-ease), transform .2s var(--ios-ease); } .iosTabbar_item:hover { color: var(--ios-label); } .iosTabbar_item:active { transform: scale(.94); } .iosTabbar_icon { display: block; margin-bottom: 2px; font-size: 21px; line-height: 1; } .iosTabbar_text { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .iosTabbar_item.active { font-weight: 600; color: var(--ios-accent); background: #f5f5f5; } /* 第五個分頁：會員（登入後顯示頭像） */ .iosTabbar_icon.iosTabbar_avatar { width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: var(--ios-fill); } .iosTabbar_avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .iosTabbar_item-member.active .iosTabbar_avatar { box-shadow: 0 0 0 2px var(--ios-accent); } /* 平板 / 桌機：膠囊置中、字級略大 */ @media (min-width: 768px) { .iosTabbar { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .iosTabbar_inner { width: auto; min-width: 420px; } .iosTabbar_item { padding: 7px 18px 6px; font-size: 12px; } .iosTabbar_icon { font-size: 22px; } } @media (min-width: 1025px) { .ios-menu.has-ios-tabbar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .iosTabbar_inner { min-width: 480px; } } /* ================================================================== * 2. 切換場館（多場館品牌才會出現） * ================================================================== */ /* 標題列右上角的「切換場館」膠囊鈕 */ .ios-menu .placeSwitch { display: inline-block; padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--ios-label); background: var(--ios-fill); border-radius: 999px; transition: background .2s var(--ios-ease), color .2s var(--ios-ease), transform .2s var(--ios-ease); } /* 不能切換時，單純顯示目前場館名稱（外觀同膠囊鈕，但沒有箭頭、不可點） */ .ios-menu .placeName { display: inline-block; padding: 5px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--ios-label); background: var(--ios-fill); border-radius: 999px; } .ios-menu .placeSwitch i { margin-left: 1px; font-size: 15px; vertical-align: -2px; } .ios-menu .placeSwitch:active { color: var(--ios-accent); background: rgba(118, 118, 128, .2); transform: scale(.96); } /* 場館清單 sheet：高度依內容決定，不要固定 60% */ .ios-menu #modal-place-switch .modal_content { height: auto; max-height: 80%; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); } /* 場館項目：線框選取 */ .ios-menu .placeSwitch_item { border: 1.5px solid var(--ios-separator); border-radius: 14px; color: var(--ios-label); transition: border-color .2s var(--ios-ease), box-shadow .2s var(--ios-ease), transform .2s var(--ios-ease); } .ios-menu .placeSwitch_item:active { transform: scale(.985); } .ios-menu .placeSwitch_item.is-current { border-color: var(--ios-accent); box-shadow: 0 0 0 1.5px var(--ios-accent); } .ios-menu .placeSwitch_check { font-size: 22px; line-height: 1; color: var(--ios-accent); } /* 場館縮圖 */ .ios-menu .placeSwitch_thumb { width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--ios-fill); } .ios-menu .placeSwitch_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ================================================================== * 3. 右上角漢堡 / 頭像按鈕 * 會員入口改由底部第五個分頁進入，因此隱藏； * 點開後的會員選單 (#nav) 維持原本樣式，不做任何覆寫 * ================================================================== */ .has-ios-tabbar .header .navToggle { display: none; } /* 會員選單項目間距收窄 (原本 .nav_trigger 為 0.75em) */ .ios-menu .nav_menu .nav_trigger { padding: 0.65em 0; }