/* ========================================================================= Eggplant.ai (小茄 AI) — Foundation Tokens Colors, type, radii, shadows, and semantic typography styles. Usage: … Primary CJK family is now self-hosted Alibaba PuHuiTi 3.0 (uploaded brand font, 65 Medium weight). Noto Sans SC is kept as a CDN fallback; Inter (Latin) and ZCOOL KuaiLe (display) still load from Google Fonts. Original product uses PingFang SC and Douyin Sans for the brand wordmark. ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Inter:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap"); /* -------- Self-hosted brand font -------- */ @font-face { font-family: "Alibaba PuHuiTi 3.0"; src: url("fonts/AlibabaPuHuiTi-3-65-Medium.ttf") format("truetype"); font-weight: 100 900; /* only Medium shipped — span the range so every weight resolves */ font-style: normal; font-display: swap; } :root { /* -------- Brand purple ramp -------- */ --ep-purple-50: #F0F1FF; /* code block bg, light surface */ --ep-purple-100: #E5E1FF; /* hover bg */ --ep-purple-150: #EEF0FF; /* nav new-conversation bg */ --ep-purple-200: #E1E5FF; /* hairline / scrollbar thumb */ --ep-purple-300: #C3C3F6; /* scene · poem card */ --ep-purple-400: #9F7EFF; /* Level 3 card */ --ep-purple-500: #6B53FF; /* PRIMARY — Ant primary, focus, links */ --ep-purple-600: #5656F1; /* audio modal disc */ --ep-purple-700: #382890; /* dark brand, "+" pill, on-brand text */ --ep-purple-800: #3314FF; /* Level 5 card */ --ep-purple-900: #0D0D53; /* deepest brand — display headings */ --ep-purple-tint: rgba(107, 83, 255, 0.30); /* disabled button bg */ /* -------- Scene palette (pastel chips for the 5 LV1 scenes) -------- NOTE: zoo softened from production #FFDC69 to #FFE3A8 so the 5 chips sit in the same pastel family (88–92% lightness, low-mid saturation). Production codebase still ships the original — flag if needed. */ --ep-scene-zoo: #FFE3A8; /* 🦒 AI 动物园 soft cream-yellow */ --ep-scene-music: #D5DAFF; /* 🎵 AI 音乐盒 lavender */ --ep-scene-story: #FFD5A1; /* 📖 AI 故事会 peach */ --ep-scene-paint: #FFD2D2; /* 🎨 AI 绘画师 blush */ --ep-scene-poem: #C3C3F6; /* 🪶 AI 诗词会 light purple */ /* Level cards — used on the course landing rail. L3 softened to #C9B5FF and L5 to #4936D6 so the ramp is pastel → pastel → soft-purple → brand → deep-royal instead of jumping cliff-edge between L2 and L3. */ --ep-level-1: #FFDDA1; /* L1 — peach */ --ep-level-2: #FFD2D2; /* L2 — pink */ --ep-level-3: #C9B5FF; /* L3 — soft purple (was #9F7EFF) */ --ep-level-4: #6B53FF; /* L4 — brand purple */ --ep-level-5: #4936D6; /* L5 — royal (was #3314FF) */ /* Saturated chart palette (echarts series, fully saturated) */ --ep-chart-zoo: #3B76FF; --ep-chart-music: #FF553B; --ep-chart-poetry: #FFA73B; --ep-chart-story: #6D3BFF; --ep-chart-painter: #B73BFF; --ep-chart-pk: #FF3BA5; --ep-chart-practice: #3BFFD1; --ep-chart-factory: #FFCF3B; /* -------- Neutrals / text -------- */ --ep-ink-1: #0D0D53; /* primary heading / display */ --ep-ink-2: #1A1A2E; /* body */ --ep-ink-3: #3E3E6E; /* secondary heading */ --ep-ink-4: #3E4C67; /* nav inactive */ --ep-ink-5: #7787A7; /* icon inactive */ --ep-ink-6: rgba(62, 76, 103, 0.60); /* muted body */ --ep-ink-7: rgba(0, 0, 0, 0.80); /* black-translucent body */ --ep-on-brand: #FFFFFF; /* -------- Surfaces -------- */ --ep-bg-course: #F0F2FF; /* LV1/LV2 background */ --ep-bg-mgmt: #F0F5FF; /* Admin / management bg */ --ep-surface: #FFFFFF; /* card */ --ep-surface-translucent: rgba(255, 255, 255, 0.70); /* sidebar */ --ep-active-bg: #D7E3FF; /* menu selected */ --ep-success: #3F8600; --ep-danger: #CF1322; /* -------- Signature gradients -------- */ --ep-grad-login: linear-gradient(115deg, rgba(73, 190, 255, 0.30) 28%, rgba(255, 255, 255, 0.73) 55%, rgba(200, 82, 255, 0.28) 87%); --ep-grad-home-1: linear-gradient(to right, #CFD1FF 0%, #E9EAFF 40.92%, #F0F1FF 55.58%, #D5D7FF 100%); --ep-grad-home-2: linear-gradient(to right, #D8E6FF 0%, #E9F4FF 40.92%, #F0FAFF 55.58%, #D5E5FF 100%); --ep-grad-practice: linear-gradient(177deg, rgba(255, 255, 255, 0.57) -4%, #FFFFFF 42%); --ep-grad-flow: linear-gradient(181deg, #E7E3FF 0%, #FFFFFF 29%); --ep-grad-divider: linear-gradient(90deg, rgba(86, 86, 241, 0) 0%, #5656F1 52%, rgba(86, 86, 241, 0) 100%); --ep-grad-logo: radial-gradient(circle at 30% 80%, #B88DD8 0%, #794DA5 100%); /* -------- Radii — the system is generous & rounded -------- */ --ep-radius-xs: 4px; /* inline pill / table cells */ --ep-radius-sm: 8px; /* small button, menu item */ --ep-radius-md: 12px; /* input, message bubble, default card */ --ep-radius-lg: 20px; /* accent pill */ --ep-radius-xl: 24px; /* level card, hero card */ --ep-radius-2xl: 30px; /* sidebar */ --ep-radius-3xl: 40px; /* large feature card */ --ep-radius-full: 999px; /* -------- Shadows -------- */ --ep-shadow-card: 0 8px 24px rgba(0, 26, 109, 0.06); --ep-shadow-pop: 0 12px 36px rgba(13, 13, 83, 0.12); --ep-shadow-soft: 0 2px 8px rgba(0, 26, 109, 0.08); --ep-shadow-button: 0 4px 14px rgba(107, 83, 255, 0.28); /* -------- Spacing scale (matches Tailwind 4px base) -------- */ --ep-space-1: 4px; --ep-space-2: 8px; --ep-space-3: 12px; --ep-space-4: 16px; --ep-space-5: 20px; --ep-space-6: 24px; --ep-space-8: 32px; --ep-space-10: 40px; --ep-space-12: 48px; --ep-space-14: 56px; --ep-space-16: 64px; /* -------- Motion -------- */ --ep-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ep-ease-in: cubic-bezier(0.4, 0, 0.2, 1); --ep-dur-quick: 150ms; --ep-dur-base: 250ms; --ep-dur-slow: 400ms; /* -------- Type families -------- */ --ep-font-sans: "Alibaba PuHuiTi 3.0", "Noto Sans SC", "PingFang SC", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", sans-serif; --ep-font-display: "ZCOOL KuaiLe", "Douyin Sans", "Noto Sans SC", "PingFang SC", sans-serif; --ep-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; /* -------- Type scale -------- */ --ep-fs-12: 12px; --ep-fs-14: 14px; --ep-fs-16: 16px; --ep-fs-18: 18px; --ep-fs-20: 20px; --ep-fs-22: 22px; --ep-fs-24: 24px; --ep-fs-26: 26px; --ep-fs-32: 32px; --ep-fs-40: 40px; /* -------- Semantic / aliased -------- */ --ep-fg-1: var(--ep-ink-1); --ep-fg-2: var(--ep-ink-2); --ep-fg-3: var(--ep-ink-4); --ep-fg-muted: var(--ep-ink-6); --ep-brand: var(--ep-purple-500); --ep-brand-deep: var(--ep-purple-700); --ep-bg-base: var(--ep-bg-course); } /* ========================================================================= Base + semantic typography ========================================================================= */ .ep-app, .ep-app * { box-sizing: border-box; } .ep-app { font-family: var(--ep-font-sans); color: var(--ep-ink-2); font-feature-settings: "tnum" on, "ss01" on; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display — used for the "小茄AI" wordmark on the login screen */ .ep-display { font-family: var(--ep-font-display); font-weight: 700; font-size: var(--ep-fs-32); line-height: 1.2; letter-spacing: 0.01em; color: var(--ep-purple-900); } /* Page title — "你好 {name}", "欢迎来到AI动物园" */ .ep-h1 { font-family: var(--ep-font-sans); font-weight: 500; font-size: var(--ep-fs-26); line-height: 1.35; color: var(--ep-ink-2); margin: 0; } /* Section title — "欢迎进入人工智能AI的魔法世界！" */ .ep-h2 { font-weight: 500; font-size: var(--ep-fs-24); line-height: 1.4; color: var(--ep-ink-2); margin: 0; } /* Card title — "AI动物园", "AI魔咒练习本" */ .ep-h3 { font-weight: 500; font-size: var(--ep-fs-20); line-height: 1.4; color: var(--ep-ink-1); margin: 0; } /* Sidebar nav item, large body */ .ep-h4 { font-weight: 500; font-size: var(--ep-fs-18); line-height: 1.45; color: var(--ep-purple-900); margin: 0; } /* Body — input value, primary body text */ .ep-body { font-size: var(--ep-fs-16); line-height: 1.6; color: var(--ep-ink-2); } /* Small / secondary body — card description, helper */ .ep-body-sm { font-size: var(--ep-fs-14); line-height: 1.6; color: var(--ep-ink-7); } /* Caption — stat labels, meta */ .ep-caption { font-size: var(--ep-fs-12); line-height: 1.5; color: var(--ep-ink-5); letter-spacing: 0.02em; } /* Numeric — dashboard counters */ .ep-stat { font-weight: 600; font-size: var(--ep-fs-22); color: var(--ep-ink-2); font-variant-numeric: tabular-nums; } /* Code (inline) — Markdown body */ .ep-code { font-family: var(--ep-font-mono); font-size: 0.9em; background: var(--ep-purple-50); color: var(--ep-purple-500); border-radius: var(--ep-radius-xs); padding: 0.1em 0.4em; } /* Link */ .ep-link { color: var(--ep-purple-500); text-decoration: none; cursor: pointer; transition: opacity var(--ep-dur-quick) var(--ep-ease-out); } .ep-link:hover { opacity: 0.75; } /* Strong (markdown bold) — uses heading ink, not pure black */ .ep-strong { font-weight: 600; color: var(--ep-ink-3); }