/* ========================================================================== 招牌YA — 主銷售頁樣式 主題：琥珀金。要換色只改下面 :root 的三個變數即可。 注意：index.html 內有一份「關鍵 CSS」，是本檔開頭區塊的副本 （tokens / base / header / hero）。改到那些區塊時記得兩邊一起改。 ========================================================================== */ /* ---------- 0. 字型 ---------- */ /* 自架子集字型：只含本頁用到的字元，全部加起來 232 KiB。 改過頁面文字後請執行：node tools/build-fonts.mjs （詳見 README） 路徑是相對於本檔，所以 @font-face 只能寫在這裡，不要複製到 index.html。 */ @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/noto-sans-tc-400.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/noto-sans-tc-700.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/noto-sans-tc-900.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-grotesk-700.woff2') format('woff2'); } /* ---------- 1. Design tokens ---------- */ :root { --accent: #F0A81E; --on-accent: #17130D; --ink: #17130D; --paper: #F6F5F1; --line: #E5E3DC; --text: #101314; --text-2: #4A504C; --text-3: #5C625F; --text-4: #7A8079; --text-5: #A0A69C; --shell: 1120px; --sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; --display: "Space Grotesk", "Noto Sans TC", system-ui, sans-serif; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } /* ---------- 3. 進場動畫 ---------- */ @keyframes omUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .anim-up { animation: omUp .6s ease both; } .d1 { animation-delay: .06s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .18s; } .d4 { animation-delay: .24s; } /* 捲動進場：預設「看得到」，只有 JS 接手時（）才先藏起來， 所以沒有 JS、或 reveal.js 載入失敗時內容仍然正常顯示。 */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .js-reveal [data-reveal].is-in, .js-reveal.reveal-all [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anim-up { animation: none; } .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- 4. Header ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: color-mix(in oklab, var(--ink) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); } .header-inner { max-width: var(--shell); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; color: #fff; flex-shrink: 0; white-space: nowrap; } .brand-name { font-weight: 900; font-size: 18px; letter-spacing: .01em; } .brand-ya { color: var(--accent); } .nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; } .nav a { color: rgba(255,255,255,.72); transition: color .2s ease; } .nav a:hover { color: #fff; } .header-cta { margin-left: auto; } @media (max-width: 860px) { .nav { display: none; } } /* ---------- 5. 按鈕 ---------- */ .btn { display: inline-block; background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: 999px; white-space: nowrap; transition: filter .2s ease, background-color .2s ease, border-color .2s ease; } .btn:hover { filter: brightness(1.08); } .btn--sm { font-size: 15px; padding: 10px 18px; } .btn--md { font-size: 17px; padding: 16px 30px; } .btn--lg { font-size: 18px; padding: 17px 34px; } .btn--ghost { background: transparent; color: #fff; font-weight: 500; border: 1px solid rgba(255,255,255,.26); } .btn--ghost:hover { background: rgba(255,255,255,.08); filter: none; } .btn--ghost.btn--md { padding: 15px 28px; } .btn--ghost.btn--lg { padding: 16px 30px; } /* ---------- 6. Hero ---------- */ .hero { background: var(--ink); color: #fff; padding: 150px 20px 96px; position: relative; } .hero-glow, .hero-grid { position: absolute; inset: 0; pointer-events: none; } .hero-glow { background: radial-gradient(700px 420px at 78% 8%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%); } .hero-grid { opacity: .35; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(#000, transparent 78%); mask-image: linear-gradient(#000, transparent 78%); } .hero-inner { max-width: var(--shell); margin: 0 auto; position: relative; } .pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; color: rgba(255,255,255,.8); } .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; } .hero h1 { font-size: clamp(38px, 7.4vw, 74px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; margin: 26px 0 0; max-width: 15em; text-wrap: balance; } .accent { color: var(--accent); } .hero-lead { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.75; color: rgba(255,255,255,.74); max-width: 30em; margin: 22px 0 0; } .hero-lead strong { color: #fff; font-weight: 700; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; } .stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 54px; } .stat { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); border-radius: 18px; padding: 22px 26px; min-width: 200px; } .stat-num { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .stat-label { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 8px; } /* ========================================================================== 以下為第一屏之外的樣式（index.html 的關鍵 CSS 不含這段） ========================================================================== */ /* ---------- 7. 區塊骨架 ---------- */ .sec { padding: 100px 20px; } .sec--dark { background: var(--ink); color: #fff; position: relative; } .sec--paper { background: var(--paper); } .sec--white { background: #fff; } .shell { max-width: var(--shell); margin: 0 auto; } .shell--900 { max-width: 900px; } .shell--860 { max-width: 860px; } .shell--rel { position: relative; } /* 深色區塊上方的光暈，位置／大小／濃度由自訂屬性決定 */ .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(var(--glow-size, 620px 380px) at var(--glow-pos, 50% 0%), color-mix(in oklab, var(--accent) var(--glow-mix, 18%), transparent), transparent 70%); } /* ---------- 8. 標題 ---------- */ .eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--text-4); } .eyebrow--accent { color: var(--accent); } .sec-head { max-width: 20em; } .sec-head--wide { max-width: 22em; } .h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -.02em; line-height: 1.24; margin: 14px 0 0; } .h2--xl { font-size: clamp(30px, 5.2vw, 52px); letter-spacing: -.025em; line-height: 1.2; margin: 16px 0 0; text-wrap: balance; } .h2--gap { margin-bottom: 18px; } .h2--cta { font-size: clamp(30px, 5.6vw, 56px); letter-spacing: -.025em; line-height: 1.18; margin: 0; text-wrap: balance; } /* 螢光筆底線 */ .mark { background: linear-gradient(transparent 62%, var(--accent) 62%); } /* ---------- 9. 痛點卡片（為什麼要官網） ---------- */ .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 44px; } .card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; } .card h3 { font-size: 19px; font-weight: 700; margin: 18px 0 10px; } .card p { font-size: 15.5px; line-height: 1.8; color: var(--text-3); margin: 0; } /* ---------- 10. AI 時代 ---------- */ .ai-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; margin-top: 44px; align-items: start; } .prose p { font-size: 17.5px; line-height: 1.95; color: rgba(255,255,255,.78); margin: 0 0 18px; } .prose p:last-of-type { margin-bottom: 0; } .prose strong { color: #fff; } .prose strong.accent { color: var(--accent); } .prose .btn { margin-top: 30px; } .compare { border: 1px solid rgba(255,255,255,.14); border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); } .compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.08); align-items: baseline; } .compare-row:last-child { border-bottom: 0; } .compare-row--head { padding: 18px 22px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.55); border-bottom-color: rgba(255,255,255,.12); align-items: center; } .compare-row--head .mine { color: var(--accent); } .compare-key { font-size: 15px; color: rgba(255,255,255,.6); } .compare-old { font-size: 17px; font-weight: 500; color: rgba(255,255,255,.5); } .compare-old--num { font-family: var(--display); font-size: 20px; font-weight: 700; text-decoration: line-through; } .compare-new { font-size: 20px; font-weight: 700; } .compare-new--num { font-family: var(--display); font-size: 24px; color: var(--accent); } /* ---------- 11. 方案內容 ---------- */ .include-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; margin-top: 44px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; } .include-cell { background: #fff; padding: 32px 28px; } .include-num { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--text-5); } .include-cell h3 { font-size: 19px; font-weight: 700; margin: 12px 0 10px; } .include-cell p { font-size: 15.5px; line-height: 1.8; color: var(--text-3); margin: 0; } /* ---------- 12. 終生免維護 ---------- */ .nomaint-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; align-items: start; } .nomaint-text p { font-size: 17px; line-height: 1.9; color: var(--text-2); margin: 0 0 16px; } .nomaint-text p:last-child { margin-bottom: 0; } .no-list { display: grid; gap: 12px; } .no-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; } .no-x { font-weight: 900; color: var(--text); font-size: 18px; line-height: 1.5; } .no-item strong { font-size: 16.5px; } .no-item p { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--text-3); } .no-note { background: var(--ink); color: #fff; border-radius: 16px; padding: 22px 24px; } .no-note strong { font-size: 17px; color: var(--accent); } .no-note p { margin: 8px 0 0; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.7); } /* ---------- 13. 交付流程 ---------- */ .flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-top: 48px; } .step { border-top: 2px solid var(--text); padding-top: 20px; } .step--final { border-top-color: var(--accent); } .step-meta { display: flex; align-items: center; gap: 10px; } .step-n { font-family: var(--display); font-size: 15px; font-weight: 700; } .step-day { font-size: 12.5px; font-weight: 700; background: var(--accent); color: var(--on-accent); padding: 3px 9px; border-radius: 999px; } .step-day--ink { background: var(--ink); color: #fff; } .step h3 { font-size: 20px; font-weight: 900; margin: 14px 0 10px; } .step p { font-size: 15.5px; line-height: 1.8; color: var(--text-3); margin: 0; } /* ---------- 14. 作品展示 ---------- */ .works-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; } .works-note { font-size: 15px; color: var(--text-4); margin: 0; } .works-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 42px; } .work { display: block; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .2s ease; } .work:hover { border-color: var(--accent); } .work-shot { aspect-ratio: 5 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #F1EFE8; } .work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .work-body { padding: 20px 22px; } .work-body h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 6px; } .work-body p { font-size: 14.5px; line-height: 1.7; color: var(--text-3); margin: 0 0 10px; } .work-more { font-size: 14px; font-weight: 700; color: var(--accent); } /* ---------- 15. 價格方案 ---------- */ .price-card { margin-top: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: rgba(255,255,255,.04); overflow: hidden; } .price-top { padding: 44px 34px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); } .price-kicker, .price-sub { font-size: 16px; color: rgba(255,255,255,.66); } .price-sub { margin-top: 8px; } .price-num { font-family: var(--display); font-size: clamp(56px, 12vw, 104px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--accent); margin-top: 6px; } .price-top .btn { margin-top: 28px; } .price-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .price-col { padding: 32px 34px; } .price-col--in { border-right: 1px solid rgba(255,255,255,.12); } .price-col h3 { font-size: 16px; font-weight: 700; letter-spacing: .08em; margin: 0 0 18px; } .price-col--in h3 { color: var(--accent); } .price-col--out h3 { color: rgba(255,255,255,.5); } .price-list { display: grid; gap: 12px; font-size: 16px; line-height: 1.6; } .price-list > div { display: flex; gap: 10px; } .price-list strong { color: #fff; } .price-col--in .price-list { color: rgba(255,255,255,.86); } .price-col--out .price-list { color: rgba(255,255,255,.66); } .tick { color: var(--accent); font-weight: 700; } .dash { color: rgba(255,255,255,.4); } .price-note { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.5); margin: 20px 0 0; } /* 兩欄擠不下而換行時，右框線改成下框線 */ @media (max-width: 599px) { .price-col--in { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } } /* ---------- 16. 常見問題 ---------- */ .faq { margin-top: 38px; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; gap: 16px; align-items: center; padding: 24px 4px; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq-plus { margin-left: auto; font-size: 22px; font-weight: 400; color: var(--text-4); transition: transform .25s ease; } .faq details[open] .faq-plus { transform: rotate(45deg); } .faq p { margin: 0 0 26px; padding-right: 40px; font-size: 16px; line-height: 1.9; color: var(--text-2); } .code { font-family: var(--display); background: #F2F1EB; padding: 2px 7px; border-radius: 6px; } /* ---------- 17. 結尾 CTA ---------- */ .contact { padding: 110px 20px 90px; } .contact-inner { max-width: 900px; margin: 0 auto; position: relative; text-align: center; } .contact-lead { font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.72); margin: 22px auto 0; max-width: 26em; } .contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; } .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 48px; text-align: left; } .contact-card { display: block; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 20px 22px; transition: border-color .2s ease, background-color .2s ease; } a.contact-card:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); } .contact-card-label { font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.5); font-weight: 700; } .contact-card-value { font-family: var(--display); font-size: 20px; font-weight: 700; margin-top: 8px; } .footnote { font-size: 14px; color: rgba(255,255,255,.4); margin: 54px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .footnote svg { opacity: .55; } /* ---------- 18. 手機固定 CTA ---------- */ .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; } .mobile-cta .btn { flex: 1; text-align: center; font-size: 17px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.28); } @media (min-width: 861px) { .mobile-cta { display: none; } } /* ---------- 19. 各深色區塊的光暈微調 ---------- */ .glow--ai { --glow-pos: 20% 12%; } .glow--price { --glow-size: 600px 380px; } .glow--contact { --glow-size: 700px 420px; --glow-pos: 50% 100%; --glow-mix: 22%; } .price-head { text-align: center; }