/* ============================================================ 数学奇境 · 设计系统基础儿童友好：大圆角、大字号、高对比；每级一个主题色 ============================================================ */ :root { /* 年级主题色 */ --g2: #ff8a3d; --g2-soft: #ffe3cc; --g3: #2ec4b6; --g3-soft: #d2f5f1; --g4: #4d96ff; --g4-soft: #dbe9ff; --g5: #9b5de5; --g5-soft: #ecdefc; --g6: #f15bb5; --g6-soft: #fdd9ee; /* 中性色 */ --ink: #2b2d42; --ink-soft: #5c607a; --paper: #fffdf7; --cream: #fff6e9; --space: #141433; --space-2: #1e1e45; --gold: #ffc233; --good: #35c163; --oops: #ff6b6b; /* 形状与节奏 */ --r-lg: 28px; --r-md: 20px; --r-sm: 14px; --shadow: 0 10px 30px rgba(43, 45, 66, .12); --shadow-sm: 0 4px 14px rgba(43, 45, 66, .10); --font: "Chalkboard SE", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Comic Sans MS", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 18px; } body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input { font-family: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3 { line-height: 1.35; font-weight: 800; } /* 当前年级主题色：页面在上设置 */ body[data-grade="2"] { --theme: var(--g2); --theme-soft: var(--g2-soft); } body[data-grade="3"] { --theme: var(--g3); --theme-soft: var(--g3-soft); } body[data-grade="4"] { --theme: var(--g4); --theme-soft: var(--g4-soft); } body[data-grade="5"] { --theme: var(--g5); --theme-soft: var(--g5-soft); } body[data-grade="6"] { --theme: var(--g6); --theme-soft: var(--g6-soft); } body:not([data-grade]) { --theme: var(--gold); --theme-soft: #fff3d0; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; } /* 顶部导航 */ .topnav { display: flex; align-items: center; gap: 14px; padding: 16px 0; } .topnav .logo { font-size: 1.25rem; font-weight: 900; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } .topnav .spacer { flex: 1; } .navlink { font-size: .95rem; font-weight: 700; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; transition: all .25s ease; } .navlink:hover { background: var(--theme-soft); color: var(--ink); } /* 通用按钮 */ .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; padding: 14px 30px; border-radius: 999px; background: var(--theme); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .12), var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; user-select: none; } .btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); } .btn.ghost { background: #fff; color: var(--ink); border: 3px solid var(--theme); box-shadow: none; } .btn.small { padding: 9px 20px; font-size: .92rem; } .btn[disabled] { opacity: .45; pointer-events: none; } /* 卡片 */ .card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 30px; } /* 星星 */ .star { color: var(--gold); font-size: 1.2em; } .star.dim { color: #dcdce6; } /* 标签 */ .pill { display: inline-block; font-size: .8rem; font-weight: 800; padding: 4px 14px; border-radius: 999px; background: var(--theme-soft); color: var(--ink); } /* 页面淡入 */ @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .rise { animation: rise .5s ease both; } .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } .rise.d4 { animation-delay: .32s; } .rise.d5 { animation-delay: .4s; } /* 尊重减少动画偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 安静模式（JS 在上加 .quiet） */ html.quiet .noisy { display: none !important; } @media (max-width: 720px) { html { font-size: 16px; } .card { padding: 22px; } }