/* ARAYA member dashboard — /account/ rewrite (member-build playbook Stage B step 11, * user-ux-plan §2.3). Loaded ONLY on UM pages, after auth.css, before reset.css (see * inc/render-auth.php enqueue, filemtime-versioned). Every colour comes from tokens.css * custom properties (fallback hex = the token's own value, same pattern as drawer.css); * no new fonts, no icon libraries. Dark/maroon containers declare `color:` explicitly * (CONVENTIONS.md rule 3). One prefers-reduced-motion block at the end. */ .an-user-dash { max-width: 980px; margin: 0 auto; padding: 22px 18px 40px; } /* onboarding banner — one line + one dismiss (fence #8: no modal/tour) */ .an-user-onboard { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--an-cream-tint, #f3eae0); color: var(--an-ink, #2a2024); font-size: 14.5px; } .an-user-onboard-x { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; cursor: pointer; background: transparent !important; border: 1px solid rgba(94, 27, 38, .25) !important; border-radius: var(--an-radius-pill, 999px); color: var(--an-maroon, #5e1b26); font-size: 13.5px; font-weight: 600; box-shadow: none !important; } .an-user-onboard-x:hover { background: rgba(94, 27, 38, .06) !important; } .an-user-onboard-x:focus-visible { outline: var(--an-focus, 2px solid #b08347); outline-offset: 2px; } /* hero — avatar + greeting + one status line */ .an-user-hero { display: flex; align-items: center; gap: 16px; padding: 8px 0 22px; } .an-user-hero-text { min-width: 0; } .an-user-hero-greeting { margin: 0; font-family: var(--an-font-display, serif); font-size: var(--an-h3, 24px); color: var(--an-maroon, #5e1b26); line-height: 1.25; } .an-user-hero-status { margin: 4px 0 0; font-size: 14.5px; color: var(--an-ink-muted, #6e5a5e); } /* continue-learning — single card, thumb + progress + CTA (absent entirely when none) */ .an-user-continue { margin: 0 0 26px; } .an-user-continue-title { margin: 0 0 12px; font-family: var(--an-font-display, serif); font-size: var(--an-h4, 20px); color: var(--an-ink, #2a2024); } .an-user-continue-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; text-decoration: none; background: var(--an-cream-card, #fffdfb); border: 1px solid rgba(94, 27, 38, .10); border-radius: var(--an-radius-card, 20px); box-shadow: 0 4px 18px rgba(94, 27, 38, .07); color: var(--an-ink, #2a2024); transition: box-shadow var(--an-transition, .2s ease), transform var(--an-transition, .2s ease); } .an-user-continue-card:hover { box-shadow: 0 8px 26px rgba(94, 27, 38, .13); transform: translateY(-1px); } .an-user-continue-card:focus-visible { outline: var(--an-focus, 2px solid #b08347); outline-offset: 3px; } .an-user-continue-thumb { flex: 0 0 84px; width: 84px; height: 64px; border-radius: 12px; background-size: cover; background-position: center; } .an-user-continue-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; } .an-user-continue-name { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .an-user-continue-bar { height: 6px; border-radius: 3px; background: rgba(94, 27, 38, .12); overflow: hidden; } .an-user-continue-bar > span { display: block; height: 100%; background: var(--an-gold, #c6a15b); } .an-user-continue-pct { font-size: 12.5px; font-weight: 700; color: var(--an-maroon, #5e1b26); } .an-user-continue-cta { align-self: flex-start; margin-top: 2px; padding: 8px 18px; min-height: 36px; display: inline-flex; align-items: center; background: var(--an-maroon, #5e1b26); color: var(--an-cream, #faf6f1); border-radius: var(--an-radius-pill, 999px); font-size: 13.5px; font-weight: 600; } /* settings — UM's own markup (untouched), skinned. R9 finding: UM ships ZERO responsive * CSS (fixed 30/70 float columns), so below 900px we stack nav-above-panels ourselves; * >=900px keeps UM's two-column layout, skinned to tokens. UM's own tab JS still does the * one-panel-at-a-time switching (accordion behaviour) — logic not forked (fence #4). */ .an-user-settings { margin: 6px 0 22px; } .an-user-settings-title { margin: 0 0 12px; font-family: var(--an-font-display, serif); font-size: var(--an-h4, 20px); color: var(--an-ink, #2a2024); } .an-user-settings-accordion { background: var(--an-cream-card, #fffdfb); border: 1px solid rgba(94, 27, 38, .10); border-radius: var(--an-radius-card, 20px); padding: 10px 16px 16px; overflow: hidden; } .an-user-settings-accordion .um-account-side li { background: transparent; } .an-user-settings-accordion .um-account-side li a { min-height: 44px; height: auto; line-height: 1.4; display: flex; align-items: center; color: var(--an-ink, #2a2024); border-bottom: 1px solid rgba(94, 27, 38, .08); } .an-user-settings-accordion .um-account-side li a:hover { background: var(--an-cream-tint, #f3eae0); color: var(--an-maroon, #5e1b26); } .an-user-settings-accordion .um-account-side li a:focus-visible { outline: var(--an-focus, 2px solid #b08347); outline-offset: -2px; } .an-user-settings-accordion .um-account-side li a.current, .an-user-settings-accordion .um-account-side li a.current:hover { color: var(--an-maroon, #5e1b26); font-weight: 700; } .an-user-settings-accordion .um-account-side li a span.um-account-title { color: inherit; } /* UM's own default link-blue + gray button fail the >=3.0 contrast bar on our cream card (Stage C audit: um-link 2.84, um-button 2.88) — skin them to tokens inside this wrapper. */ /* !important: UM prints its option colours (#3ba1da link blue) in an inline