/* * onsite-browse.css — 手寫、殼層專用；onsite.css 是轉換產物不手改。 * * BL-069 階段 E 第二包 WO-E2b-3 r3 退件修正：把原本各自寫在每一頁 onsite-page-style * 的殼層共用修正（左右/垂直留白對齊 mockup、流動底圖範圍）收進這裡，由 * browse.blade.php 在 onsite.css 之後引入，四頁（會員中心／我的服務／帳戶資訊／ * 訂購紀錄）共用一份，不用每頁各自重複。 */ /* ===================== 留白對齊 mockup ===================== * 官網殼把 .srf-root 包在既有 .container.py-8（Bootstrap 留白，390 寬量到 * 14.0625px）裡，這層留白疊上 .srf-app-body 自己的 18px 左右內距（32.0625px）， * 跟只吃到 container 留白的連線橫幅（.srf-live-card，14.0625px）不對齊，兩者也都 * 不等於 mockup .app-body{padding:18px} 的值。 * * :has() 只鎖定「包住 .srf-root 的那一個」container 實例，不影響官網其他頁面共用的 * 同一個 class（那些頁面沒有 .srf-root 子元素，選擇器不會命中）。 */ .container.py-8:has(> .srf-root) { padding-left: 0; padding-right: 0; } /* 2026-09-20 快改：.srf-root 這個 class 同時用在內容區（.srf-root[data-csrf]）跟殼層末端 的浮層容器（.srf-root.srf-overlay-host，見 browse.blade.php），下面這條留白規則原本 兩邊都命中——浮層容器平時沒有任何浮層開啟時是空的，卻因為 padding-top:28.5px 而有 28.5px 高度，在站尾下方多出一條白帶。改用 :not(.srf-overlay-host) 只鎖定內容區那一個 實例，浮層容器不吃這條規則，平時高度歸零；浮層開啟時外觀不受影響（浮層本身的 .srf-overlay/.srf-sheet 有自己的樣式，不依賴 .srf-root 的 padding）。 */ .srf-root:not(.srf-overlay-host) { padding-left: 18px; padding-right: 18px; /* 垂直：.srf-root 內容區上緣（container 留白到位後量得 177.5px）到 mockup 第一個 元素上緣（未連線的 .s1-entry-grid／連線中的 .live-card，兩態字型完全載入後皆 量得 206px）差 28.5px。統一在這裡補一次，讓連線橫幅與方塊/More 清單的第一個 元素（不論哪個先出現）都從同一個起點開始，兩態自然對齊、也對齊 mockup。 */ padding-top: 28.5px; } .srf-root .srf-app-body { padding-left: 0; padding-right: 0; padding-top: 0; } /* ===================== 流動漸層底圖 ===================== * 照 mockup .cu-flow-bg（class 加 srf- 前綴；flow-bg.js 逐字移植，見該檔檔頭）。 * r4（2026-09-20）改回跟 mockup 逐字一致：position:fixed 貼滿整個瀏覽器視窗，不隨頁面 * 內容捲動（design-rules §1.6 定案值；2026-09-07 已修過「absolute 貼內容區在長頁會被 * 撐高、底圖被拉伸稀釋」的問題，故底圖一律 fixed，不再視頁面另外決定）。官網頁首／站尾 * 是不透明的一般文件流內容、沒有設定 z-index，z-index:-1 的固定背景會照 CSS 疊放順序 * 規則畫在它們「後面」，使用者實際看到的仍是「頁首下緣到站尾上緣是藍底、標題壓在藍底 * 上、無白帶」——跟 r3 的視覺效果相同，只是機制换成不隨頁面捲動的固定背景。 * * 刻意不用任何 position:relative 的容器包住這個底圖（不需要，fixed 定位本身就相對 * 視窗），避免重演「內容區外面多包一層 stacking context，把浮層困在裡面」的 bug * （見上方留白對齊段落 2026-09-20 快改註解，以及 browse.blade.php 檔頭 r3 修正 (1)）。 */ .srf-cu-flow-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(150deg, #DBF7FF 9.2%, #A8ECFF 30.9%, #7BC9DE 71.7%); } .srf-cu-flow-canvas { display: block; width: 100%; height: 100%; } /* ===================== 桌面寬度：內容欄照 mockup .phone-shell 定案值 ===================== * mockup/style.css:72-110（design-sync/design-rules.md §1.6 引用的同一組定案值）： * .phone-shell { max-width: 430px; margin: 0 auto; } * @media(min-width:560px) { .phone-shell{ margin:16px auto; border-radius:32px; ... } } * @media(min-width:860px) { .phone-shell{ max-width:600px; } } * * 官網殼沒有「手機外框」這個桌面預覽道具（圓角／邊框／陰影／16px margin 那些是 mockup * 給自己在桌面瀏覽器裡模擬手機外觀用的，不是設計要交付的樣子），這裡只照抄「內容欄 * 寬度」這一件事：.srf-root（不含 .srf-overlay-host——那個容器平時是空的，寬度限制對 * 它沒有意義，且它裝的是 fixed 定位的浮層，浮層自己滿版視窗置中，不受這個限制影響） * 在 ≥560px 收窄到 430px 並置中，≥860px 再放寬到 600px；390 寬（<560px）不觸發，維持 * 原本的版面。標題（.page_title）不在這個限制範圍內，維持官網既有的置中與寬度。 */ @media (min-width: 560px) { .srf-root:not(.srf-overlay-host) { max-width: 430px; margin-left: auto; margin-right: auto; } } @media (min-width: 860px) { .srf-root:not(.srf-overlay-host) { max-width: 600px; } } /* ===================== svg 圖示垂直對齊 ===================== * BL-069 階段 E 第二包 WO-E2b-4（一）殼層小修：官網全站樣式對裸 設了 * vertical-align:bottom，會滲進 .srf-root 內所有行內 svg 圖示（mockup 沒有這條 * 規則，瀏覽器預設是 baseline）。前一張工單（WO-E2b-3）只在 dashboard.blade.php * 三處 icon 各補一次行內 style="vertical-align:baseline" 頂住，這裡改在殼層一次 * 解決，四頁共用、不必每處重複；dashboard.blade.php 的三處行內樣式已隨本次移除。 * 只鎖 .srf-root 內、且排除已有更明確定位需求的既有規則（本檔上方未對 svg 另設 * vertical-align，onsite.css 也沒有選擇器命中 svg 元素本身，見 grep 核對），故此 * 條不會蓋掉任何既有設計值。 */ .srf-root svg { vertical-align: baseline; } /* ===================== 終審修正 G9（B5-2）===================== * `hidden` 屬性目前生效靠的是官網 vendor 樣式表（public/vendors/sandbox/css/ * style.css 的 [hidden]{display:none!important}），onsite.css／onsite-browse.css * 自己都沒有任何 [hidden] 規則。逛的殼（browse.blade.php）目前碰巧安全，因為它 * 仍嵌在官網文件流裡、載得到那份 vendor 樣式；但這條規則不該只靠「碰巧載到」， * 補在殼層專用檔一次，往後就算哪天官網樣式順序調整也不受影響。 */ .srf-root [hidden] { display: none !important; } /* ===================== 終審修正 G6（B3-4／B6-5）===================== * 疊卡收合時，疊內的收合鈕（.srf-stack-collapse-btn，掛在 .srf-stack-children-inner * 裡）版面盒還在，只是被 onsite.css 的 overflow:hidden 裁掉——鍵盤使用者仍能 Tab * 聚焦並按 Enter 觸發。用 visibility 加轉場延遲修：展開時立刻可見（delay:0s）， * 收合時等父層 .srf-stack-children 的 grid-template-rows 動畫跑完（該規則 * 0.34s+0.11s≈0.45s）才真正隱藏——不提早切斷既有逐張收合的動畫（不用 display:none， * 那會讓過場沒有中間幀）。 */ .srf-stack-wrap .srf-stack-children-inner { transition: visibility 0s 0.46s; } .srf-stack-wrap.srf-is-open .srf-stack-children-inner { visibility: visible; transition-delay: 0s; } .srf-stack-wrap:not(.srf-is-open) .srf-stack-children-inner { visibility: hidden; } /* ===================== WO-E3-BIND-B §B5：連線橫幅吃標題留白（使用者 2026-09-23 拍板）===== * 連線時（.srf-root 帶 srf-has-link-banner，見 browse.blade.php），橫幅 * （.srf-live-card，含 margin-bottom:12px）插入標題與內容之間，吃掉 root 原本的 * padding-top:28.5px（=G，「標題底緣到第一個內容物件頂緣」這段留白裡唯一能縮的 * 部分），不讓內容被推。 * * 實測（Playwright 390 寬，BindUiTest 真實 dump，見 T/wo-bind-b/verify-b5.json）： * G=28.5px、.srf-live-card 外高 H（offsetHeight+margin-bottom:12px）≈78.75px。 * G