/* ══════════════════════════════════════════════════════════════════ 星盤 Astrolabe — Mingli v2 theme (design direction 3, Claude Design handoff 2026-04). Deep midnight navy, ivory ink, gold leaf, one luminous jade. "A scientific instrument, not a horoscope." Loaded only when . Everything here OVERRIDES the compiled Ink theme: CSS variables first (component styles pick them up automatically), then the finite set of Tailwind color utilities the templates actually use. Tokens (from directions/astrolabe.jsx): bg #0B0F1E · bg2 #131A2F · glow #1B2444 ink #F2ECDC · ink2 #B8B099 · ink3 #6B6855 rule rgba(242,236,220,0.12) gold #C8A24A · goldBright #E8C870 · jade #4DD4B0 · blood #C14A4A ══════════════════════════════════════════════════════════════════ */ html[data-theme="star"] { --paper: #0B0F1E; --paper2: #131A2F; --ink: #F2ECDC; --ink2: #B8B099; --ink3: #6B6855; --rule: rgba(242,236,220,0.16); --cinnabar: #C8A24A; /* accent role: cinnabar → gold leaf */ --cinnabar2:#E8C870; --star-glow:#1B2444; --star-jade:#4DD4B0; --star-blood:#C14A4A; color-scheme: dark; } /* ── Page chrome ─────────────────────────────────────────────── */ html[data-theme="star"] body { color: var(--ink); background-color: var(--paper); background-image: radial-gradient(ellipse at 50% 28%, var(--star-glow) 0%, transparent 62%); } /* starfield grain instead of paper grain */ html[data-theme="star"] body::before { background-image: radial-gradient(rgba(242,236,220,0.10) 0.6px, transparent 0.6px); background-size: 23px 23px; opacity: 0.6; } html[data-theme="star"] .app-header { background: rgba(11,15,30,0.88); border-bottom: 1px solid var(--rule); } html[data-theme="star"] .tabbar { background: rgba(11,15,30,0.94); border-top: 1px solid var(--rule); box-shadow: none; } html[data-theme="star"] .tab { color: var(--ink3); } html[data-theme="star"] .tab.active { color: var(--star-jade); } /* ── Typography flavor ───────────────────────────────────────── */ /* Astrolabe has no brush calligraphy — display becomes weighted serif */ html[data-theme="star"] .brush { font-family: 'Noto Serif TC', serif; font-weight: 700; letter-spacing: 0.08em; } /* micro-labels go instrument-mono */ html[data-theme="star"] .inter { font-family: 'JetBrains Mono', 'Inter', monospace; letter-spacing: 0.22em; } /* ── Components ──────────────────────────────────────────────── */ html[data-theme="star"] .ink-card { background: var(--paper2); border: 1px solid var(--rule); } html[data-theme="star"] .seal-chip { background: transparent; color: var(--cinnabar); border: 1px solid var(--cinnabar); border-radius: 50%; transform: none; box-shadow: none; font-family: 'Noto Serif TC', serif; font-size: 14px; } html[data-theme="star"] .rule-label { color: var(--cinnabar); } html[data-theme="star"] .rule-label::before, html[data-theme="star"] .rule-label::after { border-top-color: var(--rule); } html[data-theme="star"] .cta-cinnabar, html[data-theme="star"] .cta-ink { background: var(--cinnabar2); color: #0B0F1E; font-family: 'Noto Serif TC', serif; font-weight: 700; letter-spacing: 0.18em; box-shadow: none; } html[data-theme="star"] .cta-cinnabar:active, html[data-theme="star"] .cta-ink:active { background: var(--cinnabar); transform: none; } html[data-theme="star"] .ink-input { background: var(--paper2); border-color: var(--rule); color: var(--ink); } html[data-theme="star"] .ink-input:focus { border-color: var(--cinnabar); } html[data-theme="star"] .body-zh { color: var(--ink2); } /* markdown (AI readings) */ html[data-theme="star"] .markdown-content { color: var(--ink); } html[data-theme="star"] .markdown-content h1 { color: var(--ink); font-family: 'Noto Serif TC', serif; font-weight: 700; } html[data-theme="star"] .markdown-content h2 { color: var(--cinnabar); font-family: 'Noto Serif TC', serif; font-weight: 700; border-bottom-color: var(--rule); } html[data-theme="star"] .markdown-content h3 { color: var(--ink); } html[data-theme="star"] .markdown-content h4 { color: var(--ink2); } html[data-theme="star"] .markdown-content strong { color: var(--star-jade); } html[data-theme="star"] .markdown-content em { color: var(--ink2); } html[data-theme="star"] .markdown-content blockquote { border-left-color: var(--cinnabar); color: var(--ink2); } html[data-theme="star"] .markdown-content code { background: var(--paper2); } html[data-theme="star"] .markdown-content hr { border-top-color: var(--rule); } html[data-theme="star"] .markdown-content table { background: var(--paper); } html[data-theme="star"] .markdown-content th, html[data-theme="star"] .markdown-content td { border-color: var(--rule); } html[data-theme="star"] .markdown-content th { background: var(--paper2); color: var(--ink); } html[data-theme="star"] .markdown-content tbody tr:nth-child(2n) td { background: var(--paper2); } /* ── Five-element glyph colors (dark-bg variants) ────────────── */ html[data-theme="star"] .elem-wood { color: #4DD4B0; } html[data-theme="star"] .elem-fire { color: #E06A5A; } html[data-theme="star"] .elem-earth { color: #C8A24A; } html[data-theme="star"] .elem-metal { color: #C0C7D4; } html[data-theme="star"] .elem-water { color: #5AAEE8; } /* ── Tailwind utility overrides (finite set used in templates) ── */ html[data-theme="star"] .text-ink { color: #F2ECDC; } html[data-theme="star"] .text-ink2 { color: #B8B099; } html[data-theme="star"] .text-ink3 { color: #8A856E; } html[data-theme="star"] .text-paper { color: #0B0F1E; } html[data-theme="star"] .text-cinnabar { color: #C8A24A; } html[data-theme="star"] .text-cinnabar2 { color: #E8C870; } html[data-theme="star"] .text-jade { color: #4DD4B0; } html[data-theme="star"] .text-gold { color: #C8A24A; } html[data-theme="star"] .text-water { color: #5AAEE8; } html[data-theme="star"] .bg-paper { background-color: #0B0F1E; } html[data-theme="star"] .bg-paper2 { background-color: #131A2F; } html[data-theme="star"] .bg-paperDk { background-color: #1B2444; } html[data-theme="star"] .bg-ink { background-color: #F2ECDC; color: #0B0F1E; } html[data-theme="star"] .bg-cinnabar { background-color: #C8A24A; } html[data-theme="star"] .bg-cinnabar\/5 { background-color: rgba(200,162,74,0.07); } html[data-theme="star"] .bg-cinnabar\/10 { background-color: rgba(200,162,74,0.12); } html[data-theme="star"] .bg-cinnabar\/15 { background-color: rgba(200,162,74,0.16); } html[data-theme="star"] .bg-jade\/10 { background-color: rgba(77,212,176,0.10); } html[data-theme="star"] .bg-jade\/15 { background-color: rgba(77,212,176,0.14); } html[data-theme="star"] .border-rule { border-color: rgba(242,236,220,0.16); } html[data-theme="star"] .border-cinnabar { border-color: #C8A24A; } html[data-theme="star"] .border-cinnabar\/30 { border-color: rgba(200,162,74,0.35); } html[data-theme="star"] .border-cinnabar\/40 { border-color: rgba(200,162,74,0.45); } html[data-theme="star"] .border-jade\/40 { border-color: rgba(77,212,176,0.45); } html[data-theme="star"] .border-gold\/40 { border-color: rgba(200,162,74,0.45); } html[data-theme="star"] .divide-rule > :not([hidden]) ~ :not([hidden]) { border-color: rgba(242,236,220,0.16); } html[data-theme="star"] .hover\:text-cinnabar:hover { color: #E8C870; } html[data-theme="star"] .hover\:bg-cinnabar:hover { background-color: #C8A24A; color: #0B0F1E; } html[data-theme="star"] .hover\:text-paper:hover { color: #0B0F1E; } html[data-theme="star"] .hover\:border-cinnabar:hover { border-color: #C8A24A; } html[data-theme="star"] .hover\:bg-paperDk:hover { background-color: #1B2444; } html[data-theme="star"] .hover\:bg-cinnabar\/10:hover { background-color: rgba(200,162,74,0.12); } /* shadows are paper-world artifacts — kill them */ html[data-theme="star"] .shadow-seal, html[data-theme="star"] .shadow-ink-flat, html[data-theme="star"] .shadow-ink-press { box-shadow: none; } /* sandbox tool (slate utilities) — keep readable on dark */ html[data-theme="star"] .bg-white { background-color: #131A2F; } html[data-theme="star"] .border-slate-200 { border-color: rgba(242,236,220,0.16); } html[data-theme="star"] .text-slate-500, html[data-theme="star"] .text-slate-400 { color: #B8B099; } html[data-theme="star"] .text-slate-700, html[data-theme="star"] .text-slate-800 { color: #F2ECDC; } html[data-theme="star"] .bg-amber-50 { background-color: rgba(200,162,74,0.12); } /* ══════════════════════════════════════════════════════════════════ Motion — the instrument comes alive. Load choreography (rings draw → spokes extend → glyphs settle), then ambient motion forever (ticks rotate, core pulses, stars twinkle, day-master halo breathes). CSS-only; transforms + opacity only (GPU-cheap); everything off under prefers-reduced-motion. ══════════════════════════════════════════════════════════════════ */ /* ── keyframes ───────────────────────────────────────────────── */ @keyframes ad-draw { to { stroke-dashoffset: 0; } } @keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ad-pop { from { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } } @keyframes ad-spin { to { transform: rotate(360deg); } } @keyframes ad-spin-r { to { transform: rotate(-360deg); } } @keyframes ad-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } @keyframes ad-breathe { 0%, 100% { opacity: 0.12; transform: scale(1); } 50% { opacity: 0.30; transform: scale(1.18); } } @keyframes ad-twinkle { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.5; } } @keyframes ad-glow-in { from { opacity: 0; } to { opacity: 1; } } @keyframes star-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes gold-sheen { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } /* ── dial: shared transform plumbing ─────────────────────────── */ .ad-dial .ad-rot-cw, .ad-dial .ad-rot-ccw, .ad-dial .ad-stem, .ad-dial .ad-branch, .ad-dial .ad-day-halo, .ad-dial .ad-core, .ad-dial .ad-core-glow { transform-box: fill-box; transform-origin: center; } .ad-dial .ad-rot-cw, .ad-dial .ad-rot-ccw { transform-box: view-box; transform-origin: 50% 50%; } /* ── load choreography ───────────────────────────────────────── */ .ad-dial .ad-glow { animation: ad-glow-in 1.4s ease-out backwards; } .ad-dial .ad-ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ad-draw 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(0.12s + var(--i, 0) * 0.14s); } .ad-dial .ad-square { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ad-draw 0.9s cubic-bezier(.4,0,.2,1) 0.7s forwards; } .ad-dial .ad-spoke-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ad-draw 0.7s cubic-bezier(.2,0,.2,1) 1.15s forwards; } .ad-dial .ad-spoke-fade { opacity: 0; animation: ad-fade 0.8s ease-out forwards; animation-delay: calc(1.05s + var(--i, 0) * 0.10s); } .ad-dial .ad-branch { opacity: 0; animation: ad-fade 0.5s ease-out forwards; animation-delay: calc(0.45s + var(--i, 0) * 0.05s); } .ad-dial .ad-stem { opacity: 0; animation: ad-pop 0.55s cubic-bezier(.34,1.4,.64,1) forwards; animation-delay: calc(1.0s + var(--i, 0) * 0.12s); } .ad-dial .ad-cross { opacity: 0; animation: ad-fade 0.6s ease-out 1.5s forwards; } /* ── ambient motion (forever) ────────────────────────────────── */ .ad-dial .ad-rot-cw { animation: ad-spin 240s linear infinite; } .ad-dial .ad-rot-ccw { animation: ad-spin-r 150s linear infinite; } .ad-dial .ad-core-glow { animation: ad-pulse 4.5s ease-in-out 1.6s infinite; } .ad-dial .ad-core { animation: ad-pulse 4.5s ease-in-out 1.6s infinite; } .ad-dial .ad-day-halo { animation: ad-breathe 3.8s ease-in-out 1.8s infinite; } .ad-dial .ad-star { opacity: 0.12; animation: ad-twinkle 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.37s); } /* ── page choreography (star theme only) ─────────────────────── */ html[data-theme="star"] main > * { animation: star-rise 0.55s cubic-bezier(.2,.6,.2,1) backwards; } html[data-theme="star"] main > :nth-child(1) { animation-delay: 0.04s; } html[data-theme="star"] main > :nth-child(2) { animation-delay: 0.10s; } html[data-theme="star"] main > :nth-child(3) { animation-delay: 0.16s; } html[data-theme="star"] main > :nth-child(4) { animation-delay: 0.22s; } html[data-theme="star"] main > :nth-child(5) { animation-delay: 0.28s; } html[data-theme="star"] main > :nth-child(6) { animation-delay: 0.34s; } html[data-theme="star"] main > :nth-child(7) { animation-delay: 0.40s; } html[data-theme="star"] main > :nth-child(8) { animation-delay: 0.46s; } html[data-theme="star"] main > :nth-child(n+9) { animation-delay: 0.52s; } /* pillar columns settle one by one inside the chart card */ html[data-theme="star"] .ink-card .divide-rule > * { animation: star-rise 0.5s cubic-bezier(.2,.6,.2,1) backwards; } html[data-theme="star"] .ink-card .divide-rule > :nth-child(1) { animation-delay: 0.30s; } html[data-theme="star"] .ink-card .divide-rule > :nth-child(2) { animation-delay: 0.42s; } html[data-theme="star"] .ink-card .divide-rule > :nth-child(3) { animation-delay: 0.54s; } html[data-theme="star"] .ink-card .divide-rule > :nth-child(4) { animation-delay: 0.66s; } /* ── micro-interactions ──────────────────────────────────────── */ html[data-theme="star"] .ink-card { transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } html[data-theme="star"] .ink-card:hover { border-color: rgba(200,162,74,0.45); box-shadow: 0 0 28px rgba(200,162,74,0.10), inset 0 0 18px rgba(200,162,74,0.04); } html[data-theme="star"] a.ink-card:hover, html[data-theme="star"] .ink-card-tap:hover { transform: translateY(-1px); } /* gold sheen sweeping across the primary CTA */ html[data-theme="star"] .cta-cinnabar, html[data-theme="star"] .cta-ink { background-image: linear-gradient(110deg, #E8C870 38%, #F8E9B8 50%, #E8C870 62%); background-size: 220% 100%; animation: gold-sheen 4.5s ease-in-out infinite; transition: filter 0.2s ease; } html[data-theme="star"] .cta-cinnabar:hover, html[data-theme="star"] .cta-ink:hover { filter: brightness(1.06); } /* tab + nav transitions */ html[data-theme="star"] .tab { transition: color 0.25s ease, transform 0.2s ease; } html[data-theme="star"] .tab:active { transform: scale(0.94); } html[data-theme="star"] nav a { transition: color 0.25s ease; } /* 大運 strip cards glide on hover */ html[data-theme="star"] .overflow-x-auto .border { transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; } html[data-theme="star"] .overflow-x-auto .border:hover { border-color: rgba(77,212,176,0.5); transform: translateY(-2px); } /* ── accessibility: kill it all on request ───────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-theme="star"] *, .ad-dial * { animation: none !important; transition: none !important; } .ad-dial .ad-ring, .ad-dial .ad-square, .ad-dial .ad-spoke-draw { stroke-dashoffset: 0; } .ad-dial .ad-branch, .ad-dial .ad-stem, .ad-dial .ad-cross, .ad-dial .ad-spoke-fade { opacity: 1; } .ad-dial .ad-star { opacity: 0.3; } }