/* ============================================ 最新優惠 / 404 ============================================ */ /* ── 最新優惠 ── 設計稿 1920×1251：hero 帶之下是資料流底圖，中央為標題組與方案總表（方案卡元件在 5-components.css，與首頁共用）。底圖直接掛在區塊上（不用、也不用偽元素）；素材已是想要的濃度，不另壓 opacity。 */ .offers-all { position: relative; isolation: isolate; padding-block: clamp(var(--space-10), 5vw, 72px) clamp(var(--space-12), 8vw, 130px); background: url("../../images/hub/latest-offers-section-bg.webp") center / cover no-repeat; overflow: hidden; } .offers-all__inner { position: relative; z-index: 1; width: 100%; max-width: calc(1248px + var(--container-pad) * 2); margin-inline: auto; padding-inline: var(--container-pad); display: flex; flex-direction: column; align-items: center; } .offers-all__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; } .offers-all__title { margin: 0; font-size: var(--fs-2xl); /* 28px */ font-weight: var(--fw-bold); line-height: 1.2; } .offers-all__ops { margin: 0; font-size: var(--fs-xl); /* 24px */ font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; } .offers-all .plans__grid { margin-top: clamp(var(--space-8), 4vw, 32px); } .offers-all .btn-offer { margin-top: clamp(var(--space-8), 4vw, 46px); } /* ── 本頁 CTA ── 設計稿 Group 20（實測自 design.png）：白框 194×33、1px 黑框、白底，文字 16px 黑、與箭頭間距 11；框下方緊接一塊 17px 高的紅色斜塊，下緣比上緣往右偏 6px（≈20°）。首頁那顆是紅色實心的 .btn-ghost，兩者不同款，不能共用。 */ .btn-offer { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; /* 設計稿是固定 194×33 的框，不隨字寬伸縮 */ width: 194px; max-width: 100%; min-height: 33px; padding: 5px 8px; margin-bottom: 17px; /* 讓紅斜塊佔到版位，不會壓到下一個元素 */ background: var(--color-bg); border: 1px solid var(--color-text); font-size: var(--fs-base); /* 16px */ line-height: 1.2; color: var(--color-text); text-decoration: none; } .btn-offer__label { position: relative; } /* 紅色斜塊（設計稿實測 y1137–1153）：・上緣與按鈕外框同寬 194 —— 左右各外擴 1px 才會對齊按鈕的 1px 邊框外緣・top 從 padding box 底再下移 1px，正好接在按鈕下框線之下・左右兩條斜邊與下緣都有黑線（上緣就是按鈕自己的下框線）・17px 高、下緣往右偏 6px → tan⁻¹(6/17) ≈ 19.4°，取 skewX(20deg) transform-origin 放在上緣，斜切與收合都以上緣為軸。 */ .btn-offer::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(100% + 1px); height: 17px; background: var(--color-brand); border: 1px solid var(--color-text); border-top: 0; transform: skewX(20deg); transform-origin: top left; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); } /* hover／鍵盤聚焦時，紅色斜塊往上收進按鈕 */ .btn-offer:hover::after, .btn-offer:focus-visible::after { transform: skewX(20deg) scaleY(0); } .btn-offer:hover, .btn-offer:focus-visible { color: var(--color-text); } @media (prefers-reduced-motion: reduce) { .btn-offer::after { transition: none; } } /* 設計稿 Frame 147：21×21 黑框圓圈，內含 7×8 紅色三角 */ .btn-offer__arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 21px; height: 21px; border: 1px solid var(--color-text); border-radius: var(--radius-full); } .btn-offer__arrow img { width: 7px; height: 8px; } /* ── 404 ── 設計稿 1920×1345：插圖 814×785 ＋文字區 550×210。 class 名不能用 error404：WordPress 會在加上同名 class，這一段的 display:flex／align-items:center 會整個套到 body，讓 .site-header 與 .site-footer 縮成內容寬度。 */ .nf { display: flex; flex-direction: column; align-items: center; gap: clamp(var(--space-6), 4vw, 48px); padding: clamp(var(--space-10), 6vw, 110px) var(--container-pad) clamp(var(--space-12), 8vw, 130px); text-align: center; } .nf__art { width: 100%; max-width: 814px; height: auto; } .nf__body { display: flex; flex-direction: column; align-items: center; gap: 22px; /* 設計稿 Frame 1191 的 itemSpacing */ max-width: 550px; } .nf__title { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.2; color: var(--color-brand); } /* 全站唯一一處設計稿明確寫出行高的文字：24px / lineHeightPx 48（比例 2.0）。 */ .nf__text { margin: 0; font-size: var(--fs-xl); /* 24px */ line-height: 2; } /* 設計稿 Frame 499：354×62 紅色實心、cornerRadius 0、24px 白字、內距 23/120 */ .nf__back { display: inline-flex; align-items: center; justify-content: center; min-width: 354px; min-height: 62px; /* 設計稿內距 23，但 23+29+23 = 75 > 框高 62，同樣是 Figma 裡的溢出值 */ padding: 16px 120px; background: var(--color-brand); font-size: var(--fs-xl); /* 24px */ line-height: 1.2; color: #fff; text-decoration: none; white-space: nowrap; transition: background var(--ease-base); } .nf__back:hover, .nf__back:focus-visible { background: var(--color-brand-hover); color: #fff; } /* 設計稿的按鈕是 194×33。不要用透明邊框去撐點擊區 —— 這顆按鈕本身有 1px 黑框，透明邊框會把上下框線吃掉，而且 ::after 紅斜塊的 top: 100% 是以 border box 計算，會被一起往下推而脫離。改用一個不畫任何東西的 ::before 往上下外擴，黑框與紅塊都不受影響。 */ .btn-offer::before { content: ""; position: absolute; inset: -6px 0; } @media (max-width: 640px) { .offers-all__ops { white-space: normal; } /* 設計稿 354 寬的按鈕在 375 視窗會頂到左右內距 */ .nf__back { min-width: 0; width: 100%; padding-inline: var(--space-6); } }