/* ═══════════════════════════════════════════════════════════════ SACRED ORACLES — Production Stylesheet v2 Yi Jing Tu · Auspicious Feng Shui palette Ashtamangala · Auspicious Dharma palette WCAG AA compliant · HTML5 semantic · Readable ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,400&family=IM+Fell+English+SC&display=swap'); /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; } html { scroll-behavior: smooth; } /* ═══════════════════════════════════════════════════ DESIGN TOKENS — neutral landing defaults NOTE: data-theme is set on by shared.js. data-oracle is set on by index.html. Light overrides use html[data-theme="light"] body[data-oracle="..."] so that BOTH conditions must be true. ═══════════════════════════════════════════════════ */ :root { --radius-lg: 20px; --radius-md: 14px; --radius-sm: 9px; --font-body: 'Crimson Pro', Georgia, serif; --font-display: 'Cinzel', Georgia, serif; --base-font: 16.5px; --line-reading: 1.80; /* long-form text */ --line-ui: 1.50; /* labels / compact UI */ /* Neutral night — landing screen */ --gold: #c8a84b; --gold-dim: #9a7e35; --gold-mute: rgba(200, 168, 75, .15); --bg-deep: #070510; --bg-grad: radial-gradient(ellipse at 18% 28%, #180830 0%, #070510 70%); --bg-card: rgba(16, 14, 32, .93); --bg-inset: rgba(8, 7, 20, .88); --text: #ede8f5; --text-dim: #9898c0; --text-mute: #6a6a8c; /* ≥3.1:1 on dark bg */ --border: rgba(200, 168, 75, .18); } /* ═══════════════════════════════════════════════════ YI JING TU — Feng Shui Palette (dark) Vermilion · Ink-black · Jade · Rice-gold ═══════════════════════════════════════════════════ */ body[data-oracle="yijing"] { --gold: #D4AF37; /* WCAG 7.2:1 on --bg-card */ --gold-dim: #A87E20; /* WCAG 4.6:1 on --bg-card */ --gold-mute: rgba(212, 175, 55, .16); --primary: #B82018; --bg-deep: #0C0602; --bg-grad: radial-gradient(ellipse at 20% 15%, #200A04 0%, #0C0602 65%); --bg-card: rgba(24, 12, 6, .94); --bg-inset: rgba(14, 7, 3, .92); --text: #F5EAD8; /* WCAG 14:1 on --bg-card */ --text-dim: #B89878; /* WCAG 5.2:1 on --bg-card */ --text-mute: #8A6A50; /* WCAG 3.2:1 on --bg-card */ --border: rgba(180, 32, 24, .28); --accent: #2D7A50; /* jade */ --font-display: 'IM Fell English SC', 'Cinzel', serif; --ws-bar-bg: rgba(12, 6, 2, .93); } /* ═══════════════════════════════════════════════════ ASHTAMANGALA — Dharma Palette (dark) Saffron · Deep-indigo · Maroon · Temple-gold ═══════════════════════════════════════════════════ */ body[data-oracle="ashtamangala"] { --gold: #FFBE00; /* WCAG 9.1:1 on --bg-card */ --gold-dim: #C88A00; /* WCAG 4.8:1 on --bg-card */ --gold-mute: rgba(255, 190, 0, .15); --primary: #E07800; --bg-deep: #0A0514; --bg-grad: radial-gradient(ellipse at 25% 20%, #1C0830 0%, #0A0514 65%); --bg-card: rgba(20, 8, 34, .94); --bg-inset: rgba(12, 5, 22, .92); --text: #FFF5E8; /* WCAG 16:1 on --bg-card */ --text-dim: #C8A070; /* WCAG 5.5:1 on --bg-card */ --text-mute: #9A7060; /* WCAG 3.1:1 on --bg-card */ --border: rgba(224, 120, 0, .22); --accent: #8B1A2A; /* deep maroon */ --font-display: 'Cinzel', 'Crimson Pro', serif; --ws-bar-bg: rgba(10, 5, 20, .93); } /* ═══════════════════════════════════════════════════ LIGHT MODE OVERRIDES CRITICAL: data-theme lives on (set by shared.js). data-oracle lives on . We need BOTH selectors. ═══════════════════════════════════════════════════ */ /* Generic light — no oracle active (landing page) */ html[data-theme="light"] { --gold: #8a6a1c; --gold-dim: #6a5014; --gold-mute: rgba(138, 106, 28, .15); --bg-deep: #f5f3f0; --bg-grad: #f5f3f0; --bg-card: #ffffff; --bg-inset: #faf8f5; --text: #1c1814; --text-dim: #4a4434; --text-mute: #7a7060; --border: #ddd0b8; } /* Yi Jing light */ html[data-theme="light"] body[data-oracle="yijing"] { --gold: #8a6010; --gold-dim: #6a4a0c; --gold-mute: rgba(138, 96, 16, .12); --primary: #9a1810; --bg-deep: #faf3e8; --bg-grad: #faf3e8; --bg-card: #ffffff; --bg-inset: #fdf6ec; --text: #2c1a0a; /* WCAG 15:1 on white */ --text-dim: #5a3a1e; /* WCAG 7.2:1 on white */ --text-mute: #8a6040; /* WCAG 4.5:1 on white */ --border: #e0c49a; } /* Ashtamangala light */ html[data-theme="light"] body[data-oracle="ashtamangala"] { --gold: #9a6600; --gold-dim: #784e00; --gold-mute: rgba(154, 102, 0, .12); --primary: #b85e00; --bg-deep: #fff8f0; --bg-grad: #fff8f0; --bg-card: #ffffff; --bg-inset: #fffaf5; --text: #2a1408; /* WCAG 16:1 on white */ --text-dim: #5a3018; /* WCAG 7.5:1 on white */ --text-mute: #8a5a30; /* WCAG 4.5:1 on white */ --border: #e0c090; } /* ═══════════════════════════════════════════════════ BASE STYLES ═══════════════════════════════════════════════════ */ body { background: var(--bg-grad); font-family: var(--font-body); color: var(--text); min-height: 100vh; font-size: var(--base-font); line-height: var(--line-reading); transition: background .4s, color .3s; } /* ═══════════════════════════════════════════════════ ACCESSIBILITY UTILITIES ═══════════════════════════════════════════════════ */ /* Screen-reader-only content */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip navigation — visible on keyboard focus */ .skip-link { position: absolute; top: -100%; left: 1.5rem; z-index: 10001; background: var(--gold); color: #0c0b1a; padding: .6rem 1.4rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: 1px; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 0; } /* Focus ring — keyboard only, styled per tradition */ :focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .hidden { display: none !important; } /* ═══════════════════════════════════════════════════ LANDING SCREEN ═══════════════════════════════════════════════════ */ .landing-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: radial-gradient(ellipse at 18% 30%, rgba(90, 20, 10, .6) 0%, transparent 48%), radial-gradient(ellipse at 82% 70%, rgba(22, 10, 65, .6) 0%, transparent 48%), #070510; } .landing-inner { text-align: center; max-width: 900px; width: 100%; } .landing-eyebrow { font-family: var(--font-display); font-size: .68rem; letter-spacing: 6px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1rem; } .landing-title { font-family: 'Cinzel', serif; font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; background: linear-gradient(135deg, #D4AF37 0%, #c8a84b 45%, #8a7030 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 3px; margin-bottom: .55rem; line-height: 1.2; } html[data-theme="light"] .landing-title { background: linear-gradient(135deg, #8a6010 0%, #b88b20 100%); -webkit-background-clip: text; background-clip: text; } html[data-theme="light"] .landing-screen { background: radial-gradient(ellipse at 18% 30%, rgba(200, 120, 40, .12) 0%, transparent 48%), radial-gradient(ellipse at 82% 70%, rgba(100, 60, 180, .10) 0%, transparent 48%), #f5f3f0; } .landing-sub { color: var(--text-mute); font-size: 1.05rem; font-style: italic; margin-bottom: 3.2rem; } .oracle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 840px; margin: 0 auto; } /* ── Oracle choice cards ── */ .oracle-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 3rem 2rem 2.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; font-family: var(--font-body); font-size: 1rem; border: 1px solid transparent; transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .25s; } .oracle-card[data-oracle="yijing"] { color: #F5EAD8; background: linear-gradient(155deg, rgba(28, 12, 5, .97), rgba(18, 8, 3, .99)); border-color: rgba(180, 32, 24, .38); box-shadow: 0 4px 32px rgba(180, 32, 24, .14), inset 0 1px 0 rgba(212, 175, 55, .12); } .oracle-card[data-oracle="yijing"]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(184, 32, 24, .22) 0%, transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(45, 122, 80, .10) 0%, transparent 40%); pointer-events: none; } .oracle-card[data-oracle="yijing"]:hover { transform: translateY(-6px); box-shadow: 0 20px 55px rgba(180, 32, 24, .28), 0 0 0 1px rgba(212, 175, 55, .32); border-color: rgba(212, 175, 55, .40); } .oracle-card[data-oracle="ashtamangala"] { color: #FFF5E8; background: linear-gradient(155deg, rgba(28, 8, 46, .97), rgba(18, 5, 30, .99)); border-color: rgba(224, 120, 0, .38); box-shadow: 0 4px 32px rgba(224, 120, 0, .14), inset 0 1px 0 rgba(255, 190, 0, .12); } .oracle-card[data-oracle="ashtamangala"]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(224, 120, 0, .22) 0%, transparent 55%), radial-gradient(ellipse at 80% 85%, rgba(139, 26, 42, .12) 0%, transparent 40%); pointer-events: none; } .oracle-card[data-oracle="ashtamangala"]:hover { transform: translateY(-6px); box-shadow: 0 20px 55px rgba(224, 120, 0, .28), 0 0 0 1px rgba(255, 190, 0, .32); border-color: rgba(255, 190, 0, .40); } html[data-theme="light"] .oracle-card[data-oracle="yijing"] { color: #2C1A0A; background: linear-gradient(155deg, #fff7ee, #fdf0e0); border-color: rgba(180, 32, 24, .30); box-shadow: 0 4px 24px rgba(180, 32, 24, .10); } html[data-theme="light"] .oracle-card[data-oracle="ashtamangala"] { color: #2A1408; background: linear-gradient(155deg, #fff8f0, #fff2e5); border-color: rgba(224, 120, 0, .30); box-shadow: 0 4px 24px rgba(224, 120, 0, .10); } .oc-glyph { font-size: 3.8rem; line-height: 1; display: block; margin-bottom: .6rem; } .oracle-card[data-oracle="yijing"] .oc-glyph { filter: drop-shadow(0 0 16px rgba(184, 32, 24, .7)); } .oracle-card[data-oracle="ashtamangala"] .oc-glyph { filter: drop-shadow(0 0 16px rgba(224, 120, 0, .7)); } .oc-name { font-family: 'Cinzel', serif; font-size: 1.22rem; font-weight: 700; display: block; letter-spacing: 1px; } .oracle-card[data-oracle="yijing"] .oc-name { color: #D4AF37; } .oracle-card[data-oracle="ashtamangala"] .oc-name { color: #FFBE00; } html[data-theme="light"] .oracle-card[data-oracle="yijing"] .oc-name { color: #8a6010; } html[data-theme="light"] .oracle-card[data-oracle="ashtamangala"] .oc-name { color: #9a6600; } .oc-native { font-size: 1.05rem; color: rgba(160, 160, 220, .6); display: block; margin-bottom: .1rem; letter-spacing: 3px; } .oc-tagline { font-size: .82rem; color: rgba(255, 255, 255, .35); display: block; font-style: italic; margin-bottom: .5rem; } html[data-theme="light"] .oc-native { color: rgba(100, 80, 60, .55); } html[data-theme="light"] .oc-tagline { color: rgba(60, 40, 20, .45); } .oc-enter { display: block; margin-top: 1.4rem; font-size: .72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, .25); font-family: var(--font-display); transition: color .2s; } .oracle-card[data-oracle="yijing"]:hover .oc-enter { color: #D4AF37; } .oracle-card[data-oracle="ashtamangala"]:hover .oc-enter { color: #FFBE00; } html[data-theme="light"] .oracle-card[data-oracle="yijing"]:hover .oc-enter { color: #8a6010; } html[data-theme="light"] .oracle-card[data-oracle="ashtamangala"]:hover .oc-enter { color: #9a6600; } /* ═══════════════════════════════════════════════════ WORKSPACE ═══════════════════════════════════════════════════ */ .workspace { display: flex; flex-direction: column; min-height: 100vh; } /* ── Header bar ── */ .ws-bar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.6rem; background: var(--ws-bar-bg, rgba(6, 4, 14, .93)); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); transition: background .4s, border-color .4s; } html[data-theme="light"] .ws-bar { background: rgba(255, 255, 255, .92); } .ws-title { flex: 1; font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--gold); letter-spacing: 1.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-tabs { display: flex; gap: .4rem; align-items: center; } .ws-tab { background: transparent; border: 1px solid transparent; color: var(--text-mute); padding: .32rem 1rem; border-radius: 30px; cursor: pointer; font-size: .82rem; font-family: var(--font-body); transition: all .18s; white-space: nowrap; } .ws-tab:hover { border-color: var(--gold-mute); color: var(--text-dim); } .ws-tab.active { border-color: var(--gold-dim); background: var(--gold-mute); color: var(--gold); } .btn-ghost { background: rgba(16, 14, 30, .8); border: 1px solid var(--border); color: var(--gold-dim); font-weight: 600; } .btn-ghost:hover { border-color: var(--gold-dim); color: var(--gold); } html[data-theme="light"] .btn-ghost { background: rgba(255, 255, 255, .9); } .back-btn { font-size: .8rem; padding: .3rem 1rem; border-radius: 30px; white-space: nowrap; } .btn-icon { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; color: var(--text); transition: background .18s; flex-shrink: 0; } .btn-icon:hover { background: var(--bg-inset); } /* ═══════════════════════════════════════════════════ ORACLE PANE WRAPPER ═══════════════════════════════════════════════════ */ .oracle-pane { flex: 1; padding: 1.5rem 1.8rem 3rem; max-width: 1400px; margin: 0 auto; width: 100%; } /* ═══════════════════════════════════════════════════ CARDS & FORM ELEMENTS ═══════════════════════════════════════════════════ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; } .result-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; margin-bottom: .9rem; animation: floatUp .5s ease forwards; } .result-card:last-child { margin-bottom: 0; } .result-card:empty { display: none; } /* Dynamic content inside result cards uses h4 (injected by JS) */ .result-card h4 { font-family: var(--font-display); font-size: .76rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: .65rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border); } .result-card h5 { color: var(--text-dim); margin-bottom: .4rem; font-size: .95rem; font-style: italic; line-height: var(--line-ui); } .result-card p { margin: .4rem 0; font-size: 1rem; color: var(--text-dim); line-height: var(--line-reading); } .result-card strong { color: var(--text); } /* Input card heading — uses

in HTML / .input-card__title { font-family: var(--font-display); font-size: .84rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; } / Form controls / .input-label { display: block; font-family: var(--font-display); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: .4rem; } .form-hint { font-size: .82rem; color: var(--text-mute); margin-top: .3rem; font-style: italic; line-height: var(--line-ui); } .optional-tag { font-size: .75rem; color: var(--text-mute); font-style: italic; margin-left: .25rem; } textarea { width: 100%; background: var(--bg-inset); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm); padding: 10px 14px; color: var(--text); font-family: var(--font-body); font-size: 1rem; resize: vertical; min-height: 68px; display: block; line-height: 1.65; transition: border-color .2s, box-shadow .2s; } textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-mute); } textarea::placeholder { color: var(--text-mute); } button { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); border: none; padding: 10px 26px; border-radius: 30px; font-weight: 700; font-size: .88rem; cursor: pointer; color: #0c0b1a; font-family: var(--font-body); letter-spacing: .3px; transition: opacity .15s, transform .1s, box-shadow .15s; } button:hover { opacity: .9; box-shadow: 0 4px 22px var(--gold-mute); } button:active { transform: scale(.97); } select { flex: 1; background: var(--bg-inset); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); font-family: var(--font-body); font-size: .85rem; min-width: 0; } select:focus { outline: 2.5px solid var(--gold); outline-offset: 2px; } input[type="text"], input[type="datetime-local"] { background: var(--bg-inset); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm); padding: 4px 9px; color: var(--text); font-size: .84rem; font-family: var(--font-body); } input[type="checkbox"] { accent-color: var(--gold); width: 1rem; height: 1rem; cursor: pointer; } .row-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; } .history-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; background: rgba(8, 7, 20, .5); border-radius: var(--radius-sm); font-size: .82rem; color: var(--text-mute); margin-top: .5rem; flex-wrap: wrap; } .history-row label { white-space: nowrap; font-weight: 600; } html[data-theme="light"] .history-row { background: rgba(0, 0, 0, .04); } / ═══════════════════════════════════════════════════ YI JING — Layout ═══════════════════════════════════════════════════ / .yj-top-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.2rem; align-items: start; } .yj-col { display: flex; flex-direction: column; gap: .8rem; } .yj-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; align-items: stretch; } / Hexagram lines / .hexagram-lines { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; margin: .9rem 0 1.1rem; } .line { width: 90px; height: 8px; background: var(--gold); border-radius: 4px; } .line.yin { background: transparent; display: flex; gap: 10px; justify-content: space-between; } .line.yin::before, .line.yin::after { content: ''; width: 38px; height: 8px; background: var(--gold); border-radius: 4px; } / Changing lines in vermilion — auspicious fire / body[data-oracle="yijing"] .line.changing { background: #B82018; } body[data-oracle="yijing"] .line.changing::before, body[data-oracle="yijing"] .line.changing::after { background: #B82018; } .line-comment-item { margin: .5rem 0; border-left: 2px solid var(--gold-dim); padding-left: .85rem; font-size: .95rem; line-height: 1.65; } .line-comment-item strong { color: var(--gold-dim); font-family: var(--font-display); font-size: .76rem; letter-spacing: .5px; } #yjHexagramHeader h3 { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; margin: .4rem 0 .2rem; letter-spacing: 1px; } #yjHexagramHeader p { font-size: .9rem; color: var(--text-dim); line-height: var(--line-ui); } / ═══════════════════════════════════════════════════ ASHTAMANGALA — Layout ═══════════════════════════════════════════════════ / .reading-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.15fr); gap: 1.5rem; margin-bottom: 1.5rem; align-items: stretch; } .chart-wrapper { position: relative; aspect-ratio: 1 / 1; width: 100%; max-height: 600px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: .8rem; } .chart-wrapper canvas { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); } / Legacy layout helpers / .chart-wrap { aspect-ratio: 1/1; width: 100%; max-width: 650px; margin: 0 auto; padding: .8rem; display: flex; justify-content: center; align-items: center; } .chart-wrap canvas { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); } / ═══════════════════════════════════════════════════ TYPOGRAPHY HIERARCHY ═══════════════════════════════════════════════════ / .prominent-text h4 { font-family: var(--font-display); font-size: .8rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); padding-bottom: .6rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .prominent-text h5 { font-size: 1.2rem; color: var(--text); margin-bottom: 1rem; font-style: italic; line-height: 1.45; } .prominent-text p { font-size: 1.08rem; line-height: var(--line-reading); margin-bottom: 1rem; color: var(--text); } .prominent-text strong { color: var(--gold-dim); } / Narrative — full-width article reading / .narrative-container { margin-bottom: 2rem; display: none; / unhidden by JS / max-width: 920px; } .narrative-container h4 { font-family: var(--font-display); font-size: .8rem; letter-spacing: 2.5px; text-transform: uppercase; text-align: center; color: var(--gold); border-bottom: 1px solid var(--border); padding-bottom: .8rem; margin-bottom: 1.8rem; } .narrative-container h5 { font-family: var(--font-display); font-size: .9rem; letter-spacing: 1px; color: var(--text-dim); text-align: center; margin-bottom: 2rem; font-weight: 400; font-style: italic; } .narrative-section { margin-bottom: 2.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .narrative-section:last-of-type { border-bottom: none; } .narrative-section strong.section-title { font-family: var(--font-display); font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .7rem; } .narrative-section em.rishi-tag { color: var(--text-mute); font-size: .68rem; display: block; margin-bottom: .3rem; font-style: normal; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 3px; } .narrative-section p { font-size: 1.02rem; line-height: var(--line-reading); margin-bottom: .85rem; color: var(--text-dim); } / Lagna info strip / .lagna-panel { font-size: .85rem; color: var(--text-dim); line-height: 2; margin-top: .5rem; } .lagna-panel strong { color: var(--gold-dim); font-family: var(--font-display); font-size: .74rem; letter-spacing: .5px; } / Planet & association grids / .planet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem; margin-top: .5rem; } .planet-item { font-size: .88rem; color: var(--text-dim); padding: .3rem .5rem; background: rgba(0, 0, 0, .2); border-radius: 6px; border-left: 2px solid var(--gold-dim); } .association-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem; margin-top: .5rem; } .association-item { font-size: .82rem; color: var(--text-dim); padding: .3rem .5rem; background: rgba(0, 0, 0, .2); border-radius: 6px; text-align: center; } / ═══════════════════════════════════════════════════ TECHNICAL DRAWER ═══════════════════════════════════════════════════ / .tech-drawer { background: rgba(8, 7, 20, .36); border: 1px dashed var(--border); border-radius: var(--radius-md); padding: .8rem 1rem; margin-bottom: 1.5rem; } html[data-theme="light"] .tech-drawer { background: rgba(0, 0, 0, .03); } .tech-drawer>summary { cursor: pointer; list-style: none; color: var(--text-mute); text-align: center; padding: .4rem; font-size: .74rem; font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; user-select: none; display: flex; align-items: center; justify-content: center; gap: .5rem; } .tech-drawer>summary::-webkit-details-marker { display: none; } .tech-drawer>summary:hover { color: var(--gold); } .tech-drawer[open]>summary { border-bottom: 1px solid var(--border); margin-bottom: 1rem; padding-bottom: .8rem; color: var(--gold-dim); } .tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } / ═══════════════════════════════════════════════════ BAZI / ASTROLOGY COMPONENTS ═══════════════════════════════════════════════════ / .bazi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: .6rem; } .pillar { background: rgba(0, 0, 0, .3); border-radius: 10px; padding: .5rem .4rem; text-align: center; } .pillar-label { font-size: .58rem; text-transform: uppercase; color: var(--text-mute); letter-spacing: 1.5px; font-family: var(--font-display); } .stem-branch { font-size: 1.1rem; font-weight: 700; margin: 4px 0; letter-spacing: 2px; } .element-badge { font-size: .6rem; padding: 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, .4); display: inline-block; } .wood { color: #6a994e; } .fire { color: #c05030; } .earth { color: #d4a373; } .metal { color: #b8b8cc; } .water { color: #4a8faf; } / ═══════════════════════════════════════════════════ LOADING ═══════════════════════════════════════════════════ / .loading-text { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: .9rem; padding: .5rem 0; font-style: italic; } .loading { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .12); border-top-color: var(--gold); border-radius: 50%; animation: spin .75s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes floatUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } / ═══════════════════════════════════════════════════ LOCATION CONTROLS ═══════════════════════════════════════════════════ / .loc-details { font-size: .85rem; } .loc-details>summary { cursor: pointer; list-style: none; color: var(--text-mute); padding: .3rem 0; display: flex; align-items: center; gap: .3rem; } .loc-details>summary::-webkit-details-marker { display: none; } .loc-details[open]>summary { color: var(--gold-dim); } .ctrl-row { display: flex; flex-direction: column; gap: .5rem; padding: .6rem 0 .2rem .5rem; } .ctrl-row label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--text-dim); } .manual-loc { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding-top: .3rem; } .manual-loc label { font-size: .82rem; } .manual-loc input { width: 90px; } .check-label { cursor: pointer; } / ═══════════════════════════════════════════════════ FULLSCREEN CHART MODAL ═══════════════════════════════════════════════════ / .chart-wrap-container { position: relative; } .fullscreen-btn { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, .65); color: #fff; border: none; padding: 5px 12px; border-radius: 20px; font-size: .75rem; cursor: pointer; z-index: 10; backdrop-filter: blur(4px); font-family: var(--font-display); letter-spacing: .5px; transition: background .2s, color .2s; } .fullscreen-btn:hover { background: var(--gold); color: #0c0b1a; } .fullscreen-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .94); z-index: 9999; display: flex; justify-content: center; align-items: center; padding: 2rem; } .fullscreen-modal.hidden { display: none !important; } .modal-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .modal-content canvas { max-height: 95vh; max-width: 95vw; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .8); } .close-modal { position: absolute; top: 20px; right: 30px; background: transparent; color: #fff; border: none; font-size: 2.5rem; cursor: pointer; z-index: 10000; transition: color .2s; } .close-modal:hover { color: var(--gold); } / ═══════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════ / footer { text-align: center; padding: 1.2rem; font-size: .65rem; color: var(--text-mute); border-top: 1px solid rgba(255, 255, 255, .04); margin-top: auto; font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; } html[data-theme="light"] footer { border-top-color: var(--border); } / ═══════════════════════════════════════════════════ LEGACY / ADAPTIVE HELPERS ═══════════════════════════════════════════════════ / .adaptive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; align-items: start; } .flex-col { display: flex; flex-direction: column; gap: 1.2rem; } .ashta-top { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; } .ashta-middle { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .ashta-bottom { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ashta-info { display: flex; flex-direction: column; } / ═══════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS ═══════════════════════════════════════════════════ / @media (max-width: 1200px) { .yj-top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 1.2rem; } .ashta-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } } @media (max-width: 900px) { .yj-bottom-grid, .reading-layout { grid-template-columns: 1fr; } .ashta-middle, .ashta-bottom { grid-template-columns: 1fr; } .chart-wrapper { max-height: 500px; } .bazi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .yj-top-grid { grid-template-columns: 1fr; gap: 1rem; } .ashta-top { grid-template-columns: 1fr; } .oracle-grid { grid-template-columns: 1fr; gap: 1rem; } } @media (max-width: 600px) { .oracle-pane { padding: .8rem .7rem 2rem; } .card { padding: 1rem .9rem; } .manual-loc { flex-direction: column; } .chart-wrapper { max-height: none; padding: .3rem; border: none; } .landing-title { font-size: 2.2rem; } .oc-glyph { font-size: 3.2rem; } .oracle-card { padding: 2.2rem 1.2rem 2rem; } .ws-tab { font-size: .75rem; padding: .28rem .65rem; } .ws-bar { padding: .5rem .9rem; } } / ═══════════════════════════════════════════════════ AUTH — Landing sign-in button ═══════════════════════════════════════════════════ / .landing-auth-btn { position: absolute; top: 1.4rem; right: 1.8rem; padding: .42rem 1.3rem; border-radius: 30px; font-size: .78rem; font-family: var(--font-display); letter-spacing: 1px; z-index: 10; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } html[data-theme="light"] .landing-auth-btn { background: rgba(255, 255, 255, .9); } .ws-auth-btn { padding: .32rem 1.1rem; border-radius: 30px; font-size: .78rem; font-family: var(--font-display); letter-spacing: 1px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } / ═══════════════════════════════════════════════════ AUTH — Modal overlay ═══════════════════════════════════════════════════ / .auth-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10000; animation: authFadeIn .18s ease; } .auth-overlay.hidden { display: none !important; } @keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes authSlideUp { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } / ═══════════════════════════════════════════════════ AUTH — Modal card ═══════════════════════════════════════════════════ / .auth-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; width: min(440px, calc(100vw - 2rem)); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(200, 168, 75, .08), inset 0 1px 0 rgba(255, 255, 255, .04); animation: authSlideUp .24s cubic-bezier(.22, .8, .3, 1); overflow: hidden; } .auth-modal.hidden { display: none !important; } html[data-theme="light"] .auth-modal { background: #ffffff; box-shadow: 0 30px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06); } / Close button / .auth-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--text-mute); cursor: pointer; padding: 0; line-height: 1; transition: color .15s, border-color .15s, background .15s; z-index: 2; } .auth-close:hover { color: var(--text); border-color: var(--gold-dim); background: var(--bg-inset); } / Inner container / .auth-modal-inner { padding: 2.4rem 2rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; } / Header / .auth-header { text-align: center; } .auth-glyph { display: block; font-size: 2.6rem; margin-bottom: .5rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(200, 168, 75, .55)); animation: authGlyphPulse 4s ease-in-out infinite; } @keyframes authGlyphPulse { 0%, 100% { filter: drop-shadow(0 0 18px rgba(200, 168, 75, .55)); } 50% { filter: drop-shadow(0 0 30px rgba(200, 168, 75, .85)); } } .auth-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: 2px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: .25rem; } html[data-theme="light"] .auth-title { background: linear-gradient(135deg, #8a6010 0%, #b88b20 100%); -webkit-background-clip: text; background-clip: text; } .auth-subtitle { font-size: .85rem; color: var(--text-mute); font-style: italic; } / ── Google button ── / .auth-google-btn { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .72rem 1.2rem; font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s, transform .1s; letter-spacing: .2px; } .auth-google-btn:hover { background: var(--bg-card); border-color: var(--gold-dim); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); transform: translateY(-1px); opacity: 1; } .auth-google-btn:active { transform: scale(.98); } html[data-theme="light"] .auth-google-btn { background: #f8f8f8; border-color: #ddd; color: #1c1814; } html[data-theme="light"] .auth-google-btn:hover { background: #fff; border-color: #bbb; } .auth-google-icon { width: 20px; height: 20px; flex-shrink: 0; } / ── Divider ── / .auth-divider { display: flex; align-items: center; gap: .75rem; margin: -.15rem 0; } .auth-divider-line { flex: 1; height: 1px; background: var(--border); } .auth-divider-text { font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-mute); font-family: var(--font-display); } / ── Email / Password fields ── / .auth-fields { display: flex; flex-direction: column; gap: .65rem; } .auth-field { display: flex; flex-direction: column; gap: .3rem; } .auth-label { font-family: var(--font-display); font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); } .auth-input { width: 100%; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .62rem .9rem; color: var(--text); font-family: var(--font-body); font-size: 1rem; transition: border-color .18s, box-shadow .18s; line-height: 1.5; } .auth-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-mute); } .auth-input::placeholder { color: var(--text-mute); } html[data-theme="light"] .auth-input { background: #faf8f5; border-color: #ddd0b8; } html[data-theme="light"] .auth-input:focus { border-color: var(--gold); } / ── Status msg ── / .auth-msg { font-size: .84rem; min-height: 1.2em; text-align: center; border-radius: var(--radius-sm); padding: .1rem 0; transition: color .2s; } .auth-msg:empty { display: none; } .auth-msg--error { color: #e05050; } .auth-msg--ok { color: #50b88a; } / ── Action buttons ── / .auth-actions { display: flex; gap: .6rem; flex-direction: column; } .auth-primary-btn { width: 100%; padding: .75rem 1.5rem; border-radius: var(--radius-md); font-size: .95rem; font-weight: 700; letter-spacing: .5px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%); color: #0c0b1a; border: none; cursor: pointer; transition: opacity .15s, transform .1s, box-shadow .15s; font-family: var(--font-body); } .auth-primary-btn:hover { opacity: .92; box-shadow: 0 6px 24px var(--gold-mute); transform: translateY(-1px); } .auth-primary-btn:active { transform: scale(.97); } .auth-primary-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } .auth-secondary-btn { width: 100%; padding: .65rem 1.5rem; border-radius: var(--radius-md); font-size: .9rem; text-align: center; } .auth-secondary-btn:disabled { opacity: .6; cursor: not-allowed; } / ── Footer note ── / .auth-footer-note { font-size: .72rem; color: var(--text-mute); text-align: center; line-height: 1.5; } .auth-footer-note a { color: var(--gold-dim); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s, color .15s; } .auth-footer-note a:hover { color: var(--gold); text-decoration-color: var(--gold-dim); } / ── Responsive tweaks ── / @media (max-width: 480px) { .auth-modal-inner { padding: 2rem 1.3rem 1.6rem; } .landing-auth-btn { top: .9rem; right: .9rem; font-size: .72rem; padding: .36rem 1rem; } } / ═══════════════════════════════════════════════════ TAROT ORACLE — Mystic Violet Palette (dark) Amethyst · Deep Indigo · Silver-Lavender ═══════════════════════════════════════════════════ / body[data-oracle="tarot"] { --gold: #C8A4FF; / lavender-silver — WCAG 7.8:1 on --bg-card / --gold-dim: #9470CC; / mid amethyst — WCAG 4.5:1 on --bg-card / --gold-mute: rgba(200, 164, 255, .15); --primary: #7B2EBF; / deep violet / --bg-deep: #06030E; --bg-grad: radial-gradient(ellipse at 22% 18%, #160430 0%, #06030E 65%); --bg-card: rgba(16, 6, 30, .95); --bg-inset: rgba(10, 4, 20, .92); --text: #F0EBFF; / WCAG 14:1 on --bg-card / --text-dim: #B090D8; / WCAG 5.0:1 on --bg-card / --text-mute: #7A5898; / WCAG 3.1:1 on --bg-card / --border: rgba(123, 46, 191, .30); --accent: #3B1F7A; / deep indigo / --ws-bar-bg: rgba(6, 3, 14, .93); --tarot-major: #C8A4FF; / major arcana accent / } / Tarot light / html[data-theme="light"] body[data-oracle="tarot"] { --gold: #6830B0; --gold-dim: #501888; --gold-mute: rgba(104, 48, 176, .12); --primary: #7B2EBF; --bg-deep: #faf5ff; --bg-grad: #faf5ff; --bg-card: #ffffff; --bg-inset: #fdf7ff; --text: #180830; --text-dim: #4a2880; --text-mute: #7a5898; --border: #d8b8f0; --tarot-major: #7B2EBF; } / ── Tarot landing oracle card ── / .oracle-card[data-oracle="tarot"] { color: #F0EBFF; background: linear-gradient(155deg, rgba(22, 4, 48, .97), rgba(14, 2, 30, .99)); border-color: rgba(123, 46, 191, .42); box-shadow: 0 4px 32px rgba(123, 46, 191, .18), inset 0 1px 0 rgba(200, 164, 255, .12); } .oracle-card[data-oracle="tarot"]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(123, 46, 191, .28) 0%, transparent 55%), radial-gradient(ellipse at 80% 88%, rgba(59, 31, 122, .16) 0%, transparent 40%); pointer-events: none; } .oracle-card[data-oracle="tarot"]:hover { transform: translateY(-6px); box-shadow: 0 20px 55px rgba(123, 46, 191, .35), 0 0 0 1px rgba(200, 164, 255, .35); border-color: rgba(200, 164, 255, .42); } .oracle-card[data-oracle="tarot"] .oc-glyph { filter: drop-shadow(0 0 18px rgba(200, 164, 255, .75)); } .oracle-card[data-oracle="tarot"] .oc-name { color: #C8A4FF; } html[data-theme="light"] .oracle-card[data-oracle="tarot"] { color: #180830; background: linear-gradient(155deg, #faf5ff, #f5eeff); border-color: rgba(104, 48, 176, .30); box-shadow: 0 4px 24px rgba(104, 48, 176, .12); } html[data-theme="light"] .oracle-card[data-oracle="tarot"] .oc-name { color: #6830B0; } .oracle-card[data-oracle="tarot"]:hover .oc-enter { color: #C8A4FF; } html[data-theme="light"] .oracle-card[data-oracle="tarot"]:hover .oc-enter { color: #6830B0; } / ═══════════════════════════════════════════════════ TAROT UI — Controls ═══════════════════════════════════════════════════ / .tarot-controls { align-items: flex-end; flex-wrap: wrap; gap: .8rem; } .tarot-select-wrap, .tarot-passes-wrap { display: flex; flex-direction: column; gap: .25rem; } .tarot-passes-row { display: flex; align-items: center; gap: .35rem; } .tarot-stepper { padding: .28rem .7rem !important; font-size: 1rem; line-height: 1; border-radius: var(--radius-sm) !important; min-width: 2rem; } .tarot-status { font-size: .85rem; color: var(--text-mute); font-style: italic; margin-top: .6rem; min-height: 1.4em; transition: color .2s; } .tarot-status.casting { color: var(--gold-dim); } .tarot-status.error { color: #e04444; font-style: normal; } / ═══════════════════════════════════════════════════ TAROT SPREAD BOARD ═══════════════════════════════════════════════════ / .tarot-spread-board { margin-top: 1.4rem; } / ── Three-Card Layout ── / .tarot-three-grid { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; } / ── Celtic Cross Layout ── / / Grid map (standard Rider-Waite orientation): Columns: staff-left · cross-col · staff-right The cross occupies a 3×3 area in columns 1-3; the staff runs down column 4. Visual: [crown/above] [staff-1] [left][center][right] [staff-2] [cross] [staff-3] [below/foundation] [staff-4] / .tarot-celtic-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 0.15fr 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: ". above . gap staff_1" "left center right gap staff_2" ". cross . gap staff_3" ". below . gap staff_4"; gap: .9rem; max-width: 900px; margin: 0 auto; } / Map JS dataset role → CSS grid-area / .tarot-card-tile[data-grid-area="above"] { grid-area: above; } .tarot-card-tile[data-grid-area="left"] { grid-area: left; } .tarot-card-tile[data-grid-area="center"] { grid-area: center; } .tarot-card-tile[data-grid-area="right"] { grid-area: right; } .tarot-card-tile[data-grid-area="cross"] { grid-area: cross; } .tarot-card-tile[data-grid-area="below"] { grid-area: below; } .tarot-card-tile[data-grid-area="staff-1"] { grid-area: staff_1; } .tarot-card-tile[data-grid-area="staff-2"] { grid-area: staff_2; } .tarot-card-tile[data-grid-area="staff-3"] { grid-area: staff_3; } .tarot-card-tile[data-grid-area="staff-4"] { grid-area: staff_4; } / gap column (visual breathing room between cross and staff) / .tarot-celtic-grid::before { content: ''; grid-area: gap; display: block; } / ── Card Tile ── / .tarot-card-tile { perspective: 900px; min-height: 180px; } @media (max-width: 700px) { .tarot-card-tile { min-height: 150px; } } .tc-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .85rem .9rem .7rem; transform-origin: center center; transform: rotateY(90deg); opacity: 0; transition: transform .55s cubic-bezier(.22, .8, .3, 1), opacity .35s ease, box-shadow .25s; box-shadow: 0 3px 18px rgba(0, 0, 0, .35); transition-delay: var(--reveal-delay, 0ms); } / Vertical accent line — archetype colour / .tc-inner::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; background: var(--gold-dim); border-radius: 2px; opacity: .45; } .tarot-card-tile.tc-revealed .tc-inner { transform: rotateY(0deg); opacity: 1; } .tarot-card-tile.tc-revealed .tc-inner:hover { box-shadow: 0 8px 32px rgba(123, 46, 191, .22), 0 0 0 1px var(--gold-mute); transform: rotateY(0deg) translateY(-3px); } .tc-pos-label { font-family: var(--font-display); font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: .55rem; } .tc-glyph { font-size: 2rem; line-height: 1; margin-bottom: .35rem; display: block; } .tc-name { font-family: var(--font-display); font-size: .88rem; font-weight: 700; letter-spacing: .5px; margin-bottom: .2rem; line-height: 1.2; } .tc-arcana { font-size: .72rem; color: var(--text-mute); font-style: italic; margin-bottom: .5rem; } .tc-keywords { display: flex; flex-wrap: wrap; gap: .28rem; } .tc-keywords span { font-size: .66rem; background: var(--gold-mute); color: var(--gold-dim); border-radius: 30px; padding: .12rem .5rem; white-space: nowrap; font-family: var(--font-display); letter-spacing: .8px; text-transform: uppercase; } .tc-pos-desc { font-size: .74rem; color: var(--text-mute); font-style: italic; margin-top: .6rem; line-height: 1.45; border-top: 1px solid var(--border); padding-top: .5rem; } / Celtic cross "crossing" card — slight rotate indicate it crosses / .tarot-card-tile[data-grid-area="cross"] .tc-inner { border-color: rgba(200, 164, 255, .38); background: linear-gradient(135deg, var(--bg-card), var(--bg-inset)); } / Center card — slightly larger presence / .tarot-card-tile[data-grid-area="center"] .tc-inner { border-color: var(--gold-dim); box-shadow: 0 0 0 1px var(--gold-mute), 0 4px 22px rgba(0, 0, 0, .4); } / ═══════════════════════════════════════════════════ TAROT INTERPRETATION ARTICLE ═══════════════════════════════════════════════════ / .tarot-interpretation { margin-top: 1.6rem; max-width: 860px; } .tarot-headline { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; font-style: italic; color: var(--gold); text-align: center; margin: .6rem 0 1.6rem; line-height: 1.4; } .tarot-pos-block { margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); } .tarot-pos-block:last-of-type { border-bottom: none; } .tarot-pos-header { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; } .tarot-pos-num { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: 2px; color: var(--gold); background: var(--gold-mute); border-radius: 50%; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tarot-pos-label { font-family: var(--font-display); font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .tarot-pos-card { font-size: .9rem; font-style: italic; color: var(--gold-dim); } .tarot-synthesis { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .tarot-invitation { margin-top: 1.4rem; padding: .9rem 1.1rem; background: var(--gold-mute); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm); font-size: 1rem; font-style: italic; line-height: 1.65; color: var(--text); } .tarot-invitation span { font-family: var(--font-display); font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-right: .4rem; font-style: normal; } / ── Celtic grid responsive ── / @media (max-width: 760px) { .tarot-celtic-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "above above above" "left center right" "cross cross cross" "below below below" "staff_1 staff_2 staff_3" "staff_4 staff_4 staff_4"; gap: .7rem; } } @media (max-width: 440px) { .tarot-celtic-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "above above" "center center" "cross cross" "left right" "below below" "staff_1 staff_2" "staff_3 staff_4"; } } / landing grid — 3 columns when tarot card added / @media (min-width: 640px) { .oracle-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 639px) { .oracle-grid { grid-template-columns: 1fr; } } / ═══════════════════════════════════════════════════ MEDITATION CEREMONY OVERLAY ═══════════════════════════════════════════════════ / #meditationOverlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1.5s ease-in-out; } #meditationOverlay.active { opacity: 1; pointer-events: all; } .meditation-ring { width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--gold); animation: pulseRing 6s infinite ease-in-out; margin-bottom: 3rem; box-shadow: 0 0 40px var(--gold-mute); display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: var(--font-display); font-size: 2rem; } @keyframes pulseRing { 0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 20px var(--gold-mute); } 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 50px var(--gold-mute), inset 0 0 20px var(--gold-mute); } 100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 20px var(--gold-mute); } } #meditationQuote { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.6; max-width: 700px; text-align: center; color: var(--text); padding: 0 2rem; transition: opacity 1.5s ease-in-out; opacity: 0; } #meditationQuote.active { opacity: 1; } .meditation-status { position: absolute; bottom: 3rem; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; } / ═══════════════════════════════════════════════════ WESTERN ASTROLOGY — Celestial Palette ═══════════════════════════════════════════════════ / body[data-oracle="astrology"] { --gold: #94b8ff; --gold-dim: #6a8bcc; --gold-mute: rgba(148, 184, 255, .15); --primary: #c084fc; --bg-deep: #0A0A12; --bg-grad: radial-gradient(ellipse at 25% 20%, #16162A 0%, #0A0A12 65%); --bg-card: rgba(20, 20, 30, .95); --bg-inset: rgba(15, 15, 22, .92); --text: #F0F4FF; --text-dim: #AAB5D0; --text-mute: #707B96; --border: rgba(148, 184, 255, .22); --accent: #38BDF8; --ws-bar-bg: rgba(10, 10, 18, .93); } html[data-theme="light"] body[data-oracle="astrology"] { --gold: #4A6BBB; --gold-dim: #3A5B9B; --gold-mute: rgba(74, 107, 187, .12); --primary: #8A4BCF; --bg-deep: #F4F7FA; --bg-grad: #F4F7FA; --bg-card: #FFFFFF; --bg-inset: #F8FAFC; --text: #1A202C; --text-dim: #475569; --text-mute: #64748B; --border: #CBD5E1; } .theme-color-row { display: flex; align-items: center; justify-content: space-between; background: #1a1730; border: 1px solid #2d2a50; border-radius: 6px; padding: 5px 8px; cursor: pointer; gap: 8px; } .theme-color-row span { color: #9d95cc; font-size: 12px; flex: 1; } .theme-color-row input[type=color] { width: 28px; height: 22px; border: none; border-radius: 4px; cursor: pointer; background: none; padding: 0; } #astroAspectTable { contain: strict; } #asp-scroll { min-height: 0; flex: 1 1 auto; } .asp-row:hover { background: rgba(99, 85, 170, .12); } .asp-row.highlighted { background: rgba(99, 85, 170, .28); } / ═══════════════════════════════════════════════════ AI READING — Formatted prose output Reusable for natal narrative, synthesis, etc. ═══════════════════════════════════════════════ / .ai-reading { line-height: 1.75; } .ai-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(99, 85, 170, 0.3); margin-bottom: 1.5rem; padding-bottom: 0; } .ai-tab { background: none; border: none; border-bottom: 2px solid transparent; color: #6b6b8a; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.6rem 1rem 0.65rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 6px; margin-bottom: -1px; } .ai-tab:hover { color: #c4b5fd; } .ai-tab.active { color: #c4b5fd; border-bottom-color: var(--primary, #7c3aed); } .ai-tab-badge { background: rgba(99, 85, 170, 0.35); color: #a78bfa; font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; font-weight: 700; } .ai-tab-panel { display: none; } .ai-tab-panel.active { display: block; } .ai-prose p { margin: 0 0 1rem; font-size: 1rem; color: var(--text-primary, #e2e8f0); } .ai-prose p:last-child { margin-bottom: 0; } .ai-prose strong { color: #c4b5fd; font-weight: 600; } .ai-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .ai-facts li { font-size: 0.875rem; color: #a78bfa; padding: 0.35rem 0.75rem; background: rgba(99, 85, 170, 0.12); border-left: 3px solid var(--primary); border-radius: 0 4px 4px 0; } / ═══════════════════════════════════════════════════ ASTRO PANELS — Natal / Transits separation ═══════════════════════════════════════════════ */ .astro-panel { border: 1px solid rgba(99, 85, 170, 0.25); border-radius: 10px; padding: 1.25rem 1.5rem; background: rgba(255,255,255,0.02); } .astro-panelheader { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .astro-panelheader h4 { margin: 0; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-primary, #e2e8f0); } .astro-panelicon { font-size: 1.1rem; opacity: 0.7; } .astro-panelstatus { margin-left: auto; font-size: 0.8rem; color: #6b6b8a; font-style: italic; } .astro-panel__status:has(em) { color: #a78bfa; } .btn-danger { color: #f87171; border-color: rgba(248, 113, 113, 0.3); } .btn-danger:hover { background: rgba(248, 113, 113, 0.1); }