/* moonlit-site.css — 公開前台共用月光精修（深色，Wave A） * 裁決：維持整站深色月光，只對齊首頁 tokens + 統一元件 + 共用化。 * 嚴格限定：所有規則皆以 .ms-main 起始（token 定義於 .ms-main body，向下 cascade）。 * —— 無任何未限定範圍的 body/:root/h1/table/button 全域規則，避免污染首頁與後台。 * 家族 class（與 .ms-main 同掛在）：ms-family-service / article / content / directory / tool。 * 僅本地字體，不引 CDN/Google Fonts；無玻璃擬態/發光/浮誇動畫；DOM/JS/契約由頁面凍結。 */ /* ── tokens：定義於 .ms-main（body），覆蓋各頁 inline :root 同名變數並 cascade 給後代 ── */ .ms-main{ --void:#07070f; /* 深夜黑 */ --gold:#C3A46F; /* 霧金：由 #c4a265 對齊 spec */ --gold-dim:rgba(195,164,111,.18); --gold-glow:rgba(195,164,111,.08); --text:#F4EFE6; /* 象牙白 */ --text-dim:rgba(244,239,230,.72); --text-muted:rgba(244,239,230,.6); --border:rgba(195,164,111,.22); --border-bright:rgba(195,164,111,.40); --line-green:#06C755; --ms-teal:#073534; /* 深墨綠 */ --ms-teal-2:#0a4442; --ms-ink:#07070f; --ms-radius:12px; --ms-serif-tc:'Noto Serif TC','NotoSerifTC-fb',Georgia,serif; } /* ── a11y：焦點環一致（限定 .ms-main 內）── */ .ms-main :where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{ outline:2.5px solid var(--gold);outline-offset:3px;border-radius:5px; } /* ── 標題襯線一致（限定 .ms-main）── */ .ms-main :is(h1,h2,h3){font-family:var(--ms-serif-tc);letter-spacing:.01em;} /* ── 共用元件類別（限定 .ms-main；僅新增類別，不改既有按鈕 DOM）── */ .ms-main .ms-btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem; padding:13px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none; transition:background .18s,color .18s,border-color .18s;} .ms-main .ms-btn--gold{background:var(--gold);color:var(--void);} .ms-main .ms-btn--gold:hover{background:#d3b681;} .ms-main .ms-btn--ghost{background:transparent;color:var(--text);border-color:var(--gold);} .ms-main .ms-btn--ghost:hover{background:var(--gold-dim);} .ms-main .ms-card{background:rgba(255,255,255,.03);border:1px solid var(--border); border-radius:var(--ms-radius);padding:24px;box-shadow:0 14px 40px rgba(0,0,0,.28);} .ms-main .ms-hr-gold{height:1px;border:0;background:var(--border-bright);margin:0;} /* ════════ 家族精修（皆限定 .ms-main.ms-family-*；只改背景/點綴，不動排版寬度與 DOM）════════ */ /* A. service — 課程/服務落地頁：hero 採首頁深墨綠語彙、金色 eyebrow */ .ms-main.ms-family-service .hero{background:linear-gradient(162deg,#07070f 0%,#073534 80%,#0a4442 100%)!important;} .ms-main.ms-family-service :is(.hero-eye,.eye){color:var(--gold)!important;letter-spacing:.2em;} /* B. article — 文章/費用指南：段落金色左界線、表頭深墨綠、CTA 金框 */ .ms-main.ms-family-article :is(.twrap,.prose) table thead th, .ms-main.ms-family-article table thead th{background:var(--ms-teal)!important;color:var(--text)!important;} .ms-main.ms-family-article :is(.eye,.crumb){color:var(--gold)!important;} .ms-main.ms-family-article .cta{border:1px solid var(--border-bright)!important;} /* C. content — FAQ/消息/成果/政策：卡片/區塊金邊、標題金點綴 */ .ms-main.ms-family-content :is(.card,.faq,.item,.post,.policy){border-color:var(--border)!important;} .ms-main.ms-family-content :is(.eye,.crumb){color:var(--gold)!important;} /* D. directory — 師資/地區列表：卡片格線月光化 */ .ms-main.ms-family-directory :is(.card,.tcard,.teacher,.area,.item){border:1px solid var(--border)!important; background:rgba(255,255,255,.03)!important;} .ms-main.ms-family-directory :is(.eye,.crumb){color:var(--gold)!important;} /* E. tool — Quiz/Calculator：表單/結果卡深墨綠點綴、金色焦點 */ .ms-main.ms-family-tool :is(.card,.panel,.result,.qbox,.step){border-color:var(--border)!important;} .ms-main.ms-family-tool :is(input,select,textarea):focus{border-color:var(--gold)!important; box-shadow:0 0 0 3px var(--gold-dim)!important;}