/* liunian.css — 流年叢集（2027 丁未年）專用樣式。在 style.css / article.css 之後載入：於 :root 覆蓋暗金 token，整頁 chrome （header / footer / .article / .cta-card / .rizhu-card / .faq）自動翻成暖象牙精品風，與 jiuyun.css 同一套調性（兩個叢集會互相內鏈，色系不能各走各的）。配色紀律（沿用站規，別回頭做成單溫層全金）： · 金（--gold）只當強調點與細邊，不鋪面。 · 區塊標題、關鍵數字、表頭一律走深色錨 --ink。 · 五行五色只用來分辨屬性，不拿來當裝飾。 · 圖示一律單色線性 SVG，不用 emoji。 */ :root { --bg: #f7f3ec; --bg-card: #ffffff; --bg-input: #fffdf9; --border: #e4ddce; --text: #201d18; --text-dim: #6f685c; --gold: #a6824c; --gold-soft: #c0a070; --radius: 14px; --wx-mu: #4f8c5f; /* 木：松綠 */ --wx-huo: #bd5f42; /* 火：窯磚 */ --wx-tu: #a07a3f; /* 土：赭金 */ --wx-jin: #7d8494; /* 金：鋼灰 */ --wx-shui: #46618f; /* 水：靛藍 */ --ink: #2f2a22; /* 深色錨 */ --yc: #bd5f42; /* 本頁強調色，由覆蓋 */ --lux-serif: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif; --lux-sans: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif; } /* 简中頁改用 SC 字族。為什麼靠 :lang() 而不是讓產生器去改 CSS：三語共用同一份 liunian.css，變數寫死 TC 的話， gen-liunian-2027-hans.mjs 即使把 Google Fonts 連結換成 SC，CSS 也不會去引用它—— 等於多下載一份字體、簡體字仍套繁體字形（實測 getComputedStyle 回傳 Noto Sans TC）。 :lang(zh-Hans) 只比對，繁中的 zh-Hant-TW 不會誤中。 */ :root:lang(zh-Hans) { --lux-sans: 'Jost', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; --lux-serif: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif; } body { font-family: var(--lux-sans); } .article h1, .article h2, .ln-note h2 { font-family: var(--lux-serif); font-weight: 600; color: var(--ink); } .article h1 { font-size: 2.05rem; letter-spacing: 0.01em; line-height: 1.34; } .article h2 { letter-spacing: 0.02em; } .article h3 { color: var(--ink); } .article .lead { font-size: 1.06rem; } .article .lead b { color: var(--gold); font-weight: 500; } .ln-sub { color: var(--text-dim); font-size: 0.97rem; margin: 0 0 16px; } /* ── 檔案卡：三格規格 dl ───────────────────────────────── */ .ln-file { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-top: 3px solid var(--yc); border-radius: 12px; overflow: hidden; margin: 10px 0 20px; } .ln-file div { background: var(--bg-card); padding: 12px 14px; } .ln-file .ln-f-hi { background: #fffaf3; } .ln-file dt { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 3px; } .ln-file dd { margin: 0; font-family: var(--lux-serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); line-height: 1.35; } .ln-file dd small { display: block; font-family: var(--lux-sans); font-size: 0.72rem; font-weight: 400; color: var(--text-dim); letter-spacing: .02em; margin-top: 2px; } /* ── 九宮格（南上北下）───────────────────────────────── */ .ln-nine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 14px 0 10px; } .ln-cell { background: var(--bg-card); padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; text-decoration: none; border-top: 3px solid transparent; transition: background .15s; } a.ln-cell:hover { background: #fffaf3; } .ln-cell .ln-c-dir { font-size: 0.74rem; letter-spacing: .1em; color: var(--text-dim); } .ln-cell .ln-c-dir i { font-style: normal; } .ln-cell .ln-c-star { font-family: var(--lux-serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.2; } .ln-cell .ln-c-sha { font-size: 0.76rem; color: var(--text-dim); } .ln-cell .ln-c-qi { font-size: 0.7rem; letter-spacing: .08em; margin-top: 3px; color: var(--text-dim); } .ln-cell.is-center { background: #fdf8f0; } .ln-cell.is-hi { background: #fdf3e6; box-shadow: inset 0 0 0 2px var(--gold); } /* 旺衰六級：只用飽和度與冷暖分級，不做紅綠燈 */ .ln-q-wang { border-top-color: var(--gold); } .ln-q-wang .ln-c-qi { color: var(--gold); font-weight: 600; } .ln-q-sheng { border-top-color: var(--wx-mu); } .ln-q-jin { border-top-color: #9db6a4; } .ln-q-tui { border-top-color: #bcb5a6; } .ln-q-si { border-top-color: #a9a294; } .ln-q-sha { border-top-color: var(--wx-huo); } .ln-q-sha .ln-c-qi { color: var(--wx-huo); } /* ── 表格（12 生肖速查、逐月）────────────────────────── */ .ln-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 18px; } .ln-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 560px; } .ln-table th, .ln-table td { padding: 9px 11px; border-bottom: 1px solid var(--border); text-align: left; } .ln-table thead th { font-size: 0.74rem; letter-spacing: .1em; color: var(--text-dim); font-weight: 700; border-bottom: 2px solid var(--ink); } .ln-table tbody th { font-family: var(--lux-serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .ln-table tbody tr:hover { background: #fffaf3; } .ln-table a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-soft); } .ln-table .ln-td-dim { color: var(--text-dim); } /* 太歲／關係標籤 */ .ln-badge { display: inline-block; font-size: 0.72rem; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); margin-right: 4px; white-space: nowrap; } .ln-badge.is-tai { border-color: #d9b7ab; background: #fbf1ed; color: #9d4b32; } .ln-badge.is-boon { border-color: #b9cfbe; background: #f1f7f2; color: #3f6f4e; } /* ── 生肖卡片牆 ─────────────────────────────────────── */ .ln-zgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 18px; } .ln-zcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; border-top: 3px solid var(--zc, var(--gold)); padding: 13px 12px; text-decoration: none; display: flex; flex-direction: column; gap: 3px; transition: transform .15s, box-shadow .15s; } .ln-zcard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47, 42, 34, .08); } .ln-zcard .zc-name { font-family: var(--lux-serif); font-size: 1.32rem; font-weight: 600; color: var(--ink); } .ln-zcard .zc-name small { font-family: var(--lux-sans); font-size: 0.72rem; font-weight: 400; color: var(--text-dim); margin-left: 5px; } .ln-zcard .zc-meta { font-size: 0.79rem; color: var(--text-dim); line-height: 1.5; } /* ── 兩欄（得力／耗力）────────────────────────────── */ .ln-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 18px; } .ln-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; border-top: 3px solid var(--cc, var(--gold)); } .ln-col-up { --cc: var(--yc); } .ln-col-down { --cc: #8a8478; } .ln-col .ln-c-tag { font-size: 0.68rem; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; } .ln-col h3 { margin: 4px 0 8px; font-family: var(--lux-serif); font-size: 1.14rem; } .ln-col ul { margin: 0; padding-left: 1.1rem; } .ln-col li { margin-bottom: 6px; line-height: 1.75; } /* ── 逐月節拍列（手機改橫向捲動，別擠成豆腐塊）────── */ .ln-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0 18px; } .ln-mo { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; border-top: 3px solid var(--mc, var(--border)); } .ln-mo .mo-n { font-size: 0.68rem; letter-spacing: .1em; color: var(--text-dim); } .ln-mo .mo-gz { font-family: var(--lux-serif); font-size: 1.16rem; font-weight: 600; color: var(--ink); display: block; line-height: 1.3; } .ln-mo .mo-d { font-size: 0.68rem; color: var(--text-dim); } .ln-mo.is-good { --mc: var(--wx-mu); } .ln-mo.is-watch { --mc: var(--wx-huo); } .ln-mo.is-both { --mc: var(--gold); } /* ── 誠實框 ─────────────────────────────────────────── */ .ln-note { background: #fbf8f2; border: 1px solid var(--border); border-left: 3px solid var(--ink); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 22px 0; } .ln-note h2 { margin: 0 0 8px; font-size: 1.12rem; } .ln-note p { margin: 0 0 8px; color: var(--text); line-height: 1.85; } .ln-note p:last-child { margin-bottom: 0; } /* ── 上下頁導覽 ───────────────────────────────────── */ .ln-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 6px; } .ln-prevnext a { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; } .ln-prevnext a:hover { border-color: var(--gold-soft); } .ln-prevnext .ln-pn-next { text-align: right; } .ln-prevnext .ln-pn-l { font-size: 0.68rem; letter-spacing: .12em; color: var(--text-dim); } .ln-prevnext .ln-pn-t { font-family: var(--lux-serif); font-size: 1.04rem; font-weight: 600; color: var(--ink); } /* ── 線性圖示（單色，隨 currentColor）───────────────── */ .ln-ico { width: 1em; height: 1em; vertical-align: -.12em; stroke: currentColor; fill: none; stroke-width: 1.5; } /* ── RWD ─────────────────────────────────────────────── */ @media (max-width: 860px) { .ln-zgrid { grid-template-columns: repeat(3, 1fr); } .ln-months { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 620px) { .article h1 { font-size: 1.72rem; } .ln-file { grid-template-columns: repeat(2, 1fr); } .ln-two { grid-template-columns: 1fr; } .ln-zgrid { grid-template-columns: repeat(2, 1fr); } .ln-months { grid-template-columns: repeat(3, 1fr); } .ln-cell { padding: 11px 6px; } .ln-cell .ln-c-star { font-size: 1.28rem; } .ln-cell .ln-c-sha { display: none; } } @media (max-width: 430px) { .ln-prevnext { grid-template-columns: 1fr; } .ln-prevnext .ln-pn-next { text-align: left; } .ln-months { grid-template-columns: repeat(2, 1fr); } }