/* ═══════════════════════════════════════════════════════════════ moonlit-theme.css — 「月光音樂藝廊」首頁主題（Phase 1，僅 index.html）啟用方式：。未加 class 的頁面完全不受影響。原則：只覆蓋視覺，不改任何結構/功能；深淺區塊以「重映射既有 CSS 變數」實作，讓頁內大量 inline style（引用 var(--text) 等）自動跟隨，不需逐一改 HTML。 ═══════════════════════════════════════════════════════════════ */ :root { /* ── 規格指定 design tokens ── */ --color-ink: #111719; --color-deep-teal: #082D2E; --color-teal: #123E3E; --color-ivory: #F4EFE6; --color-stone: #E8E0D2; --color-bronze: #A8895A; --color-gold-muted: #C3A46F; --color-text: #252321; --color-text-light: #F5F0E7; --color-muted: #756D63; --color-border: rgba(168,137,90,.35); /* ── 衍生（對比安全）── */ --m-bronze-text: #7a6134; /* 淺底上的銅金文字（AA ≥4.5:1） */ --m-border-soft: rgba(168,137,90,.22); --m-shadow: 0 10px 34px rgba(17,23,25,.10); --m-shadow-dark: 0 14px 40px rgba(0,0,0,.35); --m-radius: 12px; --m-serif: 'Noto Serif TC','NotoSerifTC-fb',Georgia,serif; /* canary-v2：Shippori 未部署，移除 */ /* canary-v2：刻意不含 'Noto Sans TC' —— 該字體檔不在部署 manifest，若留在堆疊中會觸發未部署字體的請求（404）。內文一律系統繁中字體。 */ --m-sans: system-ui,-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; } /* ═══ 1. 基底：暖象牙白為預設，深色區塊另指定 ═══ */ body.moonlit { background: var(--color-ivory); color: var(--color-text); font-weight: 400; } body.moonlit ::selection { background: rgba(195,164,111,.35); } body.moonlit ::-webkit-scrollbar-track { background: var(--color-ivory); } body.moonlit ::-webkit-scrollbar-thumb { background: var(--color-bronze); } /* ═══ 2. 深／淺區塊：以變數重映射為主 ═══ 淺（暖象牙）：#overview #courses #tutor-cats #pricing #shop-teaser #faq #location #news 深（墨綠夜色）：hero #about #teachers-preview #studio #contact #cta-section */ /* — 淺色區塊 — 註：#performances（活動照片）在正式站有真實資料時才由 JS 顯示（預設 display:none）。 canary-v2 前的本機測試因 API 無資料而未渲染此區，導致遺漏；hermetic 以正式站真實 fixture 測試後補上，避免淺底套用深色設計字色（對比 1.03）。 */ body.moonlit #overview, body.moonlit #courses, body.moonlit #tutor-cats, body.moonlit #pricing, body.moonlit #shop-teaser, body.moonlit #faq, body.moonlit #location, body.moonlit #news, body.moonlit #performances { --void: transparent; --glass: #FFFFFF; --border: var(--m-border-soft); --border-bright: var(--color-border); --gold: var(--m-bronze-text); --gold-dim: rgba(168,137,90,.16); --gold-glow: rgba(168,137,90,.07); --text: var(--color-text); --text-dim: #5f584e; --text-muted: var(--color-muted); background: var(--color-ivory); color: var(--color-text); } /* 洞石質感的分隔：相鄰淺區用 stone 交錯，避免整片白（#performances 置於 #about 深區之後 → 用 stone，與其後的 #courses 白底交錯） */ body.moonlit #tutor-cats, body.moonlit #shop-teaser, body.moonlit #location, body.moonlit #performances { background: var(--color-stone); /* stone 底較深，文字再壓深一級以保 AA（≥4.5:1 on #E8E0D2） */ --gold: #6d5729; --text-dim: #55483f; --text-muted: #5f584e; } /* #performances 卡片：舊版寫死深底淺字（.perf-card-date 等）→ 淺底強制修正 */ body.moonlit #performances .perf-card-date { color: #5f584e !important; } body.moonlit #performances .perf-card-title { color: var(--color-text) !important; } body.moonlit #performances p { color: #55483f; } /* 舊版把家教文章字色寫死為淺色（深底用）→ 淺底上隱形（對比 1.05），強制修正 */ body.moonlit #tutor-cats .tutor-article { color: #55483f; } /* 後台文章（/api/tutor-cats）內含為舊黑底設計的內嵌強調色（）。月光首頁此區為 stone 淺底 → 內嵌亮黃對比不足。改用主題銅金，保留「強調」語意且達 AA。僅作用於首頁；其他頁面仍用未改動的 global.css，內容原色不受影響。 */ body.moonlit #tutor-cats .tutor-article font[color], body.moonlit #tutor-cats .tutor-article font[color] strong { color: #6d5729 !important; } body.moonlit #tutor-cats .tutor-tab { border-color: var(--color-border); } body.moonlit #tutor-cats .tutor-tab.active { background: var(--color-bronze); color: #16120a; border-color: var(--color-bronze); } /* — 深色區塊 — */ body.moonlit #about, body.moonlit #teachers-preview, body.moonlit #studio, body.moonlit #contact, body.moonlit #cta-section { --void: transparent; --glass: rgba(255,255,255,.045); --border: rgba(195,164,111,.22); --border-bright: rgba(195,164,111,.4); --gold: var(--color-gold-muted); --gold-dim: rgba(195,164,111,.18); --gold-glow: rgba(195,164,111,.08); --text: var(--color-text-light); --text-dim: rgba(245,240,231,.72); --text-muted: rgba(245,240,231,.48); background: linear-gradient(180deg, var(--color-deep-teal), var(--color-teal) 60%, var(--color-deep-teal)); color: var(--color-text-light); } /* ═══ 3. 卡片與元件：拿掉玻璃擬態，改實底細金框（藝廊感：hairline、輕陰影、緊湊）═══ */ body.moonlit .glass-card { backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 4px 18px rgba(17,23,25,.06); background: var(--glass); } body.moonlit .glass-card::before { display: none; } /* 卡片高度 −20%：收緊主要卡片的內距與間距，降低 SaaS 模板感 */ body.moonlit .feat-card { padding: 26px 28px !important; } body.moonlit .feat-card .feat-num { margin-bottom: 10px; font-family: 'Cormorant Garamond', Georgia, serif; } body.moonlit .feat-card .feat-p { line-height: 1.8; } body.moonlit .course-card { padding: 26px 26px 22px !important; } body.moonlit .course-card .course-icon { font-size: 1.6rem; margin-bottom: 10px; } body.moonlit .course-card .course-desc { line-height: 1.8; } body.moonlit .price-card { padding: 26px 24px !important; } body.moonlit .testi-card { padding: 24px 26px !important; } body.moonlit .glass-card:hover { transform: none; } body.moonlit .feat-glow, body.moonlit .course-glow, body.moonlit .stat-glow { display: none; } body.moonlit #about .glass-card, body.moonlit #studio .glass-card, body.moonlit #teachers-preview .glass-card { box-shadow: var(--m-shadow-dark); } body.moonlit .btn-gold { background: var(--color-bronze); color: #16120a; border-radius: 10px; font-weight: 500; border: 1px solid rgba(0,0,0,.08); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } body.moonlit .btn-gold:hover { background: var(--color-gold-muted); transform: translateY(-1px); opacity: 1; } body.moonlit .btn-ghost { border: 1px solid var(--color-border); color: var(--gold); border-radius: 10px; backdrop-filter: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } body.moonlit .btn-ghost:hover { border-color: var(--color-bronze); background: var(--gold-dim); color: var(--gold); } body.moonlit .btn-line { border-radius: 10px; min-height: 44px; } body.moonlit .sec-eye { color: var(--gold); letter-spacing: .18em; font-family: var(--m-sans); } body.moonlit .sec-h { font-family: var(--m-serif); color: var(--text); font-weight: 400; } /* 鍵盤 focus 一律清楚可見 */ body.moonlit a:focus-visible, body.moonlit button:focus-visible, body.moonlit input:focus-visible, body.moonlit select:focus-visible, body.moonlit textarea:focus-visible { outline: 2px solid var(--color-bronze); outline-offset: 2px; border-radius: 4px; } /* ═══ 4. Hero v2（月光藝廊：左文 ~44%／右平台鋼琴 ~56%）═══ */ body.moonlit .mh-hero { position: relative; overflow: hidden; min-height: min(92vh, 860px); display: flex; align-items: center; padding: calc(64px + 6vh) 6vw 9vh; background: var(--color-ink); /* 圖片載入前的底 */ } /* ── 純 CSS/SVG fallback：洞石藝廊＋圓形天窗＋月光＋鋼琴剪影（圖片缺失時不留空白）── */ body.moonlit .mh-fallback { position: absolute; inset: 0; z-index: 0; overflow: hidden; } body.moonlit .mh-fb-sky { /* 夜空＋圓形天窗＋月亮（右上） */ position: absolute; inset: 0; background: radial-gradient(circle 90px at 71% 16%, rgba(244,239,230,.95) 0 34px, rgba(244,239,230,.25) 48px, transparent 90px), radial-gradient(ellipse 340px 150px at 71% 20%, rgba(20,48,72,.9) 0 68%, transparent 71%), linear-gradient(165deg, #0a1517 0%, var(--color-deep-teal) 46%, #0d3132 72%, #0a2122 100%); } body.moonlit .mh-fb-sky::after { /* 天窗洞口的洞石環形反光 */ content: ''; position: absolute; top: 6%; left: 52%; width: 40%; height: 30%; border-radius: 50%; border-bottom: 14px solid rgba(232,224,210,.16); filter: blur(6px); } body.moonlit .mh-fb-wall { /* 右側洞石牆面暖光帶 */ position: absolute; right: 0; top: 22%; width: 46%; height: 46%; background: linear-gradient(180deg, transparent, rgba(200,178,140,.14) 30%, rgba(200,178,140,.05)); mask-image: linear-gradient(90deg, transparent, #000 30%); } body.moonlit .mh-fb-floor { /* 墨綠大理石地坪＋倒影 */ position: absolute; inset: auto 0 0 0; height: 30%; background: radial-gradient(ellipse 60% 90% at 74% 0%, rgba(195,164,111,.10), transparent 60%), linear-gradient(180deg, #0c2b2a, #071a1a 80%); } body.moonlit .mh-fb-piano { /* 平台鋼琴剪影（右 56% 區） */ position: absolute; right: 3%; bottom: 6%; width: min(54%, 720px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); } /* ── 真實照片（載入成功即覆蓋 fallback；層級 0，與影片同層、依 DOM 順序疊放）── */ body.moonlit .mh-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* 桌機 center */ background: var(--color-ink); pointer-events: none; } body.moonlit .mh-fallback { pointer-events: none; } /* ── 背景影片增強層：z0（DOM 在 photo 之後 → 蓋在其上）；canplay 後 .ready 淡入 ── */ body.moonlit .mh-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; } body.moonlit .mh-video.ready { opacity: 1; } @media (prefers-reduced-motion: reduce) { body.moonlit .mh-video { display: none; } /* JS 也不會載入；雙保險 */ } /* ── 左側墨綠漸層遮罩：確保白字 AA（層級 1；文字層 2）── */ body.moonlit .mh-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(97deg, rgba(6,26,27,.92) 0%, rgba(8,45,46,.72) 34%, rgba(8,45,46,.28) 52%, transparent 72%), linear-gradient(180deg, rgba(6,26,27,.42), transparent 26%, transparent 70%, rgba(6,26,27,.5) 96%); } body.moonlit .mh-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; } body.moonlit .mh-text { max-width: min(46%, 580px); } /* 左側文字安全區 ~44% */ body.moonlit .mh-eye { font-family: var(--m-sans); font-size: .8rem; letter-spacing: .28em; color: var(--color-gold-muted); margin-bottom: 20px; } body.moonlit .mh-title { font-family: var(--m-serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.42; color: var(--color-text-light); margin: 0 0 18px; } body.moonlit .mh-sub { font-family: var(--m-sans); font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 2; color: rgba(245,240,231,.88); margin-bottom: 32px; } body.moonlit .mh-ctas { display: flex; gap: 14px; flex-wrap: wrap; } body.moonlit .mh-ctas .btn-gold, body.moonlit .mh-ctas .btn-teal { font-size: .92rem; padding: 13px 32px; } body.moonlit .mh-rule { width: 64px; height: 1px; background: var(--color-gold-muted); opacity: .7; margin-bottom: 24px; } /* 墨綠金框按鈕（LINE 次要入口等；亮綠只保留浮動主入口） */ body.moonlit .btn-teal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(18,62,62,.55); color: var(--color-text-light); border: 1px solid var(--color-gold-muted); border-radius: 10px; padding: 13px 32px; font-size: .88rem; letter-spacing: .05em; text-decoration: none; min-height: 44px; transition: background .25s, border-color .25s; } body.moonlit .btn-teal:hover { background: rgba(195,164,111,.16); border-color: var(--color-bronze); } /* ═══ 5. 信任資訊列（僅定性事實，無未驗證數字）═══ */ body.moonlit .trust-strip { background: var(--color-deep-teal); border-top: 1px solid rgba(195,164,111,.25); border-bottom: 1px solid rgba(195,164,111,.25); display: grid; grid-template-columns: repeat(4, 1fr); max-width: 100%; padding: 26px 6vw; gap: 18px; } body.moonlit .ts-item { display: flex; align-items: center; gap: 14px; justify-content: center; } body.moonlit .ts-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1px solid rgba(195,164,111,.45); color: var(--color-gold-muted); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } body.moonlit .ts-t { font-family: var(--m-serif); font-size: 1.02rem; color: var(--color-text-light); } body.moonlit .ts-d { font-size: .8rem; color: rgba(245,240,231,.62); margin-top: 3px; } /* ═══ 6. 師資預覽 ═══ 舊 v221 .tp-* 樣式已移除。師資「精品人物誌」改由已凍結 teach-candidate 設計提供（index.html 內 #teachers-preview 前的