/* ============================================================================ phases.css — Oyang Archive The five 五行 palettes, each as a light/dark pair. phase.js sets html[data-phase]; theme.js sets html[data-theme]. Between them there are ten states, and every one of them is a complete palette. How this reaches the whole site ------------------------------- 1. Dark mode is already token-driven: theme.css writes every dark rule against --d-*. Redefining --d-* per phase reskins all of it — the inline style layer, the proverbs view, the article views, the style drawer — with no new rules at all. 2. Light mode was not token-driven; it was the raw inline hexes. So the light half below mirrors theme.css's dark rules against --p-* using the same .oa-bg-* / .oa-fg-* / .oa-bd-* classes theme.js already assigns. Those classes are written in both themes, so this needs no JS change beyond teaching theme.js to tag saturated accent grounds too. 3. The stylesheet-driven surfaces (yu.css, articles.css, style.css) get their light tokens redefined per phase, exactly as theme.css does for dark. Ordering: loaded after theme.css so the light rules here win over the original inline colours, and the dark token block wins over theme.css's defaults. Nothing here fires without a [data-phase] on the root, so removing phase.js reverts the site to its original palette. Palette roles, per phase ------------------------ --p-* light ground / ink / accent set --d-* dark ground / ink / accent set (overrides theme.css's defaults) The phase hue is carried by the accent and by a 0.005–0.015 chroma trace in the neutrals — the element is legible without the page announcing it. ============================================================================ */ /* =========================================================================== 1. LIGHT TOKENS — one block per phase =========================================================================== */ html[data-phase="wood"] { --p-bg:#edf0ec; --p-surf:#f8faf7; --p-surf2:#e9ede8; --p-surf3:#dde5dd; --p-panel:#131714; --p-t1:#131714; --p-t2:#3c453e; --p-t3:#5c655e; --p-t4:#8d968f; --p-acc:#2f5d40; --p-acc2:#3d7350; --p-wen:#33566e; --p-xiu:#4a6b33; --p-yu:#55476b; --p-info:#2f5d6e; --p-good:#2f6b46; --p-bd:#dde2dc; --p-bds:#cad0c8; --p-bdacc:#b6cbbc; --p-nav:rgba(237,240,236,.88); --p-focus:rgba(47,93,64,.32); --p-yu-deep:#55476b; --p-yu-mid:#6c5c84; --p-yu-pale:#86779c; --p-yu-soft:#eef1ee; --p-yu-soft2:#e6ebe6; --p-yu-line:#d7e0d9; } html[data-phase="fire"] { --p-bg:#f0eeee; --p-surf:#fbf9f9; --p-surf2:#ece8e7; --p-surf3:#e4dcda; --p-panel:#171413; --p-t1:#171413; --p-t2:#443d3c; --p-t3:#665d5c; --p-t4:#948b89; --p-acc:#8e3028; --p-acc2:#a33c33; --p-wen:#3f5266; --p-xiu:#3f5c46; --p-yu:#5d4162; --p-info:#3a5570; --p-good:#2f6b4a; --p-bd:#e2dedd; --p-bds:#d0cac9; --p-bdacc:#d8bcb8; --p-nav:rgba(240,238,238,.88); --p-focus:rgba(142,48,40,.30); --p-yu-deep:#5d4162; --p-yu-mid:#74557a; --p-yu-pale:#8d7093; --p-yu-soft:#f1eef1; --p-yu-soft2:#eae5e7; --p-yu-line:#ded5d8; } html[data-phase="earth"] { --p-bg:#ededea; --p-surf:#f9f9f7; --p-surf2:#e9e8e2; --p-surf3:#ded9cd; --p-panel:#17150f; --p-t1:#17150f; --p-t2:#423e37; --p-t3:#625d52; --p-t4:#918c80; --p-acc:#6f5518; --p-acc2:#866729; --p-wen:#3d5262; --p-xiu:#3f5a42; --p-yu:#58466a; --p-info:#3a5570; --p-good:#35664a; --p-bd:#e0dfd8; --p-bds:#cecabf; --p-bdacc:#cfc09a; --p-nav:rgba(237,237,234,.88); --p-focus:rgba(111,85,24,.30); --p-yu-deep:#58466a; --p-yu-mid:#6f5b82; --p-yu-pale:#88769b; --p-yu-soft:#efeeea; --p-yu-soft2:#e8e6de; --p-yu-line:#dcd8cd; } html[data-phase="metal"] { --p-bg:#eef0ef; --p-surf:#fafbfa; --p-surf2:#e9ecec; --p-surf3:#dde3e3; --p-panel:#131515; --p-t1:#131515; --p-t2:#3f4646; --p-t3:#5e6565; --p-t4:#8c9494; --p-acc:#46565c; --p-acc2:#566a71; --p-wen:#3f5470; --p-xiu:#41604c; --p-yu:#574a6b; --p-info:#3a5570; --p-good:#35664a; --p-bd:#dfe2e1; --p-bds:#ccd1d0; --p-bdacc:#bcc8c9; --p-nav:rgba(238,240,239,.88); --p-focus:rgba(70,86,92,.32); --p-yu-deep:#574a6b; --p-yu-mid:#6d6083; --p-yu-pale:#86799b; --p-yu-soft:#eff1f1; --p-yu-soft2:#e7eaea; --p-yu-line:#d8dede; } html[data-phase="water"] { --p-bg:#ebeef1; --p-surf:#f8fafb; --p-surf2:#e6ebef; --p-surf3:#d9e2e9; --p-panel:#101418; --p-t1:#101418; --p-t2:#39424a; --p-t3:#59626a; --p-t4:#879099; --p-acc:#1d3f5c; --p-acc2:#2b5679; --p-wen:#33567a; --p-xiu:#34604a; --p-yu:#4e4470; --p-info:#2b5679; --p-good:#2f6b4a; --p-bd:#dae0e5; --p-bds:#c7ced4; --p-bdacc:#b3c6d5; --p-nav:rgba(235,238,241,.88); --p-focus:rgba(29,63,92,.32); --p-yu-deep:#4e4470; --p-yu-mid:#635889; --p-yu-pale:#7d73a1; --p-yu-soft:#edeff2; --p-yu-soft2:#e4e9ee; --p-yu-line:#d4dce4; } /* =========================================================================== 2. DARK TOKENS — redefine theme.css's --d-* per phase. This single block reskins every dark rule already in theme.css, articles.css and yu.css. No dark rules are repeated here. =========================================================================== */ html[data-phase="wood"][data-theme="dark"] { --d-bg:#101410; --d-bg-2:#141a14; --d-surface:#171d17; --d-surface-2:#1c241c; --d-surface-3:#223022; --d-panel:#141a14; --d-border:#222a21; --d-border-strong:#313b2f; --d-text:#e5eae4; --d-text-2:#c0c9be; --d-text-3:#929c90; --d-text-4:#798377; --d-accent:#7ea987; --d-accent-strong:#5f8c69; --d-wen:#8fa8bd; --d-xiu:#9ec39a; --d-yu:#b39dc4; --d-info:#8fb2d6; --d-good:#7cc79a; --d-nav:rgba(16,20,16,.84); --focus-ring:0 0 0 3px rgba(126,169,135,.40); } html[data-phase="fire"][data-theme="dark"] { --d-bg:#150f0e; --d-bg-2:#1a1312; --d-surface:#1d1615; --d-surface-2:#241b19; --d-surface-3:#2c211e; --d-panel:#1a1312; --d-border:#2a201e; --d-border-strong:#3b2e2b; --d-text:#ece2df; --d-text-2:#c9bcb8; --d-text-3:#9b8d89; --d-text-4:#7f736f; --d-accent:#cf7a6b; --d-accent-strong:#b25a4c; --d-wen:#94a9bd; --d-xiu:#9fb391; --d-yu:#bb9cc6; --d-info:#9db4d6; --d-good:#7fc39a; --d-nav:rgba(21,15,14,.84); --focus-ring:0 0 0 3px rgba(207,122,107,.40); } html[data-phase="earth"][data-theme="dark"] { --d-bg:#15130f; --d-bg-2:#1a1712; --d-surface:#1d1a15; --d-surface-2:#24201a; --d-surface-3:#2c271f; --d-panel:#1a1712; --d-border:#272319; --d-border-strong:#3a3426; --d-text:#eae5db; --d-text-2:#c7c0b3; --d-text-3:#979083; --d-text-4:#7c7568; --d-accent:#c2a165; --d-accent-strong:#a0813f; --d-wen:#93a8bb; --d-xiu:#9bb394; --d-yu:#b49cc2; --d-info:#9bb0d0; --d-good:#7dbf92; --d-nav:rgba(21,19,15,.84); --focus-ring:0 0 0 3px rgba(194,161,101,.40); } html[data-phase="metal"][data-theme="dark"] { --d-bg:#121415; --d-bg-2:#171a1b; --d-surface:#191c1e; --d-surface-2:#202426; --d-surface-3:#272c2e; --d-panel:#171a1b; --d-border:#242829; --d-border-strong:#333839; --d-text:#e6e9ea; --d-text-2:#c2c7c9; --d-text-3:#939a9d; --d-text-4:#7b8285; --d-accent:#a9bcc4; --d-accent-strong:#85a0aa; --d-wen:#93a9c6; --d-xiu:#9bb9a4; --d-yu:#b0a2c4; --d-info:#93a9c6; --d-good:#86bd9f; --d-nav:rgba(18,20,21,.84); --focus-ring:0 0 0 3px rgba(169,188,196,.40); } html[data-phase="water"][data-theme="dark"] { --d-bg:#0d1116; --d-bg-2:#11161c; --d-surface:#141a21; --d-surface-2:#1a222a; --d-surface-3:#212a34; --d-panel:#11161c; --d-border:#1e262f; --d-border-strong:#2c3743; --d-text:#e4eaf0; --d-text-2:#bfc9d4; --d-text-3:#8e99a6; --d-text-4:#778290; --d-accent:#6f9fc4; --d-accent-strong:#4f80a8; --d-wen:#8fb6d6; --d-xiu:#8fbfa6; --d-yu:#ac9cc8; --d-info:#8fb6e0; --d-good:#7fc39a; --d-nav:rgba(13,17,22,.84); --focus-ring:0 0 0 3px rgba(111,159,196,.40); } /* theme.css hardcodes the original dark nav/selection; make them follow. */ html[data-phase][data-theme="dark"] .oa-bg-nav { background-color:var(--d-nav) !important; } html[data-phase][data-theme="dark"] #view-yu .yu-controls { background-color:var(--d-nav) !important; } /* =========================================================================== 3. LIGHT — global tokens =========================================================================== */ html[data-phase][data-theme="light"] { --color-bg:var(--p-bg); --color-surface:var(--p-surf); --color-text:var(--p-t1); --color-text-2:var(--p-t2); --color-muted:var(--p-t3); --color-border:var(--p-bd); --color-accent:var(--p-acc); --color-accent-2:var(--p-acc2); --focus-ring:0 0 0 3px var(--p-focus); /* --oa-mark-edge is deliberately NOT set here: script.js writes it inline on #brandMedallion to match whichever mark is struck, and an inline custom property beats an inherited one. The mark is phase-locked, so the edge already follows the phase — through the logo, not through the accent. */ background:var(--p-bg); } html[data-phase][data-theme="light"] body { background:var(--p-bg); } html[data-phase][data-theme="light"] ::selection { background:var(--p-acc); color:var(--p-surf); } /* =========================================================================== 4. LIGHT — inline-style layer, via the classes theme.js assigns =========================================================================== */ html[data-phase][data-theme="light"] .oa-bg-bg { background-color:var(--p-bg) !important; } html[data-phase][data-theme="light"] .oa-bg-surf { background-color:var(--p-surf) !important; } html[data-phase][data-theme="light"] .oa-bg-surf2 { background-color:var(--p-surf2) !important; } html[data-phase][data-theme="light"] .oa-bg-surf3 { background-color:var(--p-surf3) !important; } html[data-phase][data-theme="light"] .oa-bg-panel { background-color:var(--p-panel) !important; } html[data-phase][data-theme="light"] .oa-bg-nav { background-color:var(--p-nav) !important; } /* Saturated grounds (primary buttons, chips, badges) are the same solid in both themes: every --p-* accent is deep enough to carry near-white text on either ground, so a filled button does not need a light/dark split. */ html[data-phase] .oa-bg-acc { background-color:var(--p-acc) !important; } html[data-phase] .oa-bg-acc2 { background-color:var(--p-acc2) !important; } html[data-phase] .oa-bg-wen { background-color:var(--p-wen) !important; } html[data-phase] .oa-bg-xiu { background-color:var(--p-xiu) !important; } html[data-phase] .oa-bg-yu { background-color:var(--p-yu) !important; } html[data-phase] .oa-bg-info { background-color:var(--p-info) !important; } html[data-phase][data-theme="light"] .oa-fg-t1 { color:var(--p-t1) !important; } html[data-phase][data-theme="light"] .oa-fg-t2 { color:var(--p-t2) !important; } html[data-phase][data-theme="light"] .oa-fg-t3 { color:var(--p-t3) !important; } html[data-phase][data-theme="light"] .oa-fg-t4 { color:var(--p-t4) !important; } html[data-phase][data-theme="light"] .oa-fg-acc { color:var(--p-acc) !important; } html[data-phase][data-theme="light"] .oa-fg-wen { color:var(--p-wen) !important; } html[data-phase][data-theme="light"] .oa-fg-xiu { color:var(--p-xiu) !important; } html[data-phase][data-theme="light"] .oa-fg-yu { color:var(--p-yu) !important; } html[data-phase][data-theme="light"] .oa-fg-info { color:var(--p-info) !important; } html[data-phase][data-theme="light"] .oa-fg-good { color:var(--p-good) !important; } html[data-phase][data-theme="light"] .oa-bd-bd { border-color:var(--p-bd) !important; } html[data-phase][data-theme="light"] .oa-bd-bds { border-color:var(--p-bds) !important; } html[data-phase][data-theme="light"] .oa-bd-acc { border-color:var(--p-bdacc) !important; } /* #readingProgress is handled in section 8 — motion.css owns it in both themes. */ /* =========================================================================== 5. LIGHT — proverbs 語 (yu.css tokens) The four provenance chips (sec / late / uns / oral) are deliberately left alone: they encode a property of the entry, not the site's identity, and need to stay comparable across phases. =========================================================================== */ html[data-phase][data-theme="light"] #view-yu { --yu-ink:var(--p-t1); --yu-body:var(--p-t2); --yu-mut:var(--p-t3); --yu-deep:var(--p-yu-deep); --yu-mid:var(--p-yu-mid); --yu-pale:var(--p-yu-pale); --yu-soft:var(--p-yu-soft); --yu-soft2:var(--p-yu-soft2); --yu-line:var(--p-yu-line); --yu-card:var(--p-surf); } html[data-phase][data-theme="light"] #view-yu .yu-hero { background:linear-gradient(180deg,var(--p-surf) 0%,var(--p-bg) 58%,var(--p-surf2) 100%) !important; } html[data-phase][data-theme="light"] #view-yu .yu-controls { background:var(--p-nav) !important; } html[data-phase][data-theme="light"] #view-yu .yu-search, html[data-phase][data-theme="light"] #view-yu .yu-btn, html[data-phase][data-theme="light"] #view-yu .yu-chip, html[data-phase][data-theme="light"] #view-yu .yu-select, html[data-phase][data-theme="light"] #view-yu .yu-slchip, html[data-phase][data-theme="light"] #view-yu .yu-xlink, html[data-phase][data-theme="light"] #view-yu .yu-face, html[data-phase][data-theme="light"] #view-yu .yu-cue-dot, html[data-phase][data-theme="light"] #view-yu .yu-dshare, html[data-phase][data-theme="light"] #view-yu .yu-dclose { background-color:var(--p-surf) !important; } html[data-phase][data-theme="light"] #view-yu .yu-front { background:linear-gradient(180deg,var(--p-surf) 0%,var(--p-surf2) 100%) !important; } html[data-phase][data-theme="light"] #view-yu .yu-back { background:linear-gradient(180deg,var(--p-yu-soft) 0%,var(--p-yu-soft2) 100%) !important; } html[data-phase][data-theme="light"] #view-yu .yu-dstory { background-color:var(--p-surf2) !important; } html[data-phase][data-theme="light"] #view-yu .yu-drawer { background:var(--p-surf) !important; } html[data-phase][data-theme="light"] #view-yu .yu-dhead { background:linear-gradient(180deg,var(--p-surf2),var(--p-surf)) !important; } html[data-phase][data-theme="light"] #view-yu .yu-btn-solid { background:var(--p-yu-deep) !important; border-color:var(--p-yu-deep) !important; color:var(--p-surf) !important; } html[data-phase][data-theme="light"] #view-yu .yu-btn-solid:hover { background:var(--p-yu-mid) !important; } /* =========================================================================== 6. LIGHT — companion article views (articles.css tokens) The four per-article accents set inline (--acc / --accd) are overridden: an ochre or rust accent cannot sit on a Metal or Water page. The articles stay distinguished by their 射 / 摔 / 道 / 服 glyphs, not by hue. =========================================================================== */ html[data-phase][data-theme="light"] .oa-artview { --ink:var(--p-t1); --ink2:var(--p-t1); --ink3:var(--p-t2); --mut:var(--p-t3); --bg:var(--p-bg); --surf:var(--p-surf); --surf2:var(--p-surf2); --bd:var(--p-bd); --bds:var(--p-bds); --acc:var(--p-acc) !important; /* articles.css already declares .oa-artview{background:var(--bg);color:var(--ink)}, so redefining the tokens above is enough — no second set of declarations. */ } html[data-phase][data-theme="dark"] .oa-artview { --accd:var(--d-accent) !important; } /* Share buttons carry their own inline --acc / --accd on every view, not just the article ones (articles.css derives --sh-acc from them). Same override. */ html[data-phase] .oa-share { --acc:var(--p-acc) !important; --accd:var(--d-accent) !important; } /* =========================================================================== 7. LIGHT — style drawer (style.css hardcodes light colours) =========================================================================== */ html[data-phase][data-theme="light"] #styleDrawer #sd-origin, html[data-phase][data-theme="light"] #styleDrawer #sd-desc p.dsub, html[data-phase][data-theme="light"] #styleDrawer .acc-h { color:var(--p-t1) !important; } html[data-phase][data-theme="light"] #styleDrawer #sd-desc p, html[data-phase][data-theme="light"] #styleDrawer #sd-desc li, html[data-phase][data-theme="light"] #styleDrawer .acc-b p, html[data-phase][data-theme="light"] #styleDrawer .acc-b li, html[data-phase][data-theme="light"] #styleDrawer .rel a, html[data-phase][data-theme="light"] #styleDrawer .src div { color:var(--p-t2) !important; } html[data-phase][data-theme="light"] #styleDrawer .sd-sec h3, html[data-phase][data-theme="light"] #styleDrawer .acc-h .ar, html[data-phase][data-theme="light"] #styleDrawer .rel a small, html[data-phase][data-theme="light"] #styleDrawer #sd-photo { color:var(--p-t3) !important; } html[data-phase][data-theme="light"] #styleDrawer .acc-b a, html[data-phase][data-theme="light"] #styleDrawer .acc-item.open .acc-h { color:var(--p-acc) !important; } html[data-phase][data-theme="light"] #styleDrawer .acc-h, html[data-phase][data-theme="light"] #styleDrawer .rel a { background:var(--p-surf2) !important; } html[data-phase][data-theme="light"] #styleDrawer .acc-h:hover { background:var(--p-surf3) !important; } html[data-phase][data-theme="light"] #styleDrawer .acc, html[data-phase][data-theme="light"] #styleDrawer .acc-item + .acc-item, html[data-phase][data-theme="light"] #styleDrawer .rel a, html[data-phase][data-theme="light"] #styleDrawer .src div { border-color:var(--p-bd) !important; } html[data-phase][data-theme="light"] #styleDrawer .rel a:hover, html[data-phase][data-theme="light"] #styleSearch:focus { border-color:var(--p-acc) !important; } /* =========================================================================== 8. Motion layer — #readingProgress and #oaVeil (motion.css) Both hardcode the original cinnabar with !important, in each theme separately, so each of the four combinations needs its own override. The selectors carry two attribute qualifiers, which outranks motion.css's `html.oa-motion` / `html[data-theme="dark"].oa-motion` on specificity. =========================================================================== */ /* the tapered brush stroke motion.css draws once .oa-motion is on */ html[data-phase][data-theme="light"] #readingProgress { background:linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--p-acc) 50%,transparent) 12%, var(--p-acc) 46%, var(--p-acc2) 100%) !important; box-shadow: 0 0 10px 1px color-mix(in srgb,var(--p-acc) 30%,transparent), 0 0 3px color-mix(in srgb,var(--p-acc) 55%,transparent); } html[data-phase][data-theme="dark"] #readingProgress { background:linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--d-accent) 45%,transparent) 12%, var(--d-accent) 46%, var(--d-accent-strong) 100%) !important; box-shadow: 0 0 12px 1px color-mix(in srgb,var(--d-accent) 40%,transparent), 0 0 4px color-mix(in srgb,var(--d-accent) 65%,transparent); } /* reduced motion: motion.css flattens the stroke — keep it flat, recolour it */ @media (prefers-reduced-motion: reduce) { html[data-phase][data-theme="light"] #readingProgress { background:var(--p-acc) !important; box-shadow:none; } html[data-phase][data-theme="dark"] #readingProgress { background:var(--d-accent) !important; box-shadow:none; } } /* the page-transition veil: ground, ink bleed, and the seal line riding its edge */ html[data-phase][data-theme="light"] #oaVeil::before { background:linear-gradient(180deg,transparent 0%,var(--p-bg) 100%); } html[data-phase][data-theme="dark"] #oaVeil::before { background:linear-gradient(180deg,transparent 0%,var(--d-bg) 100%); } html[data-phase][data-theme="light"] #oaVeil::after { background:var(--p-acc); box-shadow:0 0 10px 2px color-mix(in srgb,var(--p-acc) 50%,transparent); } html[data-phase][data-theme="dark"] #oaVeil::after { background:var(--d-accent); box-shadow:0 0 12px 2px color-mix(in srgb,var(--d-accent) 55%,transparent); } /* =========================================================================== 8b. Phase rollover — the solar term lands at an arbitrary clock time (13:40 local on 7 Aug 2026, for instance), so a reader can be on the page when it turns. Cross-fade the grounds rather than cutting; phase.js adds .oa-phase-shift for the duration of the change. =========================================================================== */ html.oa-phase-shift, html.oa-phase-shift body, html.oa-phase-shift [class*="oa-bg-"], html.oa-phase-shift [class*="oa-fg-"], html.oa-phase-shift [class*="oa-bd-"] { transition:background-color 1.2s var(--ease-io), color 1.2s var(--ease-io), border-color 1.2s var(--ease-io) !important; } @media (prefers-reduced-motion: reduce) { html.oa-phase-shift, html.oa-phase-shift body, html.oa-phase-shift [class*="oa-bg-"], html.oa-phase-shift [class*="oa-fg-"], html.oa-phase-shift [class*="oa-bd-"] { transition:none !important; } } /* =========================================================================== 9. Hover affordances that hardcode the original cinnabar =========================================================================== */ html[data-phase][data-theme="light"] #view-home button[onclick*="series"]:hover { box-shadow:0 14px 30px -12px var(--p-focus); } html[data-phase][data-theme="light"] .theme-toggle:hover { border-color:var(--p-acc); color:var(--p-acc); } html[data-phase][data-theme="dark"] .theme-toggle:hover { background:color-mix(in srgb,var(--d-accent) 8%,transparent) !important; }