:root { --bg: #f6f1e8; --ink: #15191e; --muted: #52606d; --line: #15191e; --card: #fffdf8; --accent: #ed6c5c; --column: #a9c7e8; --signal: #ffdc55; --accent-soft: #a9c7e8; --gold: #ed6c5c; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", sans-serif; -webkit-text-size-adjust: 100%; } a { color: inherit; } header.site, footer.site { display: flex; align-items: center; gap: .75rem; max-width: 48rem; margin: 0 auto; padding: 1.25rem; font-size: .8125rem; } footer.site { color: var(--muted); border-top: 1px solid var(--line); margin-top: 4rem; } .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; } .brand-icon { border-radius: .35rem; flex: none; } .footer-icon { border-radius: .3rem; flex: none; } .account { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: .8125rem; } .account a { text-decoration: underline; color: var(--muted); white-space: nowrap; } .account-email { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; } .login-form { display: flex; gap: .4rem; } .login-form input { width: 10rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--card); color: var(--ink); font: inherit; font-size: .8125rem; } .login-form button { padding: .3rem .6rem; border: 0; border-radius: .3rem; background: var(--accent); color: var(--bg); font: inherit; font-size: .8125rem; cursor: pointer; white-space: nowrap; } .login-form button:disabled { opacity: .6; cursor: default; } @media (max-width: 30rem) { header.site { flex-wrap: wrap; } .account { margin-left: 0; width: 100%; } .login-form input { width: auto; flex: 1; min-width: 0; } } .tag { padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } .header-login { margin-left: auto; font-size: .8125rem; color: var(--muted); text-decoration: underline; white-space: nowrap; } section { max-width: 48rem; margin: 0 auto; padding: 0 1.25rem; } #tool { max-width: 56rem; } /* ── 銷售頁 hero：文案 + 插圖並排，窄螢幕疊成一欄 ─────────────────── */ .hero { max-width: 64rem; padding-top: 2.5rem; padding-bottom: 3rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; } .hero-img { width: 100%; height: auto; border-radius: .75rem; } @media (max-width: 48rem) { .hero { grid-template-columns: 1fr; } .hero-img { order: -1; max-width: 22rem; margin: 0 auto; } } h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1.25rem; } .lede { font-size: 1.0625rem; max-width: 36rem; margin: 0 0 1rem; } .lede.sub { color: var(--muted); font-size: .9375rem; } .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } .cta { display: inline-block; margin-top: 1rem; padding: .9rem 1.5rem; border-radius: .5rem; background: var(--accent); color: var(--bg); font-weight: 700; text-decoration: none; text-align: center; } .cta:hover { opacity: .88; } .cta-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .cta-row .cta { margin-top: 0; } h2 { font-size: 1.25rem; margin: 0 0 .5rem; letter-spacing: -.01em; } .section-title { font-size: 1.5rem; text-align: center; margin: 0 0 2rem; } .hint { font-size: .8125rem; color: var(--muted); margin: .25rem 0 0; } /* ── 銷售頁：真實清單示範（重用工具頁的 .item / .detail-* 樣式）────────── */ .demo { padding: 1rem 1.25rem 3rem; max-width: 40rem; } .demo-lede { text-align: center; color: var(--muted); margin: 0 0 1.5rem; } .demo-list { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 .5rem .5rem .5rem; padding: 0 1rem; } .demo-item { padding: 1rem .25rem; } /* ── 銷售頁：三步驟 ──────────────────────────────────────────────── */ .steps { padding: 3rem 1.25rem; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .step { text-align: center; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: .75rem; } .step h3 { margin: 0 0 .4rem; font-size: 1.0625rem; } .step p { margin: 0; color: var(--muted); font-size: .9375rem; } @media (max-width: 40rem) { .steps-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ── 銷售頁：差異化 ──────────────────────────────────────────────── */ .diff { padding: 1rem 1.25rem 3rem; } .diff-lede { text-align: center; color: var(--muted); max-width: 32rem; margin: 0 auto 2rem; } .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .diff-card { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1.25rem 1rem; text-align: center; } .diff-card strong { display: block; margin-bottom: .4rem; } .diff-card p { margin: 0; font-size: .8125rem; color: var(--muted); } @media (max-width: 40rem) { .diff-grid { grid-template-columns: 1fr 1fr; } } /* ── 銷售頁：價格 ────────────────────────────────────────────────── */ .pricing { padding: 1rem 1.25rem 3rem; max-width: 56rem; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } .price-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: 1.75rem; display: flex; flex-direction: column; } .price-card-featured { border-color: var(--accent); border-width: 2px; } .price-card-icon { border-radius: .5rem; margin-bottom: .75rem; } .price-badge { position: absolute; top: -.75rem; right: 1.25rem; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; } .price-card h3 { margin: 0 0 .25rem; } .price { font-size: 2rem; font-weight: 800; margin: 0; } .price-desc { color: var(--muted); font-size: .875rem; margin: .25rem 0 1.25rem; } .price-card ul { margin: 0 0 1.5rem; padding-left: 1.2rem; flex: 1; } .price-card li { margin-bottom: .5rem; font-size: .9375rem; } .price-card .cta { margin-top: auto; } @media (max-width: 40rem) { .pricing-grid { grid-template-columns: 1fr; } } /* ── 銷售頁：FAQ ─────────────────────────────────────────────────── */ .faq { padding: 1rem 1.25rem 3rem; } .faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; } .faq summary { font-weight: 600; cursor: pointer; } .faq p { margin: .75rem 0 0; color: var(--muted); } /* ── 工具頁：頂部簡短說明，取代銷售頁的 hero ────────────────────────── */ .tool-intro { max-width: 56rem; padding-top: 2rem; } .tool-intro h1 { font-size: 1.5rem; margin-bottom: .5rem; } /* ── 工具頁：建立帳號的隨手提醒（勾了幾項之後才出現，可關掉） ───────────── */ .save-nudge[hidden] { display: none; } .save-nudge { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: .8rem 1rem; margin-bottom: 1.5rem; font-size: .875rem; } .save-nudge span { flex: 1; min-width: 12rem; } .save-nudge button { border: 0; border-radius: .3rem; font: inherit; cursor: pointer; } #save-nudge-btn { background: var(--accent); color: var(--bg); padding: .4rem .8rem; font-size: .8125rem; font-weight: 700; } #save-nudge-dismiss { background: none; color: var(--muted); padding: .2rem .4rem; font-size: 1rem; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: 1.25rem; margin-bottom: 1.5rem; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; } .chip { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer; } .chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); } .progress-wrap { margin-bottom: 2rem; } .progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; font-size: .875rem; } .progress-head strong { font-size: 1.125rem; } .bar { height: .5rem; background: var(--line); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .25s ease; } .reset { margin-top: .75rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8125rem; text-decoration: underline; cursor: pointer; } /* 分類導覽 + 清單的雙欄版面 */ .tool-layout { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: start; } .cat-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .15rem; } .cat-nav-link { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-radius: .4rem 0 0 .4rem; border-left: 3px solid transparent; text-decoration: none; color: var(--muted); font-size: .8125rem; } .cat-nav-link:hover { background: var(--card); } .cat-nav-link.active { color: var(--ink); border-left-color: var(--accent); background: var(--card); font-weight: 700; } .cat-nav-icon { flex: none; } .cat-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-nav-count { flex: none; font-size: .6875rem; color: var(--muted); font-weight: 400; } .tool-main { min-width: 0; } /* 每個分類是一張筆記本內頁：卡片感 + 頂部一條紅色標題線 */ .cat { margin-bottom: 1.5rem; scroll-margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 .5rem .5rem .5rem; padding: 0 1rem; } .cat-head { display: flex; align-items: baseline; gap: .5rem; padding: .9rem 0 .6rem; border-bottom: 1px solid var(--line); } .cat-head h3 { font-size: 1rem; margin: 0; } .cat-count { margin-left: auto; font-size: .8125rem; color: var(--muted); } @media (max-width: 40rem) { .tool-layout { grid-template-columns: 1fr; } .cat-nav { position: sticky; top: 0; z-index: 1; flex-direction: row; overflow-x: auto; background: var(--bg); padding: .5rem 0; margin: 0 -1.25rem; padding-inline: 1.25rem; border-bottom: 1px solid var(--line); scrollbar-width: none; } .cat-nav::-webkit-scrollbar { display: none; } .cat-nav-link { flex: none; border-left: none; border-bottom: 3px solid transparent; border-radius: .4rem .4rem 0 0; white-space: nowrap; } .cat-nav-link.active { border-left-color: transparent; border-bottom-color: var(--accent); } .cat-nav-name { max-width: 6rem; } } .item { display: flex; gap: .75rem; padding: .8rem .25rem; border-bottom: 1px solid var(--line); } .item:last-child { border-bottom: 0; } .item input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--accent); cursor: pointer; } .item-body { min-width: 0; } .item-title { font-weight: 600; } .item.done .item-title { text-decoration: line-through; opacity: .5; } .item-link { display: inline-block; margin-top: .2rem; font-size: .8125rem; color: var(--muted); } .item-audience { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 999px; font-size: .6875rem; color: var(--muted); vertical-align: middle; } .item.locked { opacity: .55; } .item.locked .item-title::after { content: " 🔒"; } .item.locked .item-link { filter: blur(3px); pointer-events: none; user-select: none; } /* 任務卡：先準備好／大概要多久／官方連結／常見地雷 */ .item-detail { margin-top: .35rem; } .detail-toggle { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .8125rem; color: var(--accent); font-weight: 600; } .item-detail.locked .detail-toggle { color: var(--muted); cursor: default; } .detail-panel { margin-top: .6rem; padding: .8rem .9rem; background: var(--bg); border: 1px dashed var(--line); border-radius: .4rem; font-size: .875rem; } .detail-label { font-weight: 700; margin: 0 0 .25rem; } .detail-panel ul { margin: 0 0 .75rem; padding-left: 1.1rem; } .detail-panel ul:last-child { margin-bottom: 0; } .detail-panel li { margin-bottom: .2rem; } .detail-time { margin: 0 0 .75rem; } .detail-official { display: inline-block; color: var(--accent); font-weight: 600; text-decoration: none; margin-bottom: .75rem; } .detail-pitfalls li { color: var(--muted); } .item-detail.locked .detail-official { color: var(--muted); filter: blur(3px); pointer-events: none; user-select: none; } .upsell { margin-top: 3rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--line); } .upsell[hidden] { display: none; } .benefits { margin: 1rem 0; padding-left: 1.2rem; } .benefits li { margin-bottom: .5rem; } /* 痛點提問區：縮排＋左側線，讓一連串問句讀起來是一組，不是散句 */ .questions { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); } @media (max-width: 30rem) { .item-link { display: block; } } /* ── 選填身分：略過 / 重新選擇 ─────────────────────────────────────── */ .optional-tag { font-size: .8125rem; font-weight: 400; color: var(--muted); margin-left: .4rem; } .persona-actions { margin-top: .75rem; display: flex; gap: 1rem; flex-wrap: wrap; } .link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: .8125rem; color: var(--accent); text-decoration: underline; cursor: pointer; } /* ── 錯誤 / 付款確認中 ─────────────────────────────────────────────── */ .load-error, .pending-unlock { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .load-error button { margin-top: .5rem; padding: .5rem 1rem; border: 0; border-radius: .3rem; background: var(--accent); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; } /* ── 骨架載入畫面 ──────────────────────────────────────────────────── */ .skeleton { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 0; } .skeleton-row { height: 2.5rem; border-radius: .4rem; background: linear-gradient(90deg, var(--line) 25%, var(--card) 50%, var(--line) 75%); background-size: 200% 100%; animation: skeleton-shine 1.4s ease-in-out infinite; } @keyframes skeleton-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-row { animation: none; background: var(--line); } } /* ── 工具列：搜尋 + 篩選 chip ──────────────────────────────────────── */ .toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; } .search-input { flex: 1; min-width: 10rem; min-height: 2.75rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); color: var(--ink); font: inherit; font-size: .9375rem; } .toggles { display: flex; gap: .5rem; flex-wrap: wrap; } .toggle-chip { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .8125rem; cursor: pointer; } .toggle-chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); } .progress-sub { margin: .4rem 0 0; font-size: .8125rem; color: var(--muted); } /* ── 打勾微回饋：短暫脈動，尊重減少動態偏好 ──────────────────────────── */ @keyframes item-pulse { 0% { background-color: transparent; } 30% { background-color: rgba(180, 71, 43, .12); } 100% { background-color: transparent; } } .item.pulse { animation: item-pulse .6s ease-out; border-radius: .4rem; } @media (prefers-reduced-motion: reduce) { .item.pulse { animation: none; } } /* ── 外部連結小提示 ────────────────────────────────────────────────── */ .ext-link-cue { font-size: .75rem; color: var(--muted); white-space: nowrap; } /* ── 鎖住項目的細節：只給一行預覽，不把付費內容整段塞進 DOM ───────────── */ .detail-teaser { margin: .4rem 0 0; font-size: .8125rem; color: var(--muted); } /* ── 升級提示（浮動於畫面下方，關閉後同一種 trigger 這次瀏覽不再跳出） ──── */ .upgrade-prompt { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20; max-width: 28rem; margin: 0 auto; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: .5rem; padding: 1rem 1.1rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); } .upgrade-prompt p { margin: 0 0 .5rem; font-size: .875rem; } .upgrade-price { font-weight: 700; } .upgrade-actions { display: flex; align-items: center; gap: .75rem; } .upgrade-actions .cta { margin: 0; padding: .6rem 1rem; font-size: .875rem; } .upgrade-close { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; } /* ── 銷售頁 CTA 旁的信任小字 ───────────────────────────────────────── */ .trust-strip { font-size: .8125rem; color: var(--muted); margin: .5rem 0 0; } /* ── 法務／404 這類純文字頁 ────────────────────────────────────────── */ .legal { max-width: 40rem; padding: 2rem 1.25rem 3rem; } .legal h1 { font-size: 1.5rem; margin-bottom: .25rem; } .legal ul { padding-left: 1.2rem; } .legal li { margin-bottom: .75rem; } .not-found { max-width: 32rem; padding: 4rem 1.25rem; text-align: center; } .not-found h1 { font-size: 2.5rem; margin-bottom: .5rem; } /* 語言切換器。header 由 build 時注入，五種語言各一個連結。 窄螢幕時 header 本來就會換行（見上面的 flex-wrap）， 切換器跟著掉到第二行，不會擠壓標題。 */ .lang-switch { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .75rem; } .lang-switch a, .lang-switch .lang-current { text-decoration: none; padding: .15rem .4rem; border-radius: .3rem; white-space: nowrap; } .lang-switch a { color: var(--muted); } .lang-switch a:hover { color: inherit; background: rgba(0,0,0,.05); } .lang-switch .lang-current { color: inherit; font-weight: 700; background: rgba(0,0,0,.06); } /* 文章頁。內容是從主網域搬過來的，只有語意標籤沒有 class， 所以這裡用後代選擇器直接套版型。 */ .article { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } .article h1 { font-size: 1.6rem; line-height: 1.35; margin: .5rem 0 1.25rem; } .article h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; } .article h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; } .article p { line-height: 1.85; margin: 0 0 1rem; } .article ul, .article ol { line-height: 1.85; margin: 0 0 1rem; padding-left: 1.4rem; } .article li { margin: .3rem 0; } .article img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1rem 0; } .article table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9375rem; } .article th, .article td { border: 1px solid var(--line, #ddd); padding: .5rem .6rem; text-align: left; } .article blockquote { margin: 1rem 0; padding: .5rem 1rem; border-left: 3px solid var(--line, #ddd); color: var(--muted); } .article-back { font-size: .875rem; margin: 0 0 1rem; } /* 麵包屑最後一項是目前這頁、不是連結，壓低一點才不會跟前面的連結搶眼 */ .article-back [aria-current] { color: var(--muted); } .article-note { background: rgba(0,0,0,.04); border-radius: .5rem; padding: .7rem .9rem; font-size: .875rem; color: var(--muted); margin: 0 0 1.5rem; } /* 「去哪辦／費用／期限」三欄事實。用 dl 而不是 ul，因為它們是 標籤對值的關係，螢幕閱讀器唸起來才是「費用：$0」而不是兩則清單項目。 */ .detail-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: .5rem 0 .9rem; } .detail-facts dt { font-size: .8125rem; font-weight: 700; color: var(--accent); white-space: nowrap; } .detail-facts dd { margin: 0; font-size: .875rem; line-height: 1.6; } @media (max-width: 30rem) { .detail-facts { grid-template-columns: 1fr; gap: .1rem; } .detail-facts dd { margin-bottom: .5rem; } } /* ── 全站導覽與 footer CTA ───────────────────────────────────────── 讀者可能從搜尋直接落在任何一頁（尤其文章頁）。每一頁都要能 一眼看到回清單的路，footer 再補一次 CTA，不讓人看完就跳出。 */ .site-nav { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8125rem; } .site-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; } .site-nav a:hover { color: var(--ink); text-decoration: underline; } footer.site { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .footer-cta-lede { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; color: var(--ink); } .footer-sites { display: flex; flex-direction: column; gap: .3rem; } .footer-sites a { color: var(--muted); } .footer-legal { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--line); padding-top: 1rem; width: 100%; } /* ── My Wedding Plan（移植自 steps 2.0）── */ .eyebrow { margin: 0 0 .55rem; color: var(--accent); font-size: .6875rem; font-weight: 800; letter-spacing: .12em; } .plan-onboarding, .plan-dashboard { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: clamp(1.25rem, 4vw, 2rem); margin-bottom: 1.5rem; } .plan-onboarding h1 { max-width: 34rem; } .onboarding-progress { height: .35rem; background: var(--line); border-radius: 999px; overflow: hidden; margin: 1.25rem 0; } .onboarding-progress span { display: block; width: 20%; height: 100%; background: var(--accent); transition: width .2s ease; } .onboarding-options { display: flex; flex-wrap: wrap; gap: .6rem; } .onboarding-option { min-height: 2.75rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .onboarding-option[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .state-input { width: min(100%, 25rem); min-height: 2.75rem; box-sizing: border-box; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); color: var(--ink); font: inherit; } .onboarding-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; margin-top: 1.25rem; } .onboarding-actions .cta { margin: 0; border: 0; cursor: pointer; font: inherit; } .onboarding-actions #onboarding-skip { margin-left: auto; } .plan-dashboard-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .plan-dashboard-head h1 { margin-bottom: .25rem; } .plan-progress { margin: 1.25rem 0 0; } .today-tasks { margin-top: 1.5rem; } .today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .today-head h2 { margin: 0; } .today-head span { font-size: .8125rem; color: var(--muted); } .today-list { display: grid; gap: .65rem; margin-top: .75rem; } .today-task { display: flex; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); } .today-task-num { color: var(--accent); font-weight: 800; } .today-task-copy { min-width: 0; flex: 1; } .today-task-title { font-weight: 700; } .today-task-meta { display: block; margin-top: .12rem; font-size: .75rem; color: var(--muted); } .today-task .cta { flex: none; margin: 0; padding: .55rem .7rem; font-size: .8125rem; } .sponsor-card { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .55rem; background: rgba(237,166,63,.12); } .sponsor-label { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .625rem; letter-spacing: .08em; } .sponsor-card a { color: var(--ink); font-weight: 700; } .explore { margin-top: 1.5rem; } .explore h2 { margin-bottom: .75rem; } .explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .explore-card { display: block; padding: .85rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); color: var(--ink); text-decoration: none; font-size: .8125rem; } .explore-card strong, .explore-card span { display: block; } .explore-card span { margin-top: .25rem; color: var(--muted); font-size: .75rem; } .list-actions { display: flex; justify-content: flex-end; gap: 1.25rem; margin-bottom: .5rem; } @media (max-width: 40rem) { .explore-grid { grid-template-columns: 1fr; } .today-task { align-items: flex-start; } .today-task .cta { padding: .5rem; } } .workflow-steps { counter-reset: workflow; list-style: none; padding-left: 0 !important; } .workflow-steps li { counter-increment: workflow; display: flex; gap: .45rem; } .workflow-steps li::before { content: counter(workflow); flex: none; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--line); color: var(--muted); font-size: .6875rem; font-weight: 700; text-align: center; line-height: 1.15rem; } .detail-cost { margin: 0 0 .75rem; } .detail-complete { margin-top: .25rem; padding: .5rem .7rem; border: 0; border-radius: .35rem; background: var(--ink); color: var(--bg); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; } .detail-next { margin: .65rem 0 0; color: var(--muted); font-size: .8125rem; } .state-guide { margin-top: 1.5rem; padding: 1.2rem; border: 1px solid var(--line); background: var(--column); } .state-guide h2 { margin: 0 0 .45rem; font-size: 1.35rem; } .state-guide p:not(.eyebrow) { max-width: 48rem; margin: 0 0 .75rem; font-size: .875rem; } .plan-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; } .checkin-card, .share-card { padding: 1rem; border: 1px solid var(--line); background: var(--card); } .checkin-card .eyebrow, .share-card .eyebrow { margin-bottom: .35rem; } .text-action { display: inline-block; padding: 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 800; line-height: 1.5; cursor: pointer; text-decoration: none; } .text-action:hover { color: var(--accent); border-color: var(--accent); } .text-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* We Live in USA editorial system — the shared magazine language. */ header.site { max-width: 72rem; min-height: 4.45rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); } footer.site { max-width: 72rem; padding: 2.3rem 1.25rem; color: var(--bg); background: var(--ink); border-color: var(--ink); } footer.site a, footer.site .footer-sites a { color: var(--bg); } .brand { font-family: inherit; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; } .brand-icon { border: 1px solid var(--ink); border-radius: 50%; background: var(--signal); } .site-nav { display: flex; order: 2; gap: 1rem; margin-left: .8rem; } .site-nav a { color: var(--ink); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; } .site-nav a:hover { text-decoration: underline; text-underline-offset: .2rem; } .tag { order: 1; padding: .1rem 0 .1rem .75rem; border: 0; border-left: 1px solid var(--line); border-radius: 0; color: var(--accent); font-size: .625rem; font-weight: 800; letter-spacing: .09em; } .header-login { order: 3; color: var(--ink); font-weight: 700; } h1, h2, h3, .section-title { font-family: inherit; font-weight: 800; } h1 { font-size: clamp(2.6rem, 6vw, 4.7rem); line-height: .98; letter-spacing: -.055em; } h2 { letter-spacing: -.035em; } .hero { max-width: 72rem; gap: 0; padding: 0; border-bottom: 1px solid var(--line); } .hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 4.5rem clamp(1.5rem, 6vw, 5.5rem); } .hero-copy::before { width: 2.2rem; height: 1px; margin-bottom: 1.2rem; background: var(--ink); content: ""; } .hero-img { height: 100%; min-height: 26rem; object-fit: cover; border-left: 1px solid var(--line); border-radius: 0; background: var(--column); } .eyebrow { color: var(--accent); font-family: inherit; font-size: .625rem; font-weight: 800; letter-spacing: .11em; } .cta { border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg); box-shadow: none; transition: transform .18s ease, box-shadow .18s ease; } .cta:hover { opacity: 1; transform: translate(-3px,-3px); box-shadow: 3px 3px 0 var(--signal); } .cta-ghost { background: transparent; color: var(--ink); } .cta:focus-visible, .site-nav a:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .crosslinks { max-width: 72rem; gap: 0; padding: 0; border-bottom: 1px solid var(--line); } .xlink { min-height: 11rem; padding: 1.5rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--bg); box-shadow: none; } .xlink:last-child { border-right: 0; } .xlink:hover { background: var(--signal); transform: none; } .demo-list, .plan-onboarding, .plan-dashboard, .panel, .price-card, .diff-card { border-color: var(--line); border-radius: 0; background: var(--card); box-shadow: none; } .demo-list { border-top-color: var(--accent); } .step-num, .price-badge { border-radius: 0; background: var(--accent); } .price-card-featured { border-width: 1px; background: var(--column); } .onboarding-option, .state-input, .today-task, .explore-card, .toggle-chip, .search-input, .cat-nav, .tool-main { border-color: var(--line); border-radius: 0; background: var(--bg); } .onboarding-option[aria-pressed="true"], .toggle-chip[aria-pressed="true"] { background: var(--signal); border-color: var(--ink); color: var(--ink); } .today-task-num { color: var(--accent); } @media (max-width: 48rem) { header.site { min-height: 0; flex-wrap: wrap; } .site-nav { order: 3; width: 100%; margin: .2rem 0 0; padding-top: .65rem; border-top: 1px solid var(--line); overflow-x: auto; } .tag { margin-left: auto; } .header-login { margin-left: 0; } .hero { grid-template-columns: 1fr; } .hero-copy { min-height: 31rem; padding: 3.7rem 1.5rem; } .hero-img { order: 0; min-height: 18rem; max-width: none; border-top: 1px solid var(--line); border-left: 0; } .crosslinks { grid-template-columns: 1fr; } .xlink { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); } .xlink:last-child { border-bottom: 0; } .plan-tools { grid-template-columns: 1fr; } } /* 文章內的商品區塊。刻意用 aside 而不是混進內文——付費連結要看得出來 是另一個區塊，不是文章的一部分。揭露排在清單之前，不是之後。 */ .article-shop { margin: 2.5rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--card); } .article-shop h2 { margin: 0 0 .5rem; font-size: 1rem; } .article-shop-disclosure { margin: 0 0 .9rem; font-size: .6875rem; line-height: 1.5; color: var(--muted); } .article-shop ul { margin: 0; padding-left: 1.1rem; } .article-shop li { margin: .3rem 0; font-size: .9375rem; } .article-shop-more { margin: .9rem 0 0; font-size: .8125rem; } /* 文章末尾的範圍說明。用 aside 而不是混進內文——它是關於這篇文章的說明， 不是文章的一部分。字級比內文小一階，但不要小到像法律小字。 */ .article-scope { margin: 2.5rem 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); } .article-scope h2 { margin: 0 0 .5rem; font-size: .9375rem; } .article-scope p { margin: 0; font-size: .8125rem; line-height: 1.7; color: var(--muted); } /* 帳號表單：密碼登入／免費註冊（直式排版，手機也放得下） */ .login-form-stack { flex-direction: column; align-items: stretch; max-width: 18rem; } .newsletter-opt { display: flex; gap: .45rem; align-items: flex-start; font-size: .8125rem; color: var(--muted); } .newsletter-opt input { margin-top: .2rem; } .login-links { margin: .4rem 0 0; font-size: .8125rem; } .login-links a { color: var(--muted); } /* ── 跟主首頁一致的品牌列（2026-08-31 對齊，樣式取自 home 站） ───────── */ .brand-badge { display: inline-block; color: var(--bg); background: var(--ink); padding: 1px 4px; margin-right: 2px; } .guide-menu { position: relative; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; } .guide-menu summary { list-style: none; cursor: pointer; border: 1px solid var(--ink); padding: 10px 12px; background: var(--bg); } .guide-menu summary::-webkit-details-marker { display: none; } .guide-menu nav { position: absolute; right: 0; top: 43px; width: 285px; z-index: 30; border: 1px solid var(--ink); background: var(--bg); padding: 8px; box-shadow: 5px 5px 0 var(--ink); } .guide-menu nav a { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #d5d0c4; color: var(--ink); text-decoration: none; } .guide-menu nav a:hover { background: var(--column); } .guide-menu nav a b { font-weight: 600; } .guide-menu nav i { font-style: normal; font-family: "DM Mono", ui-monospace, monospace; } @media (max-width: 640px) { .guide-menu nav { position: fixed; left: 8px; right: 8px; width: auto; top: 64px; } } /* header 東西太多會擠爆：固定排序、brand 不換行、裝飾用的 tag 讓位給全部指南 */ header.site { flex-wrap: nowrap; gap: 14px; } header.site .brand { white-space: nowrap; flex-shrink: 0; } header.site .brand { order: 0; } header.site .site-nav { order: 1; } header.site .guide-menu { order: 2; margin-left: auto; flex-shrink: 0; } header.site .lang-switch { order: 3; } header.site .header-login { order: 4; white-space: nowrap; } header.site .tag { display: none; } @media (max-width: 900px) { header.site .site-nav { display: none; } } .google-login-btn { display: block; width: 100%; max-width: 18rem; margin: 0 0 .5rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); color: var(--ink); font: 600 .8125rem/1.4 inherit; cursor: pointer; } .google-login-btn:hover { border-color: var(--ink); } /* ── 主站同調性 header（2026-09-01 統一版，與 steps 同款）──────────────── */ header.site { min-height: 64px; padding: 0 4vw; max-width: none; justify-content: space-between; gap: 24px; border-bottom: 1px solid #15191e; background: #f6f1e8; color: #15191e; } .site-right { display: flex; align-items: center; gap: 18px; } header.site .brand { font: 500 11px "DM Mono", ui-monospace, monospace; letter-spacing: .06em; } .nav-mine { color: inherit; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; } .nav-mine:hover { text-decoration: underline; } header.site .header-login { margin-left: 0; color: inherit; font: 700 12px "Noto Sans TC", sans-serif; text-decoration: none; border-bottom: 1px solid #15191e; padding: 6px 2px; white-space: nowrap; } .lang-select { padding: 6px 22px 6px 8px; border: 0; border-bottom: 1px solid #15191e; border-radius: 0; background: transparent; color: #15191e; font: 700 11px "Noto Sans TC", sans-serif; cursor: pointer; max-width: 7.5rem; } header.site .account { font-size: .8125rem; } .promo-bar { display: flex; align-items: center; gap: 14px; padding: 10px 4vw; background: #ffdc55; color: #15191e; border-bottom: 1px solid #15191e; text-decoration: none; font-size: 13px; } .promo-bar.promo-wedding { background: #ffdc55; } /* 之二百二十五：原本是粉紅，跟其他站對不上 */ .promo-bar b { font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; white-space: nowrap; font-weight: 500; } .promo-bar em { font-style: normal; font-weight: 800; margin-left: auto; white-space: nowrap; } .promo-bar:hover em { text-decoration: underline; } @media (max-width: 720px) { .promo-bar span { display: none; } .nav-mine { display: none; } .site-right { gap: 10px; } } /* ── 列印：只印勾選清單 ───────────────────────────────────────────── 去 county clerk、SSA 排隊時要的是一張能勾的紙，不是整頁網站。 細節、導覽、升級區塊都不印；頁尾提醒完整說明在網站上，並印上帳號與日期 （app.js 在 beforeprint 填入）。 */ .print-only { display: none; } @media print { @page { margin: 1.6cm; } body { background: #fff; color: #000; font-size: 11pt; } header.site, .promo-bar, #plan-intro, .list-actions, .save-nudge, .toolbar, .cat-nav, .item-detail, .item-link, .upsell, .pending-unlock, .load-error, .sponsor-card, footer.site, .skeleton { display: none !important; } .print-only { display: block; } .print-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 2px solid #000; } .print-head b { font-size: 10pt; letter-spacing: .06em; } .print-head span { font-size: 14pt; font-weight: 800; } .tool { max-width: none; padding: 0; } .tool-layout { display: block; } /* 清單區塊在螢幕上有米色底，印出來整頁灰底很浪費墨水 */ .tool, #tool-body, .tool-main, #list { background: none !important; } .cat, .cat-head { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; } .cat { margin: 0 0 .9rem; } .cat-head { margin-bottom: .2rem; padding-bottom: .15rem; border-bottom: 1.5px solid #000 !important; break-after: avoid; } .cat-head h3 { margin: 0; font-size: 12pt; } .cat-count { color: #333; } .item { padding: .3rem 0; border-bottom: 1px solid #bbb; break-inside: avoid; } .item input[type="checkbox"] { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .item.locked { opacity: .6; } .item-audience { border-color: #000; color: #000; } .print-foot { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid #000; font-size: 9pt; color: #333; } .print-foot p { margin: 0 0 .15rem; } .print-url { font-weight: 700; } a { text-decoration: none; } } /* ═══ We Live in USA 共通視覺（之二百二十四）════════════════════════════ wedding 與 steps 是最早做的兩站，排版跟後來的 edu／主站對不起來： 標題是粗體無襯線、eyebrow 是 sans，而且 DM Mono 寫了卻從來沒載入過。 這一段把排版對齊 edu（edu-production/style.css 第 116–258 行）。 色票本來就一樣，不用動。 */ body { font-family: "Huninn", "Noto Sans TC", system-ui, sans-serif; } html[lang="ko"] body, html[lang="ko"] .cover, html[lang="ko"] .section-title { font-family: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif; } /* 展示級標題：Bodoni Moda，緊字距，中文用 Noto Sans TC 接住 */ h1, h2, .section-title, .pricing h2, .faq h2 { /* 跟 edu 同一組堆疊：Bodoni 沒有中文字，於是中文掉到系統 serif（明體）。 內文仍是 Huninn 圓體，只有展示標題是明體。 */ font: 600 clamp(34px, 4.6vw, 68px) / 1.06 "Bodoni Moda", "Noto Sans TC", serif; letter-spacing: -0.045em; font-weight: 600; } h1 em, .section-title em { font-style: italic; } h3 { font-family: "Huninn", "Noto Sans TC", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; } /* 小標一律 DM Mono——這是 edu 與主站最一眼認得出來的記號 */ .eyebrow, .deal-kicker, .xlink-kicker { font: 700 10px "DM Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; } /* hero 版面對齊 edu：滿版貼邊、兩欄無間距、右半黃底到底 */ .hero { max-width: none; padding: 0; gap: 0; align-items: stretch; grid-template-columns: 1.05fr 0.95fr; border-bottom: 1px solid var(--line); } .hero-copy { padding: 6vw 5vw 5vw 6vw; align-self: center; } /* hero 右半：黃底 + 襯線字標 + 藍色描邊卡（edu 的 .hero-art / .cover） */ .hero-art { position: relative; overflow: hidden; min-height: 440px; padding: 6vw; background: var(--signal); border-left: 1px solid var(--line); } .hero-art > p { margin: 0; /* 字標比 edu 略小：MY USA PLAN 比 EDU IN USA 長，同樣尺寸會被卡片蓋住 */ font: 600 clamp(44px, 6.4vw, 92px) / 0.8 "Bodoni Moda", serif; letter-spacing: -0.08em; max-width: 58%; /* 讓字標避開右下角那張卡，不要被蓋住 */ } .hero-art .cover { position: absolute; right: 12%; bottom: 11%; display: flex; flex-direction: column; justify-content: space-between; width: min(290px, 58%); aspect-ratio: 3 / 4; padding: 18px; border: 1px solid var(--line); background: var(--column); box-shadow: 10px 10px 0 var(--ink); } .hero-art .cover small { font: 10px "DM Mono", ui-monospace, monospace; letter-spacing: 0.08em; } .hero-art .cover strong { font: 76px "Bodoni Moda", serif; line-height: 1; } .hero-art .cover em { font: 600 17px / 1.1 "Bodoni Moda", serif; font-style: normal; } @media (max-width: 48rem) { .hero-art { min-height: 300px; padding: 12vw 8vw; border-left: 0; border-top: 1px solid var(--line); } .hero-art .cover { width: min(220px, 62%); } } /* 版塊標題靠左，跟 edu 的 .section-heading 一致—— 置中的大標是 steps 原本的樣子，跟主站／edu 的 editorial 排版對不上。 */ .section-title, .demo-lede, .diff-lede, .diff-card, .step { text-align: left; } .diff-lede { margin-left: 0; margin-right: 0; } .section-title { margin-bottom: 0.6rem; } .demo-lede, .diff-lede { max-width: 34rem; } /* 卡片：細描邊 + 位移陰影，跟 edu 的 .cover 同一個手法 */ .diff-card { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 0; background: var(--card); box-shadow: 5px 5px 0 rgba(21, 25, 30, 0.09); } .diff-card strong { display: block; margin-bottom: 0.35rem; } /* 三步：編號用 DM Mono，靠左 */ .step b, .step .num { font-family: "DM Mono", ui-monospace, monospace; } /* 區塊之間留白拉開，讓每一段自己成立（edu 用 9vw） */ .demo, .steps, .diff, .pricing, .faq { padding-top: 5.5rem; padding-bottom: 5.5rem; } /* 版塊節奏對齊 edu：section 本身滿寬、左邊 9vw 起， 只有文字段落限寬（edu 的 .section-heading 是 max-width:690px）。 原本是 max-width:48rem 置中，讀起來像部落格不像產品站。 */ .demo, .steps, .diff, .pricing, .faq { max-width: none; margin: 0; padding-left: 9vw; padding-right: 6vw; } .section-title { max-width: 43rem; } .demo-list, .steps-grid, .diff-grid, .pricing-grid, .faq-list { max-width: 68rem; } @media (max-width: 48rem) { .demo, .steps, .diff, .pricing, .faq { padding-left: 7vw; padding-right: 7vw; } } /* 手機上 header 右側會擠出視窗（375px 時捲動寬度 389）。 之二百二十四量到，五個語言都有，英文最嚴重（426）——不是我改出來的， 但既然在做這份樣式就一起修掉：允許縮排、縮小間距、必要時換行。 */ @media (max-width: 30rem) { .site-right { min-width: 0; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .header-login { padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; } .nav-mine { display: none; /* 「我的清單」在登入按鈕旁邊重複了，手機上先讓位 */ } } /* 之二百二十：AdSense 手動版位（首頁、免費清單、/a/ 文章）。付費解鎖後清單頁的版位會 hidden。 */ .ad-slot { display: block; margin: 1.25rem 0; padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: .55rem; background: var(--bg); overflow-x: hidden; overflow-x: clip; } .ad-label { display: block; margin: 0 0 .5rem; color: var(--muted); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; } .ad-box { width: 100%; box-sizing: border-box; display: grid; place-items: center; min-height: 100px; } .ad-box > ins.adsbygoogle { width: 100%; justify-self: stretch; } .ad-slot iframe { max-width: 100%; } .ad-slot.home-ad { margin: 0 auto 2rem; max-width: 60rem; padding-left: 1rem; padding-right: 1rem; } @media print { .ad-slot { display: none !important; } } /* hero 裡的選物入口。刻意**不做成第三顆 CTA**——上面那兩顆是免費清單與 付費方案，聯盟連結做成同樣份量會跟真正賺錢的那顆搶點擊。 份量壓在 .lede.sub 那一級，位置高但不搶眼。 */ .shop-hero { font-size: .9375rem; color: var(--muted); margin-top: .35rem; } .shop-hero a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; } /* ── 站長列（Racco）與「關於我們」入口 ────────────────────────────── 正本：main-site/portal-manual/kit/racco-strip.css。十一個副網域各貼一份，改的時候要一起改。 放在每一頁