/* ========================================================================== WebPOS 介紹網站（官網）— Coca 視覺 - 由舊版（POS 專案 webpos/dashboard 裡的 React 官網 src/site/site.css）原樣移植，畫面完全相同。 - 保留 .site-root 外層類別：每一條規則都在 .site-root 之下，或是 html.site-page（文件層級）。 - 變數一律 --ws- 開頭，只宣告在 .site-root。 - !important 只用在「減少動態效果」與列印區塊。 - 改了這個檔案，記得把 index.html 裡 site.css 的 ?v= 日期一起更新（避免使用者拿到舊檔）。 ========================================================================== */ /* ---------- 文件層級 ---------- */ html.site-page { background: #ffffff; color-scheme: light; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (min-width: 901px) { html.site-page { scroll-padding-top: 92px; } } @media (prefers-reduced-motion: no-preference) { html.site-page { scroll-behavior: smooth; } } html.site-page body { margin: 0; background: #ffffff; overflow-x: hidden; overflow-x: clip; } /* ---------- 變數 ---------- */ .site-root { /* 品牌（WebPOS 淺藍） */ --ws-primary: #1e9bf0; --ws-primary-50: #47aff4; --ws-primary-20: #d2ebfc; --ws-primary-10: #ebf6fe; /* 白字用的藍色底（#1e9bf0 配白字只有 3.0:1；#1479c4 為 4.6:1） */ --ws-primary-fill: #1479c4; --ws-primary-fill-hover: #0f67a8; --ws-primary-ink: #0b6bb0; --ws-gradient: linear-gradient(219deg, #4fc3f7 0%, #1a73e8 100%); /* 中性色 */ --ws-ink: #19191c; --ws-ink-2: #4d4e57; --ws-ink-3: #6b7280; --ws-ink-faint: #828487; --ws-line: #e4e4e4; --ws-line-soft: #ededed; --ws-surface: #ffffff; --ws-surface-2: #f8f9fd; --ws-surface-3: #f5f5f5; --ws-frame: #f4f4f4; --ws-page: #fafafa; /* 深色 */ --ws-dark: #19191c; --ws-dark-2: #212126; --ws-dark-btn: #22282b; --ws-on-dark-2: #b7b7ba; --ws-dark-line: rgba(255, 255, 255, .12); /* 輔助色（圖示、方案標籤） */ --ws-c-purple: #8569f6; --ws-t-purple: #f2ecff; --ws-i-purple: #6a4fa8; --ws-c-green: #73cb50; --ws-t-green: #f1faeb; --ws-i-green: #38715b; --ws-c-blue: #4e9aff; --ws-t-blue: #ecf6ff; --ws-i-blue: #2f6496; --ws-c-amber: #ffb049; --ws-t-amber: #fffdec; --ws-i-amber: #8a5a00; --ws-c-pink: #fe2482; --ws-c-coral: #f68a69; --ws-success: #18793f; --ws-danger: #b42318; /* 字型 */ --ws-font: "Poppins", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; /* 圓角、間距、版面 */ --ws-r-pill: 999px; --ws-r-panel: 40px; --ws-r-card: 24px; --ws-r-sm: 20px; --ws-r-input: 16px; --ws-container: 1160px; --ws-gutter: 16px; --ws-panel-inset: 8px; --ws-section-y: 64px; --ws-header-h: 64px; /* 陰影、漸層、動態 */ --ws-shadow-1: 0 2px 4px rgba(0, 0, 0, .08), 0 2px 6px rgba(25, 25, 28, .04); --ws-shadow-2: 0 5px 10px rgba(0, 0, 0, .08), 0 5px 16px rgba(25, 25, 28, .04); --ws-shadow-pop: 0 0 20px rgba(25, 25, 28, .16); --ws-shadow-device: 0 40px 80px -30px rgba(25, 25, 28, .45); --ws-shadow-btn-dark: 0 18px 52px -10px rgba(0, 0, 0, .38), inset 0 8px 18px rgba(255, 255, 255, .5); --ws-ring: 0 0 0 4px rgba(30, 155, 240, .22); --ws-hero-bg: radial-gradient(900px 620px at 0% 100%, rgba(150, 208, 255, .85) 0%, rgba(150, 208, 255, 0) 70%), radial-gradient(820px 560px at 100% 0%, rgba(186, 228, 255, .8) 0%, rgba(186, 228, 255, 0) 70%), linear-gradient(180deg, #f3f6f9 0%, #e9f3fb 100%); --ws-btn-dark-bg: radial-gradient(120% 140% at 50% 0%, #727272 0%, #282828 55%, #111111 100%); --ws-ease: cubic-bezier(.22, .61, .36, 1); --ws-ease-back: cubic-bezier(.34, 1.4, .64, 1); font-family: var(--ws-font); font-size: 16px; line-height: 1.8; color: var(--ws-ink); background: var(--ws-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; } @media (min-width: 768px) { .site-root { --ws-gutter: 32px; --ws-panel-inset: 16px; --ws-section-y: 96px; } } @media (min-width: 901px) { .site-root { --ws-header-h: 76px; } } @media (min-width: 1200px) { .site-root { --ws-gutter: 40px; --ws-section-y: 120px; } } @media (max-width: 767px) { .site-root { --ws-r-panel: 28px; --ws-r-card: 20px; } } /* ---------- 基本重設（只在官網內） ---------- */ .site-root *, .site-root *::before, .site-root *::after { box-sizing: border-box; } .site-root :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote) { margin: 0; } .site-root :where(ul, ol) { padding: 0; list-style: none; } .site-root :where(a) { color: inherit; text-decoration: none; } .site-root :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .site-root :where(input, textarea) { font: inherit; color: inherit; margin: 0; } .site-root :where(img, svg, video) { display: block; max-width: 100%; } .site-root :where(table) { border-collapse: collapse; border-spacing: 0; } .site-root :where(strong, b) { font-weight: 600; } .site-root [hidden][hidden] { display: none; } .site-root main:focus { outline: none; } /* ---------- 共用 ---------- */ /* 不拆開的一段文字（例如「信用卡機（EDC）」；搭配 指定可換行的位置） */ .site-root .ws-nobr { white-space: nowrap; } .site-root .ws-vh { 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; } .site-root .ws-skip { position: fixed; left: 16px; top: -120px; z-index: 100; background: var(--ws-dark); color: #fff; padding: 12px 20px; border-radius: 14px; font-weight: 600; line-height: 1.4; } .site-root .ws-skip:focus { top: 12px; } .site-root .ws-container { max-width: calc(var(--ws-container) + 2 * var(--ws-gutter)); margin: 0 auto; padding: 0 var(--ws-gutter); } .site-root .ws-section { padding: var(--ws-section-y) 0; } .site-root .ws-section--page { background: var(--ws-page); } .site-root .ws-icon { flex: none; } /* 焦點：所有可互動元素都有清楚的外框（Coca 的淡色光暈只做輔助） */ .site-root :focus-visible { outline: 2px solid var(--ws-primary-ink); outline-offset: 3px; } .site-root :is(.ws-btn, .ws-tab, .ws-filter, .ws-nav__link, .ws-nav__toggle, .ws-pc__arrow, .ws-roundbtn, .ws-legal__close, .ws-acc__btn, .ws-faqitem__btn):focus-visible { box-shadow: var(--ws-ring); } .site-root .ws-on-dark :focus-visible, .site-root .ws-pc__slide.is-active :focus-visible { outline-color: #ffffff; } /* ---------- 文字 ---------- */ .site-root .ws-display { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; } @media (min-width: 1000px) { .site-root .ws-display { font-size: clamp(44px, 4.5vw, 66px); } } .site-root .ws-display__line { display: block; } .site-root .ws-h2 { font-size: clamp(28px, 4vw, 52px); line-height: 1.22; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .site-root .ws-h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } .site-root .ws-lead { font-size: 17px; line-height: 1.75; color: var(--ws-ink-3); } @media (min-width: 768px) { .site-root .ws-lead { font-size: 18px; } } .site-root .ws-fade { color: var(--ws-ink-faint); } .site-root .ws-fade-hero { color: #6b6466; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .site-root .ws-fade-hero { background: linear-gradient(180deg, #19191c 0%, #6b6466 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* 中文標題不在詞中間斷行（在標點後換行）；真的放不下才強制斷行 */ .site-root :is(.ws-display, .ws-h2, .ws-h3, .ws-cta__title, .ws-mini__title, .ws-allitem__title) { word-break: keep-all; overflow-wrap: break-word; } .site-root .ws-br-lg { display: none; } @media (min-width: 1000px) { .site-root .ws-br-lg { display: inline; } } .site-root .ws-caption { font-size: 13px; line-height: 1.5; color: var(--ws-ink-3); margin-top: 10px; } .site-root .ws-caption--center { text-align: center; } /* 主視覺淡橘底上 ink-3 只有約 4.4:1，改用 ink-2（約 7.4:1）以符合 AA */ .site-root .ws-hero .ws-caption { color: var(--ws-ink-2); } .site-root .ws-note { text-align: center; font-size: 13px; line-height: 1.5; color: var(--ws-ink-3); margin-top: 8px; } .site-root .ws-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ws-ink); margin-bottom: 14px; } .site-root .ws-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ws-ink); flex: none; } .site-root .ws-pill-eyebrow { display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px; border-radius: var(--ws-r-pill); background: #ffffff; font-size: 15px; font-weight: 500; line-height: 1.3; margin-bottom: 18px; } @media (min-width: 768px) { .site-root .ws-pill-eyebrow { font-size: 16px; } } .site-root .ws-head { max-width: 780px; margin-bottom: 40px; } .site-root .ws-head--center { text-align: center; margin-left: auto; margin-right: auto; } .site-root .ws-head .ws-lead { margin-top: 16px; } @media (min-width: 768px) { .site-root .ws-head { margin-bottom: 56px; } } .site-root .ws-textlink { display: inline-flex; align-items: center; gap: 6px; color: var(--ws-primary-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .site-root .ws-textlink:hover { text-decoration-thickness: 2px; } .site-root .ws-textlink--inline { display: inline; } /* ---------- 按鈕 ---------- */ .site-root .ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--ws-r-pill); border: 1.5px solid transparent; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; } .site-root .ws-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; } .site-root .ws-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; } @media (min-width: 768px) { .site-root .ws-btn--lg { font-size: 18px; } } .site-root .ws-btn--full { width: 100%; } .site-root .ws-btn__arrow { display: inline-flex; align-items: center; justify-content: center; } .site-root .ws-btn--arrow.ws-btn--primary { padding-right: 8px; } .site-root .ws-btn--arrow.ws-btn--primary .ws-btn__arrow { width: 34px; height: 34px; border-radius: 50%; background: #ffffff; color: var(--ws-primary-fill); } .site-root .ws-btn--arrow.ws-btn--lg.ws-btn--primary .ws-btn__arrow { width: 40px; height: 40px; } .site-root .ws-btn--primary { background: var(--ws-primary-fill); color: #ffffff; } .site-root .ws-btn--primary:hover { background: var(--ws-primary-fill-hover); } .site-root .ws-btn--secondary { background: #ffffff; color: var(--ws-ink); border-color: var(--ws-ink); } .site-root .ws-btn--secondary:hover { background: var(--ws-surface-2); } .site-root .ws-btn--dark { background: var(--ws-btn-dark-bg); background-color: #282828; color: #ffffff; box-shadow: var(--ws-shadow-btn-dark); border: 0; } .site-root .ws-btn--dark:hover { background: #111111; } .site-root .ws-btn--login { background: var(--ws-dark-btn); color: #ffffff; } .site-root .ws-btn--login:hover { background: #0e1112; } .site-root .ws-btn--ondark { background: transparent; color: #ffffff; border-color: #ffffff; } .site-root .ws-btn--ondark:hover { background: rgba(255, 255, 255, .12); } .site-root .ws-btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .site-root .ws-btnrow--center { justify-content: center; } /* ---------- 標誌 ---------- */ .site-root .ws-logo { display: inline-flex; align-items: center; gap: 10px; } .site-root .ws-logo__mark { flex: none; } .site-root .ws-logo__text { display: flex; flex-direction: column; line-height: 1.1; } .site-root .ws-logo__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ws-ink); } .site-root .ws-logo__pos { color: var(--ws-primary); } .site-root .ws-logo__sub { font-size: 12px; font-weight: 500; color: var(--ws-ink-3); margin-top: 3px; letter-spacing: .02em; } .site-root .ws-logo--dark .ws-logo__name { color: #ffffff; } .site-root .ws-logo--dark .ws-logo__pos { color: var(--ws-primary-50); } .site-root .ws-brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; border-radius: 12px; } /* ---------- 頁首 ---------- */ .site-root .ws-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--ws-header-h); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .site-root .ws-header.is-scrolled, .site-root .ws-header.is-open { background: rgba(255, 255, 255, .92); box-shadow: var(--ws-shadow-2); } @media (min-width: 768px) { .site-root .ws-header.is-scrolled { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .site-root .ws-header__inner { height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 calc(var(--ws-panel-inset) + 12px); display: flex; align-items: center; justify-content: space-between; gap: 12px; } @media (min-width: 768px) { .site-root .ws-header__inner { padding: 0 calc(var(--ws-panel-inset) + 24px); } } @media (min-width: 1200px) { .site-root .ws-header__inner { padding: 0 calc(var(--ws-panel-inset) + 36px); } } .site-root .ws-nav { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* 窄螢幕（≤900）：選單收合，「登入」永遠在列上 */ .site-root .ws-nav__quick { display: inline-flex; } .site-root .ws-nav__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--ws-r-pill); background: var(--ws-dark); color: #ffffff; font-size: 15px; font-weight: 600; line-height: 1; } .site-root .ws-nav__menu { display: none; position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; background: #ffffff; border-radius: 28px; box-shadow: var(--ws-shadow-pop); padding: 14px; max-height: calc(100vh - var(--ws-header-h) - 24px); max-height: calc(100dvh - var(--ws-header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; } .site-root .ws-header.is-open .ws-nav__menu { display: block; } .site-root .ws-nav__links { display: grid; gap: 4px; } .site-root .ws-nav__link { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 16px; font-size: 17px; font-weight: 500; color: var(--ws-ink-2); } .site-root .ws-nav__link:hover { background: var(--ws-surface-2); color: var(--ws-ink); } .site-root .ws-nav__link[aria-current="true"] { background: var(--ws-dark); color: #ffffff; } .site-root .ws-nav__actions { display: grid; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ws-line-soft); } .site-root .ws-nav__actions .ws-btn { width: 100%; } @media (max-width: 399px) { .site-root .ws-header__inner { padding: 0 10px; gap: 8px; } .site-root .ws-logo { gap: 8px; } .site-root .ws-header .ws-logo__mark { width: 32px; height: 32px; } .site-root .ws-header .ws-logo__name { font-size: 20px; } .site-root .ws-header .ws-logo__sub { display: none; } .site-root .ws-nav { gap: 6px; } .site-root .ws-nav__quick, .site-root .ws-nav__toggle { padding: 0 14px; } } /* 桌機（≥901）：膠囊導覽 + 兩顆按鈕 */ @media (min-width: 901px) { .site-root .ws-nav__quick, .site-root .ws-nav__toggle { display: none; } .site-root .ws-nav__menu { display: flex; position: static; flex: 1; align-items: center; justify-content: space-between; gap: 16px; background: none; box-shadow: none; padding: 0; max-height: none; overflow: visible; border-radius: 0; } .site-root .ws-nav__links { display: flex; align-items: center; gap: 2px; margin: 0 auto; height: 52px; padding: 4px; border-radius: 26px; background: rgba(248, 249, 253, .85); box-shadow: inset 0 0 0 1px rgba(25, 25, 28, .05); } .site-root .ws-nav__link { min-height: 44px; height: 44px; padding: 0 12px; border-radius: 22px; font-size: 14px; white-space: nowrap; } .site-root .ws-nav__link:hover { background: rgba(25, 25, 28, .06); } .site-root .ws-nav__link[aria-current="true"] { background: var(--ws-dark); color: #ffffff; } .site-root .ws-nav__actions { display: flex; gap: 10px; margin: 0; padding: 0; border: 0; flex: none; } .site-root .ws-nav__actions .ws-btn { width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; } .site-root .ws-header .ws-logo__sub { display: none; } } @media (min-width: 1100px) { .site-root .ws-nav__link { padding: 0 20px; font-size: 15px; } .site-root .ws-nav__actions .ws-btn { min-height: 48px; padding: 0 22px; font-size: 16px; } .site-root .ws-header .ws-logo__sub { display: block; } } /* ---------- Hero ---------- */ .site-root .ws-hero { padding: var(--ws-panel-inset) var(--ws-panel-inset) 0; } .site-root .ws-hero__panel { position: relative; overflow: hidden; border-radius: var(--ws-r-panel); background: var(--ws-hero-bg); padding: calc(var(--ws-header-h) + 28px) 0 28px; } @media (min-width: 768px) { .site-root .ws-hero__panel { padding: calc(var(--ws-header-h) + 64px) 0 48px; } } .site-root .ws-hero__grid { max-width: calc(var(--ws-container) + 2 * var(--ws-gutter)); margin: 0 auto; padding: 0 var(--ws-gutter); display: grid; gap: 36px; } /* 手機：文案 → 手機畫面 → 數據卡；桌機：左欄文案＋數據卡、右欄手機畫面 */ @media (min-width: 1000px) { .site-root .ws-hero__grid { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); grid-template-rows: 1fr auto; grid-template-areas: "copy visual" "stats visual"; gap: 36px 40px; align-items: stretch; } .site-root .ws-hero__copy { grid-area: copy; } .site-root .ws-hero__visual { grid-area: visual; } .site-root .ws-hero__stats { grid-area: stats; } } .site-root .ws-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .site-root .ws-hero__lead { margin-top: 20px; max-width: 560px; color: var(--ws-ink-2); } .site-root .ws-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .site-root .ws-hero__login { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--ws-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .site-root .ws-hero__login .ws-textlink { min-height: 44px; } .site-root .ws-hero__stats { width: 100%; min-width: 0; display: grid; gap: 12px; align-self: end; } @media (min-width: 600px) { .site-root .ws-hero__stats { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; } } .site-root .ws-stat { background: #ffffff; border-radius: 24px; box-shadow: var(--ws-shadow-1); padding: 18px; min-width: 0; position: relative; } @media (min-width: 768px) { .site-root .ws-stat { padding: 20px; } } .site-root .ws-stat__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .site-root .ws-stat__icon { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--ws-t-purple); color: var(--ws-i-purple); } .site-root .ws-stat__title { font-size: 16px; font-weight: 600; line-height: 1.4; } .site-root .ws-stat__sub { font-size: 13px; line-height: 1.5; color: var(--ws-ink-3); } .site-root .ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; } .site-root .ws-kpi { border-radius: 12px; background: var(--ws-surface-2); padding: 8px 10px 8px; box-shadow: inset 0 3px 0 var(--ws-kpi-c, var(--ws-c-purple)); display: flex; flex-direction: column; min-width: 0; } .site-root .ws-kpi--purple { --ws-kpi-c: var(--ws-c-purple); } .site-root .ws-kpi--coral { --ws-kpi-c: #ff736a; } .site-root .ws-kpi--amber { --ws-kpi-c: #fecf24; } .site-root .ws-kpi__label { font-size: 13px; line-height: 1.5; color: var(--ws-ink-3); margin-top: 2px; } .site-root .ws-kpi__value { font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; } .site-root .ws-kpi__value em { display: block; font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ws-success); } .site-root .ws-chartcard__tiles .ws-kpi__value em { display: inline; margin-left: 6px; } .site-root .ws-stat__charthead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.4; } .site-root .ws-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ws-ink-3); white-space: nowrap; } .site-root .ws-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin: 0 2px 0 8px; } .site-root .ws-legend__a { background: var(--ws-c-purple); } .site-root .ws-legend__b { background: repeating-linear-gradient(90deg, var(--ws-c-amber) 0 5px, transparent 5px 8px); } .site-root .ws-stat__chart { margin-top: 6px; } .site-root .ws-stat--fact { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } .site-root .ws-stat__tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; padding: 4px 14px 4px 4px; border-radius: var(--ws-r-pill); background: var(--ws-surface-2); font-size: 15px; font-weight: 600; line-height: 1.3; } .site-root .ws-stat__tagicon { width: 32px; height: 32px; border-radius: 50%; background: var(--ws-dark); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .site-root .ws-stat__fact { display: flex; flex-direction: column; gap: 4px; } .site-root .ws-stat__num { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; /* 不用漸層字：#ffab18 端在白底只有 1.89:1，低於大字 3:1；改用實色 primary-ink（白底 5.2:1） */ color: var(--ws-primary-ink); align-self: flex-start; } .site-root .ws-stat__text { font-size: 15px; line-height: 1.6; color: var(--ws-ink-2); } .site-root .ws-langs { display: flex; flex-wrap: wrap; gap: 6px; } .site-root .ws-langs li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--ws-r-pill); background: var(--ws-primary-10); color: var(--ws-primary-ink); font-size: 13px; font-weight: 600; } .site-root .ws-hero__visual { min-width: 0; } .site-root .ws-hero__frame { height: 100%; border-radius: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95); padding: 32px 20px 24px; display: flex; align-items: center; justify-content: center; } .site-root .ws-hero__phonewrap { width: min(300px, 82%); } @media (min-width: 1000px) { .site-root .ws-hero__phonewrap { width: min(330px, 80%); } } .site-root .ws-capchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: calc(var(--ws-container) + 2 * var(--ws-gutter)); margin: 24px auto 0; padding: 0 var(--ws-gutter) 16px; } .site-root .ws-capchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--ws-r-pill); background: var(--ws-surface-3); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ws-ink-2); } .site-root .ws-capchip .ws-icon { color: var(--ws-primary-ink); } /* 尚未上線的功能（例如刷卡機串接）：標籤後加「即將推出」 */ .site-root .ws-capchip__soon { display: inline-flex; align-items: center; min-height: 22px; margin-right: -6px; padding: 0 9px; border-radius: var(--ws-r-pill); background: #ffffff; box-shadow: inset 0 0 0 1px var(--ws-line); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ws-ink-3); white-space: nowrap; } @media (min-width: 768px) { .site-root .ws-capchips { gap: 12px; margin-top: 32px; padding-bottom: 24px; } .site-root .ws-capchip { min-height: 48px; padding: 0 22px; font-size: 16px; } } /* ---------- 裝置外框與示意畫面縮放 ---------- */ /* 示意畫面以固定設計尺寸排版（HTML 的 --sw／--sh，例如 1200px × 750px），再依外框寬度等比縮放： 縮放比例＝外框寬度 ÷ 設計寬度，用 tan(atan2(寬, 寬)) 在 CSS 裡算出（不需要 JavaScript）； 不支援的舊瀏覽器由 site.js 改用 JavaScript 計算。外框高度由 HTML 的 aspect-ratio 先佔好，不會跳版。 */ .site-root .ws-scaled { position: relative; width: 100%; overflow: hidden; container-type: inline-size; } .site-root .ws-scaled__inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: var(--sw); height: var(--sh); transform: scale(tan(atan2(100cqw, var(--sw)))); } .site-root .ws-tablet { background: #36353a; border-radius: 20px; padding: 10px; box-shadow: var(--ws-shadow-2); } .site-root .ws-tablet__screen { border-radius: 12px; overflow: hidden; background: #ffffff; } .site-root .ws-tablet--flat { border-radius: 16px 16px 0 0; padding: 8px 8px 0; box-shadow: none; } .site-root .ws-tablet--flat .ws-tablet__screen { border-radius: 10px 10px 0 0; } .site-root .ws-device { max-width: 1200px; margin: 0 auto; background: var(--ws-dark); border-radius: 28px; padding: 8px; box-shadow: var(--ws-shadow-device); } .site-root .ws-device__screen { border-radius: 16px; overflow: hidden; background: #ffffff; } @media (min-width: 768px) { .site-root .ws-device { border-radius: 40px; padding: 16px; } .site-root .ws-device__screen { border-radius: 24px; } } .site-root .ws-phone { position: relative; border-radius: 13% / 6.2%; background: #19191c; padding: 3.2%; box-shadow: 0 30px 60px -24px rgba(25, 25, 28, .45), inset 0 0 0 1.5px #3a3a40; } .site-root .ws-phone__screen { border-radius: 10.5% / 5%; overflow: hidden; background: #ffffff; } .site-root .ws-tv { position: relative; padding-bottom: 18px; } .site-root .ws-tv__screen { border-radius: 14px; overflow: hidden; background: #000; border: 8px solid #19191c; box-shadow: var(--ws-shadow-2); } .site-root .ws-tv__stand { position: absolute; left: 50%; bottom: 0; width: 22%; height: 18px; transform: translateX(-50%); background: linear-gradient(180deg, #2a2a30, #19191c); border-radius: 0 0 10px 10px; } /* ---------- 示意介面（固定設計尺寸，再整體縮放；數值為設計稿 px） ---------- */ .site-root .ws-m-app, .site-root .ws-m-co, .site-root .ws-m-lang, .site-root .ws-m-member, .site-root .ws-m-queue, .site-root .ws-m-pagecard, .site-root .ws-m-mlist { font-family: var(--ws-font); font-size: 14px; line-height: 1.4; color: #19191c; text-align: left; } .site-root .ws-m-app { width: 100%; height: 100%; display: flex; flex-direction: column; background: #f8f9fd; } .site-root .ws-m-top { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #fff; border-bottom: 1px solid #ededed; } .site-root .ws-m-top__brand { display: flex; align-items: center; gap: 12px; } .site-root .ws-m-top__shop { font-size: 15px; font-weight: 600; } .site-root .ws-m-crumb { font-size: 12px; color: #6f7175; } .site-root .ws-m-crumb span { margin: 0 3px; } .site-root .ws-m-crumb b { color: var(--ws-primary-ink); } .site-root .ws-m-top__right { display: flex; align-items: center; gap: 10px; } .site-root .ws-m-capsule { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #f8f9fd; border: 1px solid #ededed; font-size: 13px; font-weight: 500; color: #282930; white-space: nowrap; } .site-root .ws-m-capsule--right { margin-left: auto; } .site-root .ws-m-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ws-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex: none; } .site-root .ws-m-avatar--sm { width: 34px; height: 34px; font-size: 14px; background: var(--ws-primary-20); color: #0b6bb0; } .site-root .ws-m-body { flex: 1; display: flex; min-height: 0; } .site-root .ws-m-rail { width: 88px; flex: none; background: #fff; border-right: 1px solid #ededed; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; } .site-root .ws-m-rail__item { height: 60px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: #6f7175; } .site-root .ws-m-rail__item.is-on { background: var(--ws-gradient); color: #fff; box-shadow: 0 8px 16px -8px rgba(26, 115, 232, .5); } .site-root .ws-m-main { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .site-root .ws-m-toolbar { display: flex; align-items: center; gap: 8px; flex: none; } .site-root .ws-m-search { display: inline-flex; align-items: center; gap: 8px; height: 38px; width: 230px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid #e4e4e4; color: #6b7280; font-size: 13px; margin-right: 6px; } .site-root .ws-m-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #e4e4e4; background: #fff; font-size: 13px; font-weight: 500; color: #282930; white-space: nowrap; } .site-root .ws-m-chip.is-on { border-color: var(--ws-primary); background: var(--ws-primary-10); color: #0b6bb0; font-weight: 600; } .site-root .ws-m-legend { display: inline-flex; gap: 12px; margin-left: auto; font-size: 12px; color: #6f7175; white-space: nowrap; } .site-root .ws-m-legend span { display: inline-flex; align-items: center; gap: 5px; } .site-root .ws-m-legend i, .site-root .ws-m-queue__label i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid transparent; display: inline-block; flex: none; } .site-root .ws-m-dot--ok { background: #1a9f5e; } .site-root .ws-m-dot--warn { background: #e08a00; } .site-root .ws-m-dot--late { background: #d93b3b; } .site-root .ws-m-dot--run { background: #3071ff; } .site-root .ws-m-food { display: block; position: relative; border-radius: 12px; overflow: hidden; --food: #f39a5b; background: linear-gradient(135deg, #fff1e4, #ffd9b8); } .site-root .ws-m-food::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--food) 0 36%, #ffffff 37% 60%, rgba(255, 255, 255, .5) 61% 68%, rgba(255, 255, 255, 0) 69%); } .site-root .ws-m-food--1 { --food: #e7b04a; background: linear-gradient(135deg, #fff8e3, #ffe6a8); } .site-root .ws-m-food--2 { --food: #7cbf5c; background: linear-gradient(135deg, #f1faeb, #cdeebb); } .site-root .ws-m-food--3 { --food: #e2726a; background: linear-gradient(135deg, #fff0ee, #ffcfca); } .site-root .ws-m-food--4 { --food: #6d9ee8; background: linear-gradient(135deg, #eef5ff, #cfe2ff); } .site-root .ws-m-food--5 { --food: #a383ec; background: linear-gradient(135deg, #f5f0ff, #ddd0ff); } /* 新訂單 */ .site-root .ws-m-pos, .site-root .ws-m-tables { flex: 1; display: flex; gap: 16px; min-height: 0; } .site-root .ws-m-pos__left, .site-root .ws-m-tables__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .site-root .ws-m-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .site-root .ws-m-product { position: relative; background: #fff; border-radius: 16px; padding: 8px 8px 10px; box-shadow: 0 3px 6px rgba(20, 20, 20, .04); text-align: center; } .site-root .ws-m-product .ws-m-food { width: 100%; height: 92px; } .site-root .ws-m-product__name { margin-top: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-root .ws-m-price { color: var(--ws-primary-ink); font-weight: 600; font-size: 13.5px; } .site-root .ws-m-product__badge { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--ws-primary); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .site-root .ws-m-pos__panel { width: 330px; flex: none; background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 3px 6px rgba(20, 20, 20, .04); } .site-root .ws-m-seg { display: flex; background: #f2f4f7; border-radius: 999px; padding: 4px; } .site-root .ws-m-seg span { flex: 1; text-align: center; height: 32px; line-height: 32px; border-radius: 999px; font-size: 13px; color: #5f6166; font-weight: 500; white-space: nowrap; } .site-root .ws-m-seg .is-on { background: #fff; color: #19191c; font-weight: 600; box-shadow: 0 3px 6px rgba(20, 20, 20, .06); } .site-root .ws-m-seg--inline { display: inline-flex; } .site-root .ws-m-seg--inline span { flex: none; padding: 0 16px; } .site-root .ws-m-panel-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #6f7175; } .site-root .ws-m-panel-row b { font-size: 16px; font-weight: 600; color: #19191c; } .site-root .ws-m-panel-title { font-size: 15px; font-weight: 600; margin-top: 2px; } .site-root .ws-m-panel-sub { font-size: 12.5px; color: #6f7175; margin-top: -6px; } .site-root .ws-m-line { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; } .site-root .ws-m-line .ws-m-food { border-radius: 10px; flex: none; } .site-root .ws-m-line--slim { padding-bottom: 8px; } .site-root .ws-m-line__text { flex: 1; min-width: 0; } .site-root .ws-m-line__name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-root .ws-m-line__spec { font-size: 12px; color: #6b7280; } .site-root .ws-m-step { display: flex; align-items: center; gap: 8px; font-size: 13px; } .site-root .ws-m-step i { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; } .site-root .ws-m-step__minus { background: #ededed; color: #6f7175; } .site-root .ws-m-step__plus { background: #19191c; color: #fff; } .site-root .ws-m-line__price { width: 68px; text-align: right; font-size: 13.5px; font-weight: 600; white-space: nowrap; } .site-root .ws-m-totals { margin-top: auto; background: #f8f9fd; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #6f7175; } .site-root .ws-m-totals div { display: flex; justify-content: space-between; } .site-root .ws-m-totals__sum { color: #19191c; font-weight: 600; font-size: 15px; border-top: 1px dashed #d0d2d8; padding-top: 6px; margin-top: 2px; } .site-root .ws-m-totals__sum span:last-child { color: var(--ws-primary-ink); font-size: 18px; } .site-root .ws-m-totals > .ws-m-totals__sum:only-child { border-top: 0; padding-top: 0; margin-top: 0; } .site-root .ws-m-actions { display: flex; gap: 8px; } .site-root .ws-m-actions .ws-m-btn { flex: 1; } .site-root .ws-m-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1.5px solid transparent; } .site-root .ws-m-btn--outline { border-color: #19191c; color: #19191c; background: #fff; } .site-root .ws-m-btn--dark { background: #19191c; color: #fff; } .site-root .ws-m-btn--grad { background: var(--ws-gradient); color: #fff; } .site-root .ws-m-btn--full { width: 100%; } .site-root .ws-m-btn--sm { height: 34px; font-size: 13px; } /* 桌位 */ .site-root .ws-m-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; flex: none; } .site-root .ws-m-kpis--6 { grid-template-columns: repeat(6, 1fr); } .site-root .ws-m-kpi { background: #fff; border: 1px solid #ededed; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; } .site-root .ws-m-kpi span { font-size: 11.5px; color: #6b7280; font-weight: 500; } .site-root .ws-m-kpi b { font-size: 18px; font-weight: 600; margin-top: 2px; white-space: nowrap; } .site-root .ws-m-kpi--card { padding: 12px 14px; border-radius: 16px; border-color: transparent; box-shadow: 0 3px 6px rgba(20, 20, 20, .04); } .site-root .ws-m-kpi--card b { font-size: 20px; } .site-root .ws-m-kpi--card em { font-style: normal; font-size: 12px; color: #157a48; font-weight: 600; } .site-root .ws-m-tgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .site-root .ws-m-table { border-radius: 16px; border: 1.5px solid; height: 130px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12.5px; } .site-root .ws-m-table b { font-size: 22px; font-weight: 600; line-height: 1.1; } .site-root .ws-m-table__t { font-weight: 600; } .site-root .ws-m-table.is-sel { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ws-primary); } .site-root .ws-m-tables__panel { width: 300px; } .site-root .ws-m-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #f2f4f7; font-size: 12px; font-weight: 600; color: #282930; white-space: nowrap; } .site-root .ws-m-pill--ok { background: #e8f8f3; color: #0d7a62; } .site-root .ws-m-bar { height: 6px; border-radius: 3px; background: #ededed; overflow: hidden; flex: none; } .site-root .ws-m-bar i { display: block; height: 100%; background: #1abc9c; border-radius: 3px; } .site-root .ws-m-btngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .site-root .ws-m-btngrid .ws-m-btn { height: 38px; font-size: 13px; } /* 出餐看板 */ .site-root .ws-m-kds { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .site-root .ws-m-tickets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; } .site-root .ws-m-ticket { position: relative; background: #fff; border-radius: 16px; border: 1.5px solid #ededed; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; } .site-root .ws-m-ticket__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: #fff; } .site-root .ws-m-ticket__head b { display: block; font-size: 16px; font-weight: 600; } .site-root .ws-m-ticket__head div span { font-size: 12px; opacity: .85; } .site-root .ws-m-ticket__min { font-size: 15px; font-weight: 600; background: rgba(255, 255, 255, .22); padding: 4px 10px; border-radius: 999px; } .site-root .ws-m-ticket--ok .ws-m-ticket__head { background: #1a9f5e; } .site-root .ws-m-ticket--warn .ws-m-ticket__head { background: #d17f00; } .site-root .ws-m-ticket--late .ws-m-ticket__head { background: #d93b3b; } .site-root .ws-m-ticket.is-new { border-color: var(--ws-primary); box-shadow: 0 0 0 4px rgba(30, 155, 240, .18); } .site-root .ws-m-ticket__new { align-self: flex-start; margin: 10px 14px 0; background: var(--ws-primary-10); color: #0b6bb0; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .site-root .ws-m-kitem { display: flex; align-items: center; gap: 10px; padding: 10px 14px 0; font-size: 14px; } .site-root .ws-m-kitem span { flex: 1; } .site-root .ws-m-kitem b { font-weight: 600; } .site-root .ws-m-kitem.is-done span, .site-root .ws-m-kitem.is-done b { color: #a3a5ab; text-decoration: line-through; } .site-root .ws-m-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #d0d2d8; display: flex; align-items: center; justify-content: center; font-style: normal; flex: none; color: #fff; } .site-root .ws-m-kitem.is-done .ws-m-check { background: #1a9f5e; border-color: #1a9f5e; } .site-root .ws-m-ticket > .ws-m-btn { margin: 14px 14px 0; width: auto; } /* 戰情室 */ .site-root .ws-m-dash { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .site-root .ws-m-dash__row { display: flex; gap: 14px; } .site-root .ws-m-card { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 3px 6px rgba(20, 20, 20, .04); } .site-root .ws-m-card--grow { flex: 1; min-width: 0; } .site-root .ws-m-card--pay, .site-root .ws-m-card--feed { width: 360px; flex: none; } .site-root .ws-m-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: #6f7175; } .site-root .ws-m-card__head b { font-size: 15px; font-weight: 600; color: #19191c; } .site-root .ws-m-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin: 0 4px 2px 10px; vertical-align: middle; } .site-root .ws-m-key--a { background: #8569f6; } .site-root .ws-m-key--b { background: #ffb049; } .site-root .ws-m-pay { display: flex; align-items: center; gap: 20px; padding-top: 8px; } .site-root .ws-m-pay ul { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .site-root .ws-m-pay li { display: flex; align-items: center; gap: 8px; } .site-root .ws-m-pay li i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .site-root .ws-m-pay li b { margin-left: auto; font-weight: 600; } .site-root .ws-m-rank { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; } .site-root .ws-m-rank .ws-m-food { flex: none; border-radius: 8px; } .site-root .ws-m-rank span { width: 96px; font-weight: 500; } .site-root .ws-m-rank i { flex: 1; height: 8px; border-radius: 4px; background: #f2f4f7; overflow: hidden; } .site-root .ws-m-rank i b { display: block; height: 100%; background: #4e9aff; border-radius: 4px; } .site-root .ws-m-rank em { width: 50px; text-align: right; font-style: normal; color: #6f7175; } .site-root .ws-m-link { color: var(--ws-primary-ink); font-weight: 600; font-size: 12.5px; } .site-root .ws-m-feed { display: flex; gap: 10px; padding: 6px 0; font-size: 13px; } .site-root .ws-m-feed i { width: 8px; height: 8px; border-radius: 50%; background: var(--ws-primary); margin-top: 6px; flex: none; } .site-root .ws-m-feed em { display: block; font-style: normal; font-size: 11.5px; color: #6b7280; } /* 手機狀態列 */ .site-root .ws-m-status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: 14px; font-weight: 600; color: #19191c; position: relative; background: #fff; font-family: var(--ws-font); line-height: 1; } .site-root .ws-m-status__island { position: absolute; left: 50%; top: 9px; width: 96px; height: 26px; margin-left: -48px; border-radius: 13px; background: #0b0b0d; } .site-root .ws-m-status__icons { display: flex; gap: 4px; } .site-root .ws-m-status__icons i { width: 16px; height: 10px; border-radius: 3px; background: #19191c; display: block; } .site-root .ws-m-status__icons i:last-child { width: 22px; } /* 顧客掃碼點餐 */ .site-root .ws-m-co { height: 716px; display: flex; flex-direction: column; background: #fff; } .site-root .ws-m-co__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 18px 12px; } .site-root .ws-m-co__shop { font-size: 18px; font-weight: 700; } .site-root .ws-m-co__table { display: inline-flex; align-items: center; margin-top: 4px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ws-primary-10); color: #0b6bb0; font-size: 12px; font-weight: 600; } .site-root .ws-m-co__lang { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e4e4e4; font-size: 13px; font-weight: 500; } .site-root .ws-m-co__banner { margin: 0 18px; height: 120px; flex: none; border-radius: 18px; background: var(--ws-gradient); color: #fff; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; } .site-root .ws-m-co__banner b { font-size: 20px; font-weight: 700; } .site-root .ws-m-co__banner span { font-size: 13px; opacity: .92; } .site-root .ws-m-co__tabs { display: flex; gap: 8px; padding: 14px 18px 6px; } .site-root .ws-m-co__tabs span { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; background: #f5f5f5; color: #4d4e57; } .site-root .ws-m-co__tabs .is-on { background: #19191c; color: #fff; } .site-root .ws-m-co__list { flex: 1; min-height: 0; overflow: hidden; padding: 6px 18px 0; display: flex; flex-direction: column; gap: 12px; } .site-root .ws-m-co__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; border: 1px solid #f0f0f0; flex: none; } .site-root .ws-m-co__item .ws-m-food { flex: none; } .site-root .ws-m-co__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .site-root .ws-m-co__text b { font-size: 15px; font-weight: 600; } .site-root .ws-m-co__text span { font-size: 12px; color: #6b7280; } .site-root .ws-m-co__text em { font-style: normal; font-weight: 600; color: var(--ws-primary-ink); margin-top: 4px; font-size: 14px; } .site-root .ws-m-co__add { width: 32px; height: 32px; border-radius: 50%; background: #19191c; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 600; font-size: 14px; } .site-root .ws-m-co__add.has-q { background: var(--ws-primary); } .site-root .ws-m-co__cart { margin: 10px 14px 16px; height: 62px; flex: none; border-radius: 31px; background: #19191c; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 10px; box-shadow: 0 12px 24px -12px rgba(25, 25, 28, .6); } .site-root .ws-m-co__bag { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; flex: none; } .site-root .ws-m-co__bag i { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ws-primary); font-size: 11px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; } .site-root .ws-m-co__cart > div { flex: 1; min-width: 0; } .site-root .ws-m-co__cart > div b { display: block; font-size: 14px; } .site-root .ws-m-co__cart > div span { font-size: 12px; color: #b7b7ba; } .site-root .ws-m-co__submit { height: 46px; padding: 0 18px; border-radius: 23px; background: var(--ws-primary); display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; white-space: nowrap; } .site-root .ws-m-lang { height: 716px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 28px 36px; background: linear-gradient(180deg, #fff 0%, #ebf6fe 100%); } .site-root .ws-m-lang__logo { margin-bottom: 16px; } .site-root .ws-m-lang__shop { font-size: 22px; font-weight: 700; } .site-root .ws-m-lang__q { margin-top: 40px; font-size: 15px; line-height: 1.8; color: #4d4e57; } .site-root .ws-m-lang__btns { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .site-root .ws-m-lang__btns span { height: 60px; border-radius: 30px; background: #fff; border: 1.5px solid #e4e4e4; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; } .site-root .ws-m-lang__btns .is-on { border-color: var(--ws-primary); background: var(--ws-primary); color: #fff; } .site-root .ws-m-lang__start { margin-top: auto; font-size: 14px; color: #6f7175; } /* 叫號看板（電視） */ .site-root .ws-m-queue { width: 100%; height: 100%; background: #19191c; color: #fff; padding: 28px 36px; display: flex; flex-direction: column; gap: 22px; font-size: 20px; line-height: 1.3; } .site-root .ws-m-queue__head { display: flex; justify-content: space-between; align-items: center; font-size: 26px; font-weight: 600; } .site-root .ws-m-queue__head span:first-child { display: inline-flex; align-items: center; gap: 14px; } .site-root .ws-m-queue__cols { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; min-height: 0; } .site-root .ws-m-queue__panel { background: #24252b; border-radius: 28px; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; } .site-root .ws-m-queue__label { font-size: 22px; color: #b7b7ba; font-weight: 600; display: flex; align-items: center; gap: 10px; } .site-root .ws-m-queue__label i { width: 14px; height: 14px; } .site-root .ws-m-queue__label--run { margin-top: 14px; } .site-root .ws-m-queue__big { font-size: 150px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ws-primary-50); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .site-root .ws-m-queue__big { background: var(--ws-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } .site-root .ws-m-queue__sub { font-size: 18px; color: #a0a2a8; margin-top: 6px; } .site-root .ws-m-queue__nums { display: flex; flex-wrap: wrap; gap: 12px; } .site-root .ws-m-queue__nums span { min-width: 96px; height: 56px; padding: 0 16px; border-radius: 16px; background: #2d2e35; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; } .site-root .ws-m-queue__nums--muted span { color: #a0a2a8; } .site-root .ws-m-queue__nums--big span { min-width: 150px; height: 110px; font-size: 64px; background: #1a9f5e; border-radius: 22px; } .site-root .ws-m-pagecard { width: 100%; height: 100%; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 20px 40px -16px rgba(25, 25, 28, .35), 0 0 0 1px rgba(25, 25, 28, .06); } .site-root .ws-m-pagecard__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .site-root .ws-m-pagecard__now { margin: 10px 0 12px; padding: 10px 14px; border-radius: 14px; background: #f8f9fd; display: flex; align-items: center; justify-content: space-between; } .site-root .ws-m-pagecard__now span { font-size: 13px; color: #6f7175; } .site-root .ws-m-pagecard__now b { font-size: 30px; font-weight: 700; color: var(--ws-primary-ink); } .site-root .ws-m-pagecard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .site-root .ws-m-pagecard__btns .ws-m-btn { height: 38px; font-size: 13px; } /* 會員卡（手機）＋會員列表 */ .site-root .ws-m-member { height: 716px; background: #f8f9fd; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; } .site-root .ws-m-member__title { font-size: 18px; font-weight: 700; text-align: center; padding: 6px 0 4px; } .site-root .ws-m-mcard { border-radius: 22px; padding: 20px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #3a3a44 0%, #19191c 60%); box-shadow: 0 18px 30px -16px rgba(25, 25, 28, .6); position: relative; overflow: hidden; } .site-root .ws-m-mcard::after { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 195, 247, .45), rgba(26, 115, 232, 0) 70%); } .site-root .ws-m-mcard__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 1.5px; color: rgba(255, 255, 255, .55); font-weight: 700; position: relative; z-index: 1; } .site-root .ws-m-mcard__tier { color: #ffcf6b; letter-spacing: 0; font-size: 13px; border: 1px solid rgba(255, 207, 107, .5); padding: 2px 10px; border-radius: 999px; } .site-root .ws-m-mcard__name { font-size: 26px; font-weight: 700; margin-top: 18px; } .site-root .ws-m-mcard__no { font-size: 13px; color: rgba(255, 255, 255, .6); letter-spacing: 1px; } .site-root .ws-m-mcard__bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; } .site-root .ws-m-mcard__bottom span { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); font-weight: 700; letter-spacing: 1px; } .site-root .ws-m-mcard__bottom b { font-size: 34px; font-weight: 700; line-height: 1.1; } .site-root .ws-m-mcard__qr { background: #fff; padding: 6px; border-radius: 10px; } .site-root .ws-m-member__label { font-size: 14px; font-weight: 600; margin-top: 6px; } .site-root .ws-m-member__row { display: flex; justify-content: space-between; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 13.5px; } .site-root .ws-m-member__row b { color: #157a48; font-weight: 600; } .site-root .ws-m-member__row b.is-minus { color: #d93b3b; } .site-root .ws-m-mlist { width: 100%; height: 100%; background: #fff; border-radius: 20px; padding: 16px 18px; font-size: 13.5px; box-shadow: 0 20px 40px -16px rgba(25, 25, 28, .35), 0 0 0 1px rgba(25, 25, 28, .06); } .site-root .ws-m-mlist__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f0f0; } .site-root .ws-m-mlist__row > div { flex: 1; min-width: 0; } .site-root .ws-m-mlist__row b { display: block; font-weight: 600; } .site-root .ws-m-mlist__row > div span { font-size: 12px; color: #6b7280; } .site-root .ws-m-mlist__row em { font-style: normal; font-weight: 600; width: 70px; text-align: right; } /* ---------- 功能介紹 ---------- */ .site-root .ws-split-head { display: grid; gap: 24px; margin-bottom: 40px; } .site-root .ws-split-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .site-root .ws-side-text { font-size: 17px; line-height: 1.75; color: var(--ws-ink-3); } @media (min-width: 900px) { .site-root .ws-split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 48px; margin-bottom: 56px; } .site-root .ws-split-head--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); } } .site-root .ws-feature-cards { display: grid; gap: 20px; } @media (min-width: 900px) { .site-root .ws-feature-cards { grid-template-columns: 1fr 1fr; gap: 24px; } } .site-root .ws-fcard { background: #ffffff; border: 1px solid var(--ws-line-soft); border-radius: 24px; padding: 12px; display: flex; flex-direction: column; min-width: 0; } .site-root .ws-fcard__media { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ws-surface-2); } .site-root .ws-fcard__body { padding: 24px 16px 16px; } @media (min-width: 768px) { .site-root .ws-fcard__body { padding: 28px 32px 28px; } } .site-root .ws-fcard__body p { margin-top: 12px; font-size: 16px; line-height: 1.8; color: var(--ws-ink-2); } .site-root .ws-fcard__phones { height: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 7%; padding: 7% 8% 0; background: linear-gradient(160deg, var(--ws-primary-10) 0%, var(--ws-primary-20) 100%); } .site-root .ws-fcard__phones .ws-phone { width: 36%; flex: none; } /* ---------- 結帳模式（先點後結／先點先結） ---------- */ .site-root .ws-modes { display: grid; gap: 20px; } @media (min-width: 900px) { .site-root .ws-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } .site-root .ws-mode { display: flex; flex-direction: column; gap: 24px; min-width: 0; background: var(--ws-surface-2); border: 1px solid var(--ws-line-soft); border-radius: var(--ws-r-card); padding: 24px 18px; } @media (min-width: 768px) { .site-root .ws-mode { padding: 36px 36px 32px; border-radius: 32px; gap: 28px; } } .site-root .ws-mode__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; } .site-root .ws-mode__icon { width: 56px; height: 56px; border-radius: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; } .site-root .ws-mode__icon--blue { background: var(--ws-gradient); box-shadow: 0 12px 22px -12px rgba(26, 115, 232, .7); } .site-root .ws-mode__icon--violet { background: linear-gradient(219deg, #b18cff 0%, #6d4fe0 100%); box-shadow: 0 12px 22px -12px rgba(109, 79, 224, .7); } .site-root .ws-mode__titles { min-width: 0; } .site-root .ws-mode__name { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .site-root .ws-mode__tagline { margin-top: 2px; font-size: 15px; line-height: 1.6; color: var(--ws-ink-3); text-wrap: pretty; } .site-root .ws-mode__sys { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px 4px 4px; border-radius: var(--ws-r-pill); background: #ffffff; border: 1px solid var(--ws-line); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ws-ink); } .site-root .ws-mode__sys span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--ws-r-pill); background: var(--ws-surface-3); color: var(--ws-ink-2); font-size: 13px; font-weight: 500; } @media (min-width: 1100px) { .site-root .ws-mode__head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; } .site-root .ws-mode__icon, .site-root .ws-mode__titles { align-self: center; } .site-root .ws-mode__sys { grid-column: auto; margin-top: 4px; } } /* 流程步驟：圓形圖示 + 連接線（結帳那一步用漸層標示） */ .site-root .ws-steps { --dot: 44px; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 18px 4px 16px; border-radius: 20px; background: #ffffff; border: 1px solid var(--ws-line-soft); } @media (min-width: 768px) { .site-root .ws-steps { --dot: 52px; padding: 24px 8px 20px; } } .site-root .ws-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; } .site-root .ws-step__dot { position: relative; z-index: 1; width: var(--dot); height: var(--dot); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ws-surface-2); color: var(--ws-ink); box-shadow: inset 0 0 0 1px var(--ws-line); } .site-root .ws-step.is-pay .ws-step__dot { background: var(--ws-gradient); color: #ffffff; box-shadow: 0 10px 18px -8px rgba(26, 115, 232, .6); } .site-root .ws-step__label { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ws-ink); word-break: keep-all; overflow-wrap: anywhere; } @media (min-width: 768px) { .site-root .ws-step__label { font-size: 15px; } } .site-root .ws-step.is-pay .ws-step__label { color: var(--ws-primary-ink); } .site-root .ws-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); height: 2px; left: calc(50% + var(--dot) / 2 + 6px); right: calc(-50% + var(--dot) / 2 + 8px); background: #c9ccd3; border-radius: 1px; } .site-root .ws-step:not(:last-child)::before { content: ""; position: absolute; top: calc(var(--dot) / 2 - 4px); width: 8px; height: 8px; right: calc(-50% + var(--dot) / 2 + 8px); border-top: 2px solid #c9ccd3; border-right: 2px solid #c9ccd3; transform: rotate(45deg); } .site-root .ws-mode__points { display: flex; flex-direction: column; gap: 12px; } .site-root .ws-mode__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.65; color: var(--ws-ink-2); text-wrap: pretty; } .site-root .ws-mode__check { flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; background: var(--ws-dark); color: #ffffff; } .site-root .ws-mode__fit { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 20px; border-top: 1px solid var(--ws-line); } .site-root .ws-mode__fitlabel { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ws-ink-3); } .site-root .ws-mode__fitlist { display: flex; flex-wrap: wrap; gap: 8px; } .site-root .ws-mode__fitlist li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--ws-r-pill); background: #ffffff; border: 1px solid var(--ws-line); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ws-ink); } /* 兩種流程都內建（結帳模式設定位置） */ .site-root .ws-switch { margin-top: 20px; display: grid; gap: 16px 24px; align-items: center; padding: 24px 18px; border-radius: var(--ws-r-card); background: #ffffff; border: 1px solid var(--ws-line-soft); box-shadow: var(--ws-shadow-1); } @media (min-width: 768px) { .site-root .ws-switch { grid-template-columns: auto minmax(0, 1fr); padding: 28px 32px; margin-top: 24px; } .site-root .ws-switch__side { grid-column: 2; } } @media (min-width: 1100px) { .site-root .ws-switch { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 32px; } .site-root .ws-switch__side { grid-column: auto; align-items: flex-end; } .site-root .ws-switch__links { justify-content: flex-end; } } .site-root .ws-switch__icon { background: var(--ws-primary-10); color: var(--ws-primary-ink); } .site-root .ws-switch__title { font-size: 20px; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; } .site-root .ws-switch__copy { min-width: 0; } .site-root .ws-switch__copy p { margin-top: 6px; max-width: 640px; font-size: 15px; line-height: 1.75; color: var(--ws-ink-2); text-wrap: pretty; } .site-root .ws-switch__side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .site-root .ws-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .site-root .ws-path__part { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .site-root .ws-path__sep { color: var(--ws-ink-3); } .site-root .ws-path__chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--ws-r-pill); background: var(--ws-surface-3); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ws-ink-2); white-space: nowrap; } .site-root .ws-path__chip.is-last { background: var(--ws-primary-10); color: var(--ws-primary-ink); box-shadow: inset 0 0 0 1px var(--ws-primary-20); } /* 窄螢幕（< 375px）：縮小路徑膠囊，讓「設定 › 商店資訊 › 結帳模式」排在同一行，不讓 › 落單到下一行開頭 */ @media (max-width: 374px) { .site-root .ws-path, .site-root .ws-path__part { gap: 4px; } .site-root .ws-path__chip { min-height: 34px; padding: 0 10px; font-size: 13px; } } .site-root .ws-switch__links { display: flex; flex-wrap: wrap; gap: 0 20px; } .site-root .ws-switch__links .ws-textlink { min-height: 44px; } /* ---------- 支付方式 ---------- */ /* * 欄數：每一列都排滿（14 張小卡），且品牌標誌（橫式文字商標）顯示高度至少 20px： * 599px 以下 2 欄（7 列） * 600–767px 3 欄，「信用卡」跨 2 欄（5 列） * 768–959px 4 欄，「現金」「信用卡」各跨 2 欄（4 列） * 960–1279px 5 欄，「信用卡」跨 2 欄（3 列） * 1280px 起 7 欄（2 列） * 跨欄的「信用卡」小卡，卡別標誌排成一排、放大顯示。增減 index.html 的付款方式小卡時要一併檢查這裡的跨欄設定。 * grid-auto-rows: 1fr：每一列同高（說明文字換行的小卡不會讓那一列特別高）。 */ .site-root .ws-paygrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; } @media (min-width: 600px) { .site-root .ws-paygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .site-root .ws-pay[data-pay="credit"] { grid-column: span 2; } } @media (min-width: 768px) { .site-root .ws-paygrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site-root .ws-pay[data-pay="cash"] { grid-column: span 2; } } @media (min-width: 960px) { .site-root .ws-paygrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .site-root .ws-pay[data-pay="cash"] { grid-column: auto; } } @media (min-width: 1280px) { .site-root .ws-paygrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .site-root .ws-pay[data-pay="credit"] { grid-column: auto; } } /* 小卡：上方固定高度的圖示區（線條圖示／品牌標誌框／卡別標誌，三者同高）＋名稱＋說明，每張小卡同一節奏 */ .site-root .ws-pay { --pay-media-h: 36px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 12px 6px 11px; border-radius: 16px; background: #ffffff; border: 1px solid var(--ws-line-soft); text-align: center; } @media (min-width: 600px) { .site-root .ws-pay { --pay-media-h: 44px; padding: 16px 12px 14px; gap: 12px; border-radius: 18px; } } @media (min-width: 1024px) { .site-root .ws-pay { padding: 18px 12px 16px; border-radius: 20px; } } @media (min-width: 1280px) { .site-root .ws-pay { padding: 18px 8px 16px; } } /* 圖示區在 DOM 中排在文字後面（讀屏先念名稱），畫面上放到最上方 */ .site-root .ws-pay__icon, .site-root .ws-pay__logo, .site-root .ws-cardnets { order: -1; flex: none; height: var(--pay-media-h); } .site-root .ws-pay__icon { width: var(--pay-media-h); border-radius: 11px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--ws-surface-2); color: var(--ws-ink-2); } .site-root .ws-pay__icon .ws-icon { width: 20px; height: 20px; } @media (min-width: 600px) { .site-root .ws-pay__icon { border-radius: 14px; } .site-root .ws-pay__icon .ws-icon { width: 22px; height: 22px; } } /* * 品牌標誌框：滿版寬、白底細框，標誌等比例置中（橫式文字商標才不會被方形框縮得太小）。 * 標誌高度 ＝ 基準（--logo-a）× 高度係數（--logo-k，程式依長寬比換算＝1/√(寬/高)）× 視覺微調（--logo-s）， * 但不超過標誌框高度：每個標誌面積大致相同，看起來份量一致。 * 基準依各寬度的標誌框寬度設定：最扁長的文字商標（悠遊付、愛金卡、全支付、悠遊卡）也至少 20px 高。 */ .site-root .ws-pay__logo { --logo-k: .5; --logo-s: 1; --logo-a: 52px; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 4px 6px; border-radius: 10px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--ws-line); } @media (min-width: 600px) { .site-root .ws-pay__logo { --logo-a: 56px; padding: 5px 10px; border-radius: 12px; } } @media (min-width: 1280px) { .site-root .ws-pay__logo { --logo-a: 52px; padding: 5px 8px; } } .site-root .ws-pay__logo img { display: block; flex: none; min-width: 0; max-width: 100%; width: auto; height: min(100%, calc(var(--logo-a) * var(--logo-k) * var(--logo-s))); object-fit: contain; } /* 視覺微調（各家標誌的筆畫粗細、色塊份量不同） */ .site-root .ws-pay__logo[data-brand="linepay"] { --logo-s: .9; } .site-root .ws-pay__logo[data-brand="pxpay"] { --logo-s: .9; } .site-root .ws-pay__logo[data-brand="icash"] { --logo-s: .92; } .site-root .ws-pay__logo[data-brand="easywallet"] { --logo-s: 1.08; } .site-root .ws-pay__logo[data-brand="easycard"] { --logo-s: 1.04; } .site-root .ws-pay__logo[data-brand="taiwanpay"] { --logo-s: 1.08; } .site-root .ws-pay__logo[data-brand="ipass"] { --logo-s: 1.1; } /* 一卡通官方圖檔解析度低（211×60），顯示高度不超過 30px，避免模糊 */ .site-root .ws-pay__logo[data-brand="ipass"] img { max-height: 30px; } /* * Uber Eats 圖檔本身已含品牌規範要求的四周留白（≥「U」的高度），留白不另外裁切：圖檔約占標誌框高度 88%， * 文字約與其他標誌同高（依 Uber Eats 合作商家規範，店家自己的品牌要是主視覺，外送平台標誌不宜比其他標誌搶眼）。 */ .site-root .ws-pay__logo[data-brand="delivery"] { padding-top: 0; padding-bottom: 0; } .site-root .ws-pay__logo[data-brand="delivery"] img { height: 88%; } /* * 信用卡：卡別標誌小方塊。手機一排 5 個（339px 以下分 3＋2 兩排）；600–1279px「信用卡」小卡跨 2 欄，一排 5 個放大顯示； * 1280px 起 7 欄桌機小卡分 3＋2 兩排，標誌才不會縮得太小。 * 方塊內距只留 1px 2px：卡別標誌本身已是完整的受理標章，內距太大會讓標誌（尤其銀聯、AMEX 的小字）縮到看不清楚。 */ .site-root .ws-cardnets { --chip-h: 20px; align-self: stretch; display: flex; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: center; gap: 3px; margin: 0; padding: 0; list-style: none; } /* 一排放不下時等比例縮小（不換行，不會超出圖示區） */ .site-root .ws-cardnet { flex: 0 1 calc(var(--chip-h) * 1.5); min-width: 0; aspect-ratio: 3 / 2; max-height: var(--chip-h); padding: 1px 2px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--ws-line); } .site-root .ws-cardnet img { display: block; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 339px) { /* 圖示區 36px 高：兩排 16＋2＋16（約 330px 以下，兩排的方塊才比一排 5 個大；再寬就維持一排） */ .site-root .ws-cardnets { flex-wrap: wrap; --chip-h: 16px; row-gap: 2px; align-self: center; max-width: calc(var(--chip-h) * 4.5 + 8px); } .site-root .ws-cardnet { flex: none; width: calc(var(--chip-h) * 1.5); height: var(--chip-h); } } @media (min-width: 600px) { .site-root .ws-cardnets { --chip-h: 28px; gap: 5px; } .site-root .ws-cardnet { border-radius: 5px; } } @media (min-width: 1280px) { /* 圖示區 44px 高：兩排 21＋2＋21 */ .site-root .ws-cardnets { --chip-h: 21px; gap: 2px; flex-wrap: wrap; align-self: center; max-width: calc(var(--chip-h) * 4.5 + 8px); } .site-root .ws-cardnet { flex: none; width: calc(var(--chip-h) * 1.5); height: var(--chip-h); } } /* 沒有品牌標誌時的線條圖示：現金用綠色（語意色），其餘一律淺藍主色 */ .site-root .ws-pay__icon--green { background: var(--ws-t-green); color: var(--ws-i-green); } .site-root .ws-pay__icon--blue { background: var(--ws-primary-10); color: var(--ws-primary-ink); } .site-root .ws-pay__text { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; } .site-root .ws-pay__name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ws-ink); } .site-root .ws-pay__sub { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ws-ink-3); word-break: keep-all; overflow-wrap: anywhere; } @media (min-width: 1024px) { .site-root .ws-pay__name { font-size: 16px; } } .site-root .ws-paynote { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--ws-ink-3); } .site-root .ws-paycaps { display: grid; gap: 20px; margin-top: 32px; } @media (min-width: 1000px) { .site-root .ws-paycaps { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; margin-top: 48px; } } /* 亮點：中華電信信用卡機（EDC）串接 */ .site-root .ws-edc { position: relative; overflow: hidden; min-width: 0; display: grid; gap: 8px; align-items: center; border-radius: var(--ws-r-panel); color: #ffffff; background: radial-gradient(520px 380px at 100% 100%, rgba(30, 155, 240, .38) 0%, rgba(30, 155, 240, 0) 70%), radial-gradient(360px 260px at 0% 0%, rgba(79, 195, 247, .14) 0%, rgba(79, 195, 247, 0) 70%), var(--ws-dark); padding: 32px 22px 24px; } @media (min-width: 640px) { .site-root .ws-edc { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); gap: 24px; padding: 40px 24px 40px 40px; } } @media (min-width: 1200px) { .site-root .ws-edc { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); padding: 48px 32px 48px 48px; } } .site-root .ws-edc__copy { min-width: 0; } .site-root .ws-edc__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .site-root .ws-edc__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--ws-r-pill); background: rgba(255, 255, 255, .1); color: #a8dcff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font-size: 14px; font-weight: 600; line-height: 1.3; } /* 中華電信標誌：白色標誌框（深色底上才看得清楚） */ .site-root .ws-edc__partner { display: inline-flex; align-items: center; height: 40px; padding: 0 16px 0 12px; border-radius: var(--ws-r-pill); background: #ffffff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); } .site-root .ws-edc__partner img { display: block; width: auto; height: 28px; } .site-root .ws-edc__title { margin-top: 16px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } .site-root .ws-edc__text { margin-top: 12px; font-size: 16px; line-height: 1.8; color: var(--ws-on-dark-2); } .site-root .ws-edc__mock { margin-top: 22px; max-width: 440px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .site-root .ws-edc__mockrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px 12px; font-size: 14px; color: #e9e9ec; } .site-root .ws-edc__mocklabel { display: inline-flex; align-items: center; gap: 8px; } .site-root .ws-edc__mockrow b { font-size: 18px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; white-space: nowrap; } .site-root .ws-edc__mockbtns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px; } /* 359px 以下兩顆按鈕上下排，「結帳（啟動卡機）」才不會拆成兩行 */ @media (max-width: 359px) { .site-root .ws-edc__mockbtns { grid-template-columns: minmax(0, 1fr); } } .site-root .ws-edc__mockbtn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: var(--ws-r-pill); text-align: center; font-size: 14px; font-weight: 600; line-height: 1.3; color: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); } .site-root .ws-edc__mockbtn.is-primary { background: var(--ws-primary-fill); box-shadow: 0 10px 20px -10px rgba(20, 121, 196, .9); } .site-root .ws-edc__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--ws-on-dark-2); } .site-root .ws-edc__note .ws-icon { flex: none; margin-top: 3px; } .site-root .ws-edc__note > span { min-width: 0; } .site-root .ws-edc__visual { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; min-width: 0; } .site-root .ws-edc__caption { font-size: 13px; line-height: 1.5; color: var(--ws-on-dark-2); text-align: center; } .site-root .ws-terminal { width: min(230px, 72%); height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); } @media (min-width: 640px) { .site-root .ws-terminal { width: 100%; } } .site-root .ws-terminal text { font-family: var(--ws-font); } .site-root .ws-paycaps__side { display: grid; gap: 20px; min-width: 0; } @media (min-width: 640px) and (max-width: 999px) { .site-root .ws-paycaps__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .site-root .ws-paycaps__side { gap: 24px; } } .site-root .ws-paycap { display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: var(--ws-r-card); background: #ffffff; border: 1px solid var(--ws-line-soft); } @media (min-width: 768px) { .site-root .ws-paycap { padding: 28px; } } .site-root .ws-paycap .ws-iconcircle { background: var(--ws-surface-2); } .site-root .ws-paycap__title { margin-top: 14px; font-size: 20px; font-weight: 600; line-height: 1.4; } .site-root .ws-paycap p { margin-top: 8px; font-size: 15px; line-height: 1.75; color: var(--ws-ink-2); } .site-root .ws-splitbar { margin-top: auto; padding-top: 18px; } .site-root .ws-splitbar__bar { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; } .site-root .ws-splitbar__seg { display: block; height: 100%; border-radius: 3px; } .site-root .ws-splitbar__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; } .site-root .ws-splitbar__seg--green { background: #4fae2c; } .site-root .ws-splitbar__seg--blue { background: var(--ws-primary); } .site-root .ws-splitbar__seg--amber { background: #f2a51f; } .site-root .ws-splitbar__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ws-ink-3); } .site-root .ws-splitbar__legend li { display: inline-flex; align-items: center; gap: 6px; } .site-root .ws-splitbar__legend b { font-weight: 600; color: var(--ws-ink); font-variant-numeric: tabular-nums; } /* ---------- 產品畫面 ---------- */ .site-root .ws-tabs { display: flex; justify-content: flex-start; gap: 8px; margin: -8px auto 32px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px; scrollbar-width: none; } .site-root .ws-tabs::-webkit-scrollbar { display: none; } /* 安全置中（同 .ws-filters）：放不下時從第一個分頁開始可捲動，不會被切掉 */ .site-root .ws-tabs > :first-child { margin-left: auto; } .site-root .ws-tabs > :last-child { margin-right: auto; } @media (max-width: 599px) { .site-root .ws-tabs { justify-content: flex-start; margin-left: calc(-1 * var(--ws-gutter)); margin-right: calc(-1 * var(--ws-gutter)); padding: 4px var(--ws-gutter); } } .site-root .ws-tab { flex: none; scroll-snap-align: center; min-height: 46px; padding: 0 22px; border-radius: var(--ws-r-pill); background: var(--ws-surface-3); color: var(--ws-ink-2); font-size: 16px; font-weight: 500; line-height: 1.2; } .site-root .ws-tab:hover { background: #ebebeb; color: var(--ws-ink); } .site-root .ws-tab[aria-selected="true"] { background: var(--ws-dark); color: #ffffff; font-weight: 600; } .site-root .ws-showcase__stage { max-width: calc(1200px + 2 * var(--ws-gutter)); margin: 0 auto; padding: 0 var(--ws-gutter); } .site-root .ws-showcase__panel { border-radius: 28px; } .site-root .ws-showcase__caption { text-align: center; margin: 24px auto 0; max-width: 660px; font-size: 16px; line-height: 1.75; color: var(--ws-ink-2); min-height: 3.5em; } /* 不執行 JavaScript 時（index.html 的