/* ═══════════════════════════════════════════════ MORPHE — Phase-Specific Styles Each phase has its own accent color and mood. Applied via data-phase attribute on or . Tag text uses -text variants for WCAG AA compliance. ═══════════════════════════════════════════════ */ /* Phase 1: The Spark — Muted Rose (vulnerability, new beginnings) */ [data-phase="1"] { --phase-accent: var(--accent-t1); } [data-phase="1"] .tag { color: var(--accent-t1-text); background: rgba(196, 91, 110, 0.08); } [data-phase="1"] .phase-card::before { background: var(--accent-t1); } [data-phase="1"] .reading-progress { background: var(--accent-t1); } [data-phase="1"] .hero::before { background: radial-gradient(circle, rgba(196, 91, 110, 0.05) 0%, transparent 70%); } /* Phase 2: Three Layers — Rose to Green transition */ [data-phase="2"] { --phase-accent: var(--accent-t1); } [data-phase="2"] .tag { color: var(--accent-t3-text); background: rgba(107, 155, 122, 0.08); } [data-phase="2"] .phase-card::before { background: var(--accent-success); } [data-phase="2"] .reading-progress { background: var(--accent-success); } [data-phase="2"] .hero::before { background: radial-gradient(circle, rgba(107, 155, 122, 0.05) 0%, transparent 70%); } /* Phase 3: The Brain — Soft Purple (consciousness, neural) */ [data-phase="3"] { --phase-accent: var(--accent-science); } [data-phase="3"] .tag { color: var(--accent-science-text); background: rgba(139, 111, 173, 0.08); } [data-phase="3"] .phase-card::before { background: var(--accent-science); } [data-phase="3"] .reading-progress { background: var(--accent-science); } [data-phase="3"] .hero::before { background: radial-gradient(circle, rgba(139, 111, 173, 0.05) 0%, transparent 70%); } /* Phase 4: Trimester 1 Guide — Muted Rose (gentle reassurance) */ [data-phase="4"] { --phase-accent: var(--accent-t1); } [data-phase="4"] .tag { color: var(--accent-t1-text); background: rgba(196, 91, 110, 0.08); } [data-phase="4"] .phase-card::before { background: var(--accent-t1); } [data-phase="4"] .reading-progress { background: var(--accent-t1); } [data-phase="4"] .hero::before { background: radial-gradient(circle, rgba(196, 91, 110, 0.05) 0%, transparent 70%); } /* Phase 5: Trimester 2 Guide — Warm Amber (energy, golden period) */ [data-phase="5"] { --phase-accent: var(--accent-t2); } [data-phase="5"] .tag { color: var(--accent-t2-text); background: rgba(196, 154, 92, 0.08); } [data-phase="5"] .phase-card::before { background: var(--accent-t2); } [data-phase="5"] .reading-progress { background: var(--accent-t2); } [data-phase="5"] .hero::before { background: radial-gradient(circle, rgba(196, 154, 92, 0.05) 0%, transparent 70%); } /* Phase 6: Trimester 3 Guide — Sage Green (readiness, calm strength) */ [data-phase="6"] { --phase-accent: var(--accent-t3); } [data-phase="6"] .tag { color: var(--accent-t3-text); background: rgba(107, 155, 122, 0.08); } [data-phase="6"] .phase-card::before { background: var(--accent-t3); } [data-phase="6"] .reading-progress { background: var(--accent-t3); } [data-phase="6"] .hero::before { background: radial-gradient(circle, rgba(107, 155, 122, 0.05) 0%, transparent 70%); } /* Phase 7: The Electric Body — Trust Blue (cosmic, bioelectricity) */ [data-phase="7"] { --phase-accent: var(--accent-trust); } [data-phase="7"] .tag { color: var(--accent-trust-text); background: rgba(74, 143, 168, 0.08); } [data-phase="7"] .phase-card::before { background: var(--accent-trust); } [data-phase="7"] .reading-progress { background: var(--accent-trust); } [data-phase="7"] .hero::before { background: radial-gradient(circle, rgba(74, 143, 168, 0.05) 0%, transparent 70%); } /* Index page — default rose accent */ [data-phase="index"] .reading-progress { background: var(--accent-t1); } /* Phase card colors on the index page */ .phase-card[data-phase="1"]::before { background: var(--accent-t1); } .phase-card[data-phase="2"]::before { background: var(--accent-success); } .phase-card[data-phase="3"]::before { background: var(--accent-science); } .phase-card[data-phase="4"]::before { background: var(--accent-t1); } .phase-card[data-phase="5"]::before { background: var(--accent-t2); } .phase-card[data-phase="6"]::before { background: var(--accent-t3); } .phase-card[data-phase="7"]::before { background: var(--accent-trust); }