/* ── 暖陽編輯風設計 tokens（build/style-sunrise，2026-07-12）────────────── 變數「名稱」沿用段 1-5 舊版（--green/--seal/--amber/--sky…），但「色值」已全部換成 暖陽編輯風（設計正典：option-a.html）。沒有整批改名，理由：這些變數名在 21 個頁面／ 20+ 條 CSS 規則裡被大量引用，逐一改名風險遠大於收益；只換色值即可讓全站自動套用新視覺， 且完全不需要動任何 .njk 模板（模板一律用 var(--x)，零寫死色碼）。 對照表（給未來 session 看）： --green 舊「綠」→ 現為 cobalt 鈷藍（主 CTA／連結／強調色） --seal 舊「硃砂紅」→ 現為 coral 珊瑚（眉標／編號／emphasis） --amber 維持暖金色（Word Pet／完成標記等既有文字色，刻意不換太亮怕對比不足） --yellow 新增——專供「螢光黃色帶／CTA 錯位陰影／裝飾圓點」等純裝飾用途 --sky 維持一支獨立藍（跟 cobalt 區隔的次要提示色） 字體對照：serif 堆疊改為 "Iowan Old Style","Noto Serif TC","Songti TC",serif （option-a.html 指定字族，原樣照抄）；正文字族最前面加 "Avenir Next"（純西文字型， 中文字一樣落到 Noto Sans TC／PingFang TC／Microsoft JhengHei，不影響中文顯示）。 深色模式（OS 偏好／data-theme 手動切換）維持既有能力、只重新配色成暖陽風的深色版—— 這是既有站內功能（尊重使用者系統設定），不是 GPT 參考裡「整組黑底」的首頁設計選擇， 兩者是不同層次的決定，深色模式不因為「不採用 GPT 黑底首頁」而被移除。 ── */ :root { --paper: #FFFAF0; --grid: rgba(36, 87, 214, 0.05); --card: #FFFEF9; --ink: #17315F; --muted: #5D6D89; --line: rgba(36, 87, 214, 0.16); --seal: #F45B50; --seal-bg: rgba(244, 91, 80, 0.10); --green: #2457D6; --green-ink: #163B78; --green-bg: #E8EFFC; --amber: #B9860F; --amber-bg: #FBF3E0; --yellow: #FFD83D; --yellow-strong: #F6C400; --sky: #2E86C1; --sky-bg: #E8F1FA; --shadow: 0 1px 2px rgba(23, 49, 95, 0.05), 0 16px 40px rgba(23, 49, 95, 0.10); --shadow-lg: 0 28px 70px rgba(42, 73, 132, 0.16); } @media (prefers-color-scheme: dark) { :root { --paper: #151223; --grid: rgba(255, 216, 61, 0.05); --card: #1E1B30; --ink: #F2EFE8; --muted: #B3AFC9; --line: #34304A; --seal: #FF8A75; --seal-bg: rgba(255, 138, 117, 0.14); --green: #6C9BF2; --green-ink: #D6E4FF; --green-bg: #202A44; --amber: #F0C64B; --amber-bg: #2E2712; --yellow: #FFD83D; --yellow-strong: #FFE066; --sky: #6FB3E0; --sky-bg: #16273A; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.4); } } :root[data-theme="light"] { --paper: #FFFAF0; --grid: rgba(36, 87, 214, 0.05); --card: #FFFEF9; --ink: #17315F; --muted: #5D6D89; --line: rgba(36, 87, 214, 0.16); --seal: #F45B50; --seal-bg: rgba(244, 91, 80, 0.10); --green: #2457D6; --green-ink: #163B78; --green-bg: #E8EFFC; --amber: #B9860F; --amber-bg: #FBF3E0; --yellow: #FFD83D; --yellow-strong: #F6C400; --sky: #2E86C1; --sky-bg: #E8F1FA; --shadow: 0 1px 2px rgba(23, 49, 95, 0.05), 0 16px 40px rgba(23, 49, 95, 0.10); --shadow-lg: 0 28px 70px rgba(42, 73, 132, 0.16); } :root[data-theme="dark"] { --paper: #151223; --grid: rgba(255, 216, 61, 0.05); --card: #1E1B30; --ink: #F2EFE8; --muted: #B3AFC9; --line: #34304A; --seal: #FF8A75; --seal-bg: rgba(255, 138, 117, 0.14); --green: #6C9BF2; --green-ink: #D6E4FF; --green-bg: #202A44; --amber: #F0C64B; --amber-bg: #2E2712; --yellow: #FFD83D; --yellow-strong: #FFE066; --sky: #6FB3E0; --sky-bg: #16273A; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; background-color: var(--paper); background-image: radial-gradient(circle at 6% 92%, rgba(255, 216, 61, 0.20), transparent 26rem), radial-gradient(circle at 96% 4%, rgba(46, 134, 193, 0.14), transparent 30rem); /* 不用 background-attachment:fixed——fixed 背景＋sticky 頂列的 backdrop-filter:blur 疊加，在長頁面（首頁六段＋多張卡片陰影）容易造成捲動時明顯掉幀／卡頓（已知的 CSS 效能地雷：fixed 背景常迫使瀏覽器整頁走非合成的重繪路徑）。改讓漸層跟內容 一起捲動，視覺上兩個漸層色塊只在頁面最頂部作為 hero 氛圍即可，捲下去之後 看不到本來就符合預期（不是「陽光永遠釘在角落」的設計意圖）。 */ color: var(--ink); font-family: "Avenir Next", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; line-height: 1.75; font-size: 16px; } .serif { font-family: "Iowan Old Style", "Noto Serif TC", "Songti TC", serif; } .page { max-width: 860px; margin: 0 auto; padding: 0 20px 120px; position: relative; } @media (min-width: 880px) { .page { padding-left: 84px; } .page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 48px; border-left: 2px solid var(--seal-bg); } } /* 首頁（home.njk）改用寬版敘事版位（六段＋FAQ 保留段，見下方版位總註），不套用內頁的 「筆記本留白邊」隱喻（紅色直線＋窄寬度），那條隱喻線在段 1-5 是「聯絡簿」視覺概念的延伸； 內頁（課程／QA／about 等）維持原本 40em 閱讀寬度＋左側留白線，兩者刻意不同、互不影響。 */ .page.wide-home { max-width: 1180px; padding-left: 20px; } @media (min-width: 880px) { .page.wide-home { padding-left: 20px; } .page.wide-home::before { display: none; } } a { color: var(--green); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } .top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .top-in { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; } .brand { font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; } .brand-badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50% 50% 44% 56%; background: var(--seal); color: #fff; box-shadow: 3px 3px 0 var(--yellow); font-family: "Iowan Old Style", "Noto Serif TC", "Songti TC", serif; font-size: 15px; font-style: italic; font-weight: 700; transform: rotate(-6deg); flex-shrink: 0; } /* 首頁頁首官方 logo（build/homepage-copy-tweaks；只用於 brand-home.njk 的 .brand）——放大版＋分校名 */ .brand-logo-img { height: 48px; width: auto; display: block; } .brand-campus { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: 0.01em; white-space: nowrap; } /* 放大 logo 後，手機上頁首放不下——只在窄螢幕允許頁首換行（塞得下就不換），避免橫向溢出 */ @media (max-width: 719px) { .top-in { flex-wrap: wrap; row-gap: 8px; } } @media (max-width: 480px) { .brand-logo-img { height: 40px; } .brand-campus { font-size: 13px; } } .top nav { margin-left: auto; display: none; gap: 18px; font-size: 13px; } .top nav a { color: var(--muted); text-decoration: none; font-weight: 600; } .top nav a:hover { color: var(--ink); } @media (min-width: 720px) { .top nav { display: flex; } } /* 段 6：品牌層共用頁的 .top-actions 比校區頁多塞了 campus-switch（2 個連結）＋ line-mini-group（2 顆 LINE 按鈕，而非校區頁的 1 顆）——375px 寬窄螢幕實測 溢出（scrollWidth 403 > innerWidth 375，多出的正是第二顆 .line-mini）。 加 flex-wrap 讓塞不下時自動換行（維持 sticky header 內、不溢出視窗）， 而不是勉強縮小字級硬塞成一行犧牲可讀性／可點擊面積。 */ .top-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 8px; max-width: 68vw; } @media (min-width: 720px) { .top-actions { margin-left: 0; max-width: none; } } .tel-mini { display: none; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); white-space: nowrap; } .tel-mini:hover { border-color: var(--green); color: var(--green); } @media (min-width: 560px) { .tel-mini { display: inline-flex; } } .line-mini { background: #06C755; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 3px 3px 0 var(--yellow); transition: transform 0.15s ease, box-shadow 0.15s ease; } .line-mini:hover { transform: translate(1.5px, 1.5px); box-shadow: 1.5px 1.5px 0 var(--yellow); } /* ── 暖陽編輯風共用元件：眉標／按鈕／貼章 ── .tab-label（段 1-5 舊版分節小標）已隨首頁六段重建改用 .section-heading/.eyebrow， 全站零處引用、確認為孤兒後移除（build/style-sunrise 自審五步⑤孤兒檔掃描）。 */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; color: var(--seal); font-size: 12.5px; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 216, 61, 0.28); flex-shrink: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn-line { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 6px 6px 0 var(--yellow); } .btn-line:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--yellow); background: #1747be; } /* 真 LINE 鈕（連 lin.ee 短連結；舊 line.me 也涵蓋）才染 LINE 綠；非 LINE 主 CTA（#journey/#plan/選校）維持藍主色 */ .btn-line[href^="https://lin.ee/"], .btn-line[href*="line.me"] { background: #06C755; border-color: #06C755; } .btn-line[href^="https://lin.ee/"]:hover, .btn-line[href*="line.me"]:hover { background: #05a94b; } .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); } .btn-ghost:hover { border-color: var(--green); color: var(--green); } .stamp { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--card); color: #fff; background: var(--seal); box-shadow: var(--shadow); font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; transform: rotate(-8deg); flex-shrink: 0; } .stamp.in { animation: press 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; } @keyframes press { 0% { transform: rotate(-8deg) scale(1.7); opacity: 0; } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .stamp.in { animation: none; } .shake { animation: none !important; } .sun-deco { animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════ 首頁版位（build/style-sunrise）＝六段敘事＋一段保留：#top／#journey／ #system／#videos／#stories／#contact 六段照 GPT 正典（結構＝gpt-dark LandingPage.tsx＋globals.css；配色字體＝gpt-light option-a.html 暖陽編輯風； 不採用 GPT 參考的黑底深色首頁——Canny 明確不要）；另保留既有 FAQ 手風琴段 （#qa、9 題）＝Codex 終審首席裁決刻意保留（faqSchema.js 的 FAQPage JSON-LD 是這 9 題的轉錄、拿掉可見手風琴會讓 schema 描述頁上不存在的內容；未來精簡 走 docs/SPEC.md 5b 既有規劃、非本輪範圍）。 ══════════════════════════════════════════════════════════════════════ */ .home-section { padding: 88px 0; } .home-section:first-of-type { padding-top: 8px; } @media (max-width: 720px) { .home-section { padding: 56px 0; } } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; } .section-heading h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; } .section-heading > p { max-width: 460px; margin: 0; color: var(--muted); line-height: 1.85; } .section-heading .eyebrow { margin-bottom: 10px; } /* ── #top：hero ── */ .hero-new { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px); align-items: center; padding: 40px 0 24px; min-height: 520px; } @media (max-width: 980px) { .hero-new { grid-template-columns: 1fr; padding-top: 24px; } } .hero-copy { position: relative; z-index: 2; } .hero-copy h1 { margin: 0; max-width: 640px; font-family: "Iowan Old Style", "Noto Serif TC", "Songti TC", serif; font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; } .hero-copy h1 em { position: relative; color: var(--green); font-style: normal; } .hero-copy h1 em::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -4%; bottom: 3px; height: 15px; border-radius: 999px 22px 999px 24px; background: var(--yellow); transform: rotate(-1.2deg); } .hero-lede { max-width: 480px; margin: 24px 0 30px; color: var(--muted); font-size: 18px; font-weight: 500; line-height: 1.85; } .hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .hero-micro { color: var(--seal); font-family: "Iowan Old Style", "Noto Serif TC", "Songti TC", serif; font-size: 13.5px; font-style: italic; font-weight: 700; transform: rotate(-2deg); } .quickjump { font-size: 12.5px; color: var(--muted); margin: 18px 0 0; } .quickjump a { color: var(--muted); text-decoration: none; } .quickjump a:hover { color: var(--green); } .hero-visual { position: relative; min-height: 420px; } .photo-card { position: absolute; inset: 12px 20px 26px 6px; overflow: hidden; border: 9px solid var(--card); border-radius: 46% 54% 43% 57% / 37% 42% 58% 63%; box-shadow: var(--shadow-lg); transform: rotate(1.6deg); background: radial-gradient(circle at 66% 37%, rgba(255,255,255,.6) 0 6%, transparent 6.4%), radial-gradient(circle at 44% 62%, rgba(255,216,61,.9) 0 15%, transparent 15.4%), linear-gradient(135deg, #8dbdf8 0 44%, #cde0ff 44% 60%, #f6a99e 60% 100%); } .photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-label { position: absolute; z-index: 3; left: 50%; top: 50%; min-width: 168px; padding: 14px 18px; border: 2px solid #fff; border-radius: 8px; color: var(--ink); background: rgba(255,254,249,.92); box-shadow: 0 14px 35px rgba(23,49,95,.16); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-align: center; transform: translate(-50%, -50%) rotate(-3deg); } .photo-label small { display: block; margin-top: 3px; font-weight: 500; font-size: 11px; color: var(--muted); } .sun-deco { position: absolute; z-index: -1; width: 150px; height: 150px; top: -14px; right: -10px; border-radius: 50%; background: var(--yellow); opacity: .9; animation: breathe 5s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .hero-sticker { position: absolute; z-index: 4; display: grid; place-items: center; width: 108px; height: 108px; right: 4px; bottom: 46px; padding: 14px; border: 4px solid var(--card); border-radius: 50%; color: #fff; background: var(--seal); box-shadow: 0 16px 36px rgba(244,91,80,.28); font-family: "Iowan Old Style", "Noto Serif TC", "Songti TC", serif; font-size: 15px; font-style: italic; font-weight: 700; line-height: 1.25; text-align: center; transform: rotate(8deg); } .hero-badge { position: absolute; color: var(--ink); box-shadow: var(--shadow); background: var(--card); border-radius: 12px; padding: 12px 15px; } .hero-badge.b-left { left: -4px; bottom: 4px; transform: rotate(-5deg); } .hero-badge.b-left strong { display: block; font-size: 16px; } .hero-badge.b-left span { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; } /* ── proof-strip ── */ .proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 8px 0 0; padding: 20px 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); } .proof-item { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; padding: 0 14px; border-right: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 750; text-align: center; } .proof-item:last-child { border-right: 0; } .proof-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); } .proof-item:nth-child(2) .proof-dot { background: var(--seal); } .proof-item:nth-child(3) .proof-dot { background: var(--green); } @media (max-width: 760px) { .proof-strip { grid-template-columns: repeat(2, 1fr); } .proof-item { padding: 10px; border-bottom: 1px solid var(--line); border-right: 0; } .proof-item:nth-child(odd) { border-right: 1px solid var(--line); } .proof-item:nth-last-child(-n+2) { border-bottom: 0; } } /* ── #journey：孩子現在在哪一站？ ── */ /* 段 6 Codex round 2 #9：成長路徑補第五站（高中英文）——4 欄改 5 欄；900px 以下 維持既有 2 欄斷點（5 張卡排 2+2+1，最後一張置左、與內容流一致），560px 以下單欄。 */ .stage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 44px; } @media (max-width: 900px) { .stage-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .stage-grid { grid-template-columns: 1fr; } } .stage-card { display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 16px; min-height: 250px; box-shadow: var(--shadow); transition: transform 0.2s ease; } .stage-card:hover { transform: translateY(-6px); } .stage-top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; } .stage-top em { font-style: normal; border: 1px solid currentColor; border-radius: 999px; padding: 4px 9px; } .stage-card h3 { margin: 14px 0 4px; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; } .stage-card .stage-meta { flex: 0 0 auto; margin: 0 0 12px; font-size: 11.5px; line-height: 1.3; font-weight: 700; opacity: .72; white-space: nowrap; } @media (max-width: 900px) { .stage-card h3 { font-size: 21px; } .stage-card .stage-meta { font-size: 12.5px; } } .stage-card p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; flex: 1; } .stage-card a { border-top: 1px solid rgba(23,49,95,.16); padding-top: 13px; font-size: 12.5px; font-weight: 800; display: flex; justify-content: space-between; color: inherit; text-decoration: none; } /* 卡片底色寫死粉彩（不隨主題翻色）→ 文字固定深色，避免暗色模式淺字疊淺底看不見 */ .stage-sun { background: #FFEFB0; color: #17315F; } .stage-coral { background: #FBD9D3; color: #17315F; } .stage-sky { background: #D8E9FB; color: #17315F; } .stage-cobalt { background: #DDE6FA; color: #17315F; } /* 段 6 #9 第五站（高中）——沿用本組「柔和色票＋var(--ink) 文字」慣例新增一支 淡綠（前四張為黃/珊瑚/天藍/鈷藍字面色票，同樣是字面值、非 token；綠=路徑終點的 生長意象，與相鄰兩支藍明確區隔）。 */ .stage-mint { background: #DCEFDD; color: #17315F; } .journey-tool-head { text-align: center; max-width: 620px; margin: 0 auto 28px; } .journey-tool-head h3 { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 27px); } .journey-tool-head p { margin: 0; color: var(--muted); } .tool { background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 26px 28px; box-shadow: var(--shadow); max-width: 720px; margin: 0 auto; } .tool-q { font-size: 13.5px; font-weight: 700; color: var(--muted); margin: 4px 0 8px; } .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .opts button { border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-size: 14.5px; font-family: inherit; padding: 8px 16px; border-radius: 999px; cursor: pointer; } .opts button[aria-pressed="true"] { border-color: var(--green); background: var(--green-bg); color: var(--green-ink); font-weight: 700; } .result { border-top: 1.5px dashed var(--line); margin-top: 6px; padding-top: 16px; } .result-empty { color: var(--muted); font-size: 14px; } .result-card { display: none; } .result-card.show { display: block; } .result-head { display: flex; align-items: center; gap: 14px; } .result-head .stamp { width: 52px; height: 52px; font-size: 12px; } .result-course { font-size: 21px; font-weight: 700; } .result-why { margin: 10px 0 6px; font-size: 15px; } .result-kid { font-size: 14px; color: var(--muted); background: var(--amber-bg); border-radius: 10px; padding: 10px 14px; margin: 10px 0 14px; } .result-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .copyline { font-size: 12.5px; color: var(--muted); } .plan-sec { border: 1.5px solid var(--seal); max-width: 720px; margin: 16px auto 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 22px 24px; } .plan-card { position: relative; background: var(--paper); border-radius: 12px; padding: 18px 20px; padding-right: 96px; } .plan-stamp { position: absolute; top: 16px; right: 16px; width: 68px; height: 68px; font-size: 11.5px; } .plan-row { display: flex; gap: 10px; margin: 9px 0; } .plan-row .pk { width: 5em; flex-shrink: 0; color: var(--muted); font-size: 13px; padding-top: 2px; } .plan-row .pv { font-size: 15px; } @media (max-width: 560px) { .plan-card { padding-right: 20px; } .plan-stamp { position: static; margin-bottom: 8px; } } .plan-sec .station-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .plan-sec .station-no { font-size: 12px; color: var(--seal); letter-spacing: 0.18em; font-weight: 700; } .plan-sec h3 { margin: 0; font-size: 19px; } .plan-sec .lead { color: var(--muted); font-size: 14px; margin: 4px 0 14px; } /* ── #system：課堂之外 ── */ .system-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; } @media (max-width: 900px) { .system-wrap { grid-template-columns: 1fr; gap: 40px; } } .system-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.9; max-width: 520px; } .system-list { list-style: none; margin: 30px 0 0; padding: 0; } .system-list li { border-top: 1px solid var(--line); padding: 16px 0; display: flex; gap: 20px; align-items: baseline; } .system-list li b { color: var(--seal); font-size: 11px; letter-spacing: 0.06em; flex-shrink: 0; } .system-list li strong { margin-right: 10px; color: var(--ink); } .system-list li span { color: var(--muted); } .system-display { position: relative; display: grid; place-items: center; min-height: 460px; } /* max-width:100%（Codex 終審 #3）：glow 固定 420px 在 <420px 寬的容器（手機）會左右 溢出，右側超出部分把 documentElement.scrollWidth 撐到 >375 → 真機 375px 出現橫向捲動 （abspos 的 % 相對 containing block=.system-display，上限鎖進容器就不可能再撐開頁面； blur 光暈是 ink overflow、不算捲動範圍，視覺幾乎無差）。 */ .display-glow { position: absolute; width: 420px; max-width: 100%; height: 420px; border-radius: 50%; background: var(--sky); filter: blur(70px); opacity: 0.22; } .phone { position: relative; width: 280px; min-height: 460px; border: 9px solid var(--ink); border-radius: 36px; background: var(--card); color: var(--ink); padding: 24px 18px; transform: rotate(4deg); box-shadow: var(--shadow-lg); } .phone-top { font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; align-items: center; } .phone-top span { color: var(--seal); font-size: 10px; } .phone-ring { width: 130px; height: 130px; border-radius: 50%; border: 13px solid var(--amber-bg); border-top-color: var(--seal); border-right-color: var(--yellow); margin: 30px auto; display: grid; place-content: center; text-align: center; transform: rotate(6deg); } .phone-ring strong, .phone-ring small { display: block; transform: rotate(-6deg); } .phone-ring strong { font-size: 20px; letter-spacing: -0.02em; } .phone-ring small { font-size: 10px; color: var(--muted); margin-top: 2px; } .lesson-row { background: var(--paper); margin: 10px 0; padding: 11px 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); } /* 黃底（--yellow 不隨主題翻色）→ 字/圖示固定深色，避免暗色模式淺字疊黃底看不清 */ .lesson-row > span { width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: #17315F; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; } .lesson-row div { flex: 1; min-width: 0; } .lesson-row small, .lesson-row strong { display: block; } .lesson-row small { font-size: 9px; color: var(--muted); letter-spacing: 0.04em; } .lesson-row strong { font-size: 12.5px; margin-top: 2px; } .lesson-row em { font-size: 10px; font-style: normal; color: var(--muted); white-space: nowrap; } .float-note { position: absolute; color: var(--ink); padding: 15px 17px; background: var(--card); box-shadow: var(--shadow); font-size: 11.5px; line-height: 1.5; border-radius: 12px; max-width: 168px; } .float-note strong { display: block; margin-top: 3px; } .note-a { left: -6px; top: 60px; transform: rotate(-6deg); } .note-b { right: -10px; bottom: 40px; background: var(--yellow); color: #17315F; transform: rotate(5deg); } @media (max-width: 560px) { .note-a { left: -2px; } .note-b { right: -2px; } .float-note { font-size: 10.5px; max-width: 138px; padding: 11px 13px; } } .screenshot-slot { margin-top: 22px; text-align: center; } /* ── #videos：teaser（首頁精簡版，完整內容在各校 /videos/）── 段 6 Codex 終審 #3：虛構影片卡（.video-teaser-grid／.vid* 家族）已隨誠實化移除， 對應 CSS 規則同步清掉（孤兒規則掃描確認全站零引用後刪）；本區只剩標題列與 outline-button 仍在使用。 */ .video-teaser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .outline-button { border: 1.5px solid var(--ink); border-radius: 999px; padding: 12px 19px; font-weight: 800; font-size: 12.5px; text-decoration: none; color: var(--ink); white-space: nowrap; } .outline-button:hover { border-color: var(--green); color: var(--green); } /* ── #stories：見證 ── */ .stories-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); margin-top: 6px; } /* ── #contact：先了解孩子 ── */ .contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: stretch; } @media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; gap: 30px; } } .coupon { position: relative; background: var(--card); border: 2px dashed var(--seal); border-radius: 20px; padding: 30px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; } .coupon::before, .coupon::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); top: 50%; transform: translateY(-50%); } .coupon::before { left: -12px; box-shadow: inset -2px 0 0 var(--seal); } .coupon::after { right: -12px; box-shadow: inset 2px 0 0 var(--seal); } .coupon .coupon-eyebrow { color: var(--seal); font-weight: 850; font-size: 12px; letter-spacing: 0.14em; } .coupon h3 { margin: 0; font-size: 24px; } .coupon p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.8; } .contact-summary { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; gap: 6px; } .contact-summary p { margin: 0; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); } .contact-summary strong { font-size: 21px; } .contact-summary span { font-size: 13px; color: var(--muted); } .contact-summary .contact-links { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* ── 互動三站（現遷至 /qa/・/trial/・/videos/，樣式維持不變）── */ .station { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 16px; } .station-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .station-no { font-size: 12px; color: var(--seal); letter-spacing: 0.18em; font-weight: 700; } .station h3 { margin: 0; font-size: 19px; } .station .lead { color: var(--muted); font-size: 14px; margin: 4px 0 14px; } .ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .ask-chips button { border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-family: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer; } .ask-chips button[aria-pressed="true"] { border-color: var(--seal); background: var(--seal-bg); color: var(--seal); font-weight: 600; } .ask-answer { display: none; background: var(--paper); border-radius: 12px; padding: 14px 16px; font-size: 15px; } .ask-answer.show { display: block; } .ask-answer strong { color: var(--ink); } .ask-more { font-size: 13px; color: var(--muted); margin-top: 10px; } .game-wrap { display: flex; gap: 22px; align-items: center; } @media (max-width: 620px) { .game-wrap { flex-direction: column; } } .game-egg { flex-shrink: 0; } .game-zone { flex: 1; min-width: 0; } .game-zh { font-size: 26px; font-weight: 700; margin: 2px 0 10px; } .game-zh small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 8px; } .game-opts { display: flex; flex-wrap: wrap; gap: 8px; } .game-opts button { border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-family: inherit; font-size: 15.5px; padding: 9px 18px; border-radius: 10px; cursor: pointer; } .game-opts button.good { border-color: var(--green); background: var(--green-bg); color: var(--green-ink); font-weight: 700; } .game-opts button.bad { border-color: var(--seal); color: var(--seal); } .shake { animation: shake 0.3s ease; } @keyframes shake { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } } .game-msg { font-size: 13.5px; color: var(--muted); margin-top: 10px; min-height: 1.6em; } .game-done { display: none; } .game-done.show { display: block; } .game-done .big { font-size: 17px; font-weight: 700; margin: 4px 0 8px; } .crack { opacity: 0; transition: opacity 0.3s ease; } .crack.show { opacity: 1; } .egg-wiggle { animation: wig 0.7s ease 2; transform-origin: 60px 120px; } @keyframes wig { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } } .course { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); position: relative; } .course h4 { margin: 0; font-size: 17px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .course h4 .who { font-size: 12px; color: var(--seal); font-weight: 700; letter-spacing: 0.08em; } .course p { margin: 8px 0 0; font-size: 14px; color: var(--muted); } .course .done { margin-top: 10px; font-size: 13px; color: var(--green-ink); background: var(--green-bg); border-radius: 8px; padding: 6px 12px; display: inline-block; } .more-strip { margin-top: 12px; font-size: 13.5px; color: var(--muted); } .course .more-strip a::after { content: ""; position: absolute; inset: 0; } .index-grid { display: grid; gap: 12px; margin: 18px 0; } .index-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); } .material-slot { background: var(--card); border: 1.5px dashed var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; } .material-slot h3 { margin: 0 0 8px; font-size: 15.5px; } .slot-pending { margin: 0; font-size: 14px; color: var(--muted); font-style: italic; } .social-fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .social-fab .fab { position: static; right: auto; bottom: auto; } .fab-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .fab-icon:hover { border-color: var(--green); color: var(--green); } .wp { display: flex; gap: 26px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow); } @media (max-width: 680px) { .wp { flex-direction: column; text-align: center; } } .wp h3 { margin: 0 0 8px; font-size: 20px; } .wp p { margin: 0 0 14px; color: var(--muted); font-size: 15px; } .wp-steps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: inherit; } .wp-steps span { font-size: 13px; background: var(--amber-bg); color: var(--amber); border-radius: 999px; padding: 5px 13px; font-weight: 600; } .kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 720px) { .kids { grid-template-columns: 1fr; } } .bubble { position: relative; border-radius: 16px; padding: 18px 20px 14px; font-size: 15px; box-shadow: var(--shadow); } .bubble::after { content: ""; position: absolute; bottom: -9px; left: 28px; width: 18px; height: 18px; transform: rotate(45deg); border-radius: 3px; background: inherit; } .bubble.a { background: var(--amber-bg); } .bubble.a .who { color: var(--amber); } .bubble.g { background: var(--green-bg); } .bubble.g .who { color: var(--green-ink); } .bubble.s { background: var(--sky-bg); } .bubble.s .who { color: var(--sky); } .bubble p { margin: 0 0 8px; } .bubble .who { font-size: 12.5px; font-weight: 700; } .campuses { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 680px) { .campuses { grid-template-columns: 1fr; } } .campus-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); } .campus-card h4 { margin: 0 0 10px; font-size: 17px; } .campus-card dl { margin: 0; font-size: 14px; } .campus-card dt { color: var(--muted); font-size: 12px; margin-top: 8px; } .campus-card dd { margin: 0; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; margin-bottom: 10px; box-shadow: var(--shadow); } .faq summary { cursor: pointer; list-style: none; padding: 15px 0; font-weight: 700; font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "＋"; color: var(--seal); font-weight: 400; flex-shrink: 0; } .faq details[open] summary::after { content: "－"; } .faq .a { padding: 0 0 16px; color: var(--muted); font-size: 15px; max-width: 40em; margin: 0; } .faq .a strong { color: var(--ink); } .q-group { font-size: 12.5px; letter-spacing: 0.12em; color: var(--seal); font-weight: 800; margin: 22px 0 10px; } .q-group:first-child { margin-top: 0; } /* ── 孤兒規則（webmerge-pr1 D-24，2026-08-18）：原本是 /qa/ 頁頂那一整塊的容器， 該區塊已隨拍㉖ 移除（`qa-index.njk` 不再輸出 `.director-block`）⇒ 本條現為死碼。 ⚠️ 刻意留著、交 PR-2 的死碼清理一起收：檔尾的 `.director-block h2` 與 `.director-block .lead` 跟【仍在使用的】`.cinema-block` 共用選擇器， 單獨刪這裡會誘導下一個人連檔尾那兩條一起刪、把影音頁弄破版。 ── */ .director-block { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 28px; } /* 段 6 Codex 終審 #3：影片卡＋分類篩選（.vid-filters／.vids／.vid* 家族）已隨 虛構影片卡移除而成為孤兒規則（全站零引用掃描確認後刪除）——真影片上線時的 版面屆時重新設計，不留死規則。 */ /* ── /videos/ 頁頂：小放映室（自 home.njk 遷入） ── */ .cinema-block { margin-bottom: 30px; } .cinema { position: relative; background: #14201A; border-radius: 14px; aspect-ratio: 16 / 9; max-width: 560px; overflow: hidden; color: #F2F6F2; cursor: pointer; box-shadow: var(--shadow); } .cinema .poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .play-tri { width: 0; height: 0; border-left: 26px solid #F2F6F2; border-top: 16px solid transparent; border-bottom: 16px solid transparent; display: inline-block; } .cine-slide, .cine-end { position: absolute; inset: 0; padding: 20px 22px; display: none; flex-direction: column; justify-content: flex-end; background: #14201A; } .cine-slide.show, .cine-end.show { display: flex; } .cine-end { justify-content: center; align-items: flex-start; } .cine-slide .big, .cine-end .big { font-size: 21px; font-weight: 700; } .cine-slide .cap, .cine-end .cap { font-size: 13px; opacity: 0.8; } .foot { margin-top: 84px; border-top: 1px solid var(--line); padding-top: 22px; font-size: 12.5px; color: var(--muted); } .fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; background: #06C755; color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 13px 20px; border-radius: 999px; box-shadow: 0 8px 28px rgba(23,49,95,.3); } .fab.fab-fb { background: #1877F2; padding: 9px 15px; font-size: 12.5px; } /* ── 內容頁（課程／QA 獨立頁）共用樣式 ── */ .back-home { color: var(--muted); text-decoration: none; font-size: 13px; } .back-home:hover { color: var(--ink); } .breadcrumb { font-size: 12.5px; color: var(--muted); margin: 20px 0 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--green); text-decoration: underline; } .breadcrumb .sep { opacity: 0.6; } .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; } .article-body { max-width: 40em; } .article-body.wide { max-width: none; } .article-body h1 { font-family: "Iowan Old Style", "Noto Serif TC", "Songti TC", serif; font-size: clamp(24px, 4.6vw, 34px); line-height: 1.35; margin: 0 0 18px; font-weight: 700; text-wrap: balance; } .article-body h2 { font-size: 19px; margin: 36px 0 10px; } .article-body > h3 { font-size: 16px; margin: 22px 0 6px; font-weight: 700; } .article-body p { margin: 0 0 14px; } .article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 1.4em; } .article-body li { margin: 4px 0; } .article-body strong { color: var(--ink); } .article-body a { text-decoration: underline; } .article-cta { margin-top: 48px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); } .article-cta h2 { margin: 0 0 8px; font-size: 18px; } .article-cta p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .foot-links a { color: var(--muted); text-decoration: none; font-size: 13px; } .foot-links a:hover { color: var(--green); text-decoration: underline; } /* ── 內聯樣式清帳（build/style-sunrise 第 2 輪；html-validate no-inline-style 開回 error）── 下列規則一對一承接原本散在模板裡的行內 style 屬性（宣告值逐字照搬、視覺零變動；改動前後 computed-style 對照存證見 PR #10）。⚠️ 本區塊刻意放在檔案「最末」：其中 .director-block h2／ .cinema-block h2／.game-done p 與上方 .article-body h2／.article-body p 特異度同為 0-1-1， 靠原始碼順序（後者覆蓋前者）才能贏——位置不可往上搬。 */ a.brand { color: inherit; text-decoration: none; } .cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .plan-card .cta-row { margin-top: 14px; } .trial-cta { margin-top: 8px; } .game-cta { display: flex; flex-wrap: wrap; gap: 10px; } .result-who { font-size: 12.5px; color: var(--muted); } .index-note.centered { text-align: center; } .screenshot-slot .slot-pending { display: inline-block; background: var(--sky-bg); border-radius: 10px; padding: 10px 18px; } .video-section .ask-more { margin-top: 14px; } .ask-more.spaced { margin-top: 12px; } .director-block h2, .cinema-block h2 { margin: 0; font-size: 19px; } .director-block .lead, .cinema-block .lead { color: var(--muted); font-size: 14px; margin: 4px 0 14px; } .poster-note { font-size: 14px; opacity: 0.85; } .cine-end .cap { margin: 6px 0 12px; } .cine-end .btn { font-size: 13.5px; padding: 9px 16px; } .game-done p { margin: 0 0 12px; font-size: 14px; color: var(--muted); } .wp .wp-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .campus-card .more-strip .btn { margin-top: 10px; } /* ══════════════════════════════════════════════════════════════════════ 段 6「一站兩校區」新增（build/one-site-two-campuses）：選校記憶／校區切換／ 兩校並列 CTA／首頁選校大卡／about 頁兩校側寫。全部沿用既有 tokens （--green/--seal/--yellow/--card/--line/--shadow 等）與既有元件類別 （.btn/.btn-line/.campus-card/.line-mini/.tel-mini/.fab），這裡只新增 版面規則，不重複定義顏色或字體。放檔案最末：不影響上方任何既有規則的 原始碼順序依賴（見本檔「內聯樣式清帳」註解），本區塊的選擇器也都是全新 類別、跟既有規則零特異度衝突。 ══════════════════════════════════════════════════════════════════════ */ /* 導覽列校區切換器（site-nav.njk .campus-switch）：兩個小連結並排，目前所在校區 （.is-current）用底線＋主色標示；campus-picker.js 記憶生效時額外加 .is-remembered （虛線底線提示「這是你選過的」，跟 .is-current 視覺區分——一個代表「現在在哪」， 一個代表「記得你選過哪」，兩者可能同時成立、也可能不同）。 刻意不跟 .top nav 同一組斷點隱藏——.top nav 是「7 個分頁連結」，窄螢幕收起來 是合理的資訊架構收斂；但校區切換屬於「動作」而非「導覽清單」（同 tel-mini／ line-mini 的定位），手機使用者反而更需要一眼看到、點一下就能切校區， 故維持全寬度顯示、只靠自身 padding／字級縮小適應窄螢幕。 */ .campus-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-shrink: 0; } .campus-switch a { color: var(--muted); text-decoration: none; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap; } .campus-switch a:hover { color: var(--ink); } .campus-switch a.is-current { color: var(--green); background: var(--green-bg); } .campus-switch a.is-remembered:not(.is-current) { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } @media (max-width: 400px) { .campus-switch { font-size: 11px; } .campus-switch a { padding: 4px 6px; } } /* 品牌層共用頁的「兩校並列」CTA：campus-cta.njk（大按鈕，cta-row 情境）／ site-nav.njk 的 line-mini-group（導覽列小按鈕）／social-fab.njk 的 fab-campus-group（浮動鈕情境）——三處視覺分別沿用各自情境既有的按鈕類別 （.btn.btn-line／.line-mini／.fab），這裡只讓外層 wrapper 對 flex 佈局透明 （display:contents：wrapper 本身不佔版面、不產生額外盒子，兩顆按鈕直接參與 父層的 flex/gap，效果等同兩顆按鈕本來就是父層的直接子元素）。 campus-picker.js 依 localStorage 記憶對 [data-campus-option] 加 hidden 屬性、 收斂成一顆——瀏覽器原生 [hidden] 已經 display:none，不需要額外 CSS 處理； display:contents 的父層不影響子層各自的 hidden 狀態。 */ .campus-cta, .line-mini-group, .fab-campus-group { display: contents; } /* 首頁「選校區」兩張大卡（brand-home.njk #pick-campus）：延伸既有 .campus-card （見 contact-body.njk），加大字級與間距、加一顆視覺化 CTA（.campus-pick-cta， 非真正