/* ========================================================================== theme-kid.css — 儿童绘本主题（D9 温暖绘本风）用法：或视觉基准：design-lab/04-kid-theme.html 方案 A（.pa 块，组件值逐项对齐） kid 仅浅色（D5）：token 覆盖后于 tokens.css 的暗色 media query 加载，即使系统暗色模式也压回浅色。 ========================================================================== */ /* ── kid token 覆盖（.theme-kid 类即可，html/body/容器 div 均可挂载） ── */ .theme-kid { --bg: #fff8f0; --card: #ffffff; --border: #ffe0b2; --text: #4e342e; --text-secondary: #8d6e63; /* 暖米底上 ≥4.5:1 */ --muted: #8d6e63; --accent: #ff8a65; --warn: #e65100; --ok: #66bb6a; --body-size: 1.15rem; --body-leading: 2.0; --font-body: var(--font-ui); /* 儿童不用宋体 */ --radius-card: 16px; /* §3.4：卡片圆角 kid 16px */ --shadow-card: 0 2px 8px rgba(180,130,80,0.12); --surface-soft: #ffffff; --tap-min: 52px; /* §8：kid 触控目标 ≥52px */ } .theme-kid body, body.theme-kid { background: var(--bg); color: var(--text); font-family: var(--font-body); } /* ── 卡片：圆胖 + 柔和投影 ── */ .theme-kid .card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1rem; } /* ── 步骤进度条（6 段：done 橙黄 / now 橙 / 未到浅橙） ── */ .theme-kid .step-progress { display: flex; gap: 6px; margin-bottom: 1.2rem; } .theme-kid .step-progress i { height: 6px; border-radius: 3px; flex: 1; background: #ffe0b2; } .theme-kid .step-progress i.done { background: #ffb74d; } .theme-kid .step-progress i.now { background: #ff8a65; } /* ── 步骤头：52px 圆形数字徽章（橙底白字 + 3px 投影） + 步骤名 ── */ .theme-kid .step-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; } .theme-kid .step-no { width: 52px; height: 52px; border-radius: 50%; background: #ff8a65; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 3px 0 #e0704a; } .theme-kid .step-title { font-size: 1.35rem; font-weight: 700; color: var(--text); } .theme-kid .step-sub { font-size: 0.9rem; color: #a1887f; } /* ── 图片卡 ── */ .theme-kid .kid-img { width: 100%; display: block; border-radius: 12px; } /* ── 引导语气泡（#fff3e0 底，1.08rem/1.9） ── */ .theme-kid .say { background: #fff3e0; border-radius: 14px; padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 1.08rem; line-height: 1.9; color: #5d4037; } .theme-kid .say b { color: #e65100; } /* ── 书写框：min-height 9rem、字号 1.25rem、3px 边框、聚焦橙框 ── */ .theme-kid .kid-write { width: 100%; min-height: 9rem; font-size: 1.25rem; line-height: 2; padding: 0.9rem 1.1rem; border-radius: 12px; resize: vertical; font-family: inherit; border: 3px solid #ffccbc; background: #fffdfb; } .theme-kid .kid-write:focus { outline: none; border-color: #ff8a65; } .theme-kid .kid-write:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── 自动保存指示（右上角绿字） ── */ .theme-kid .save-hint { font-size: 0.8rem; color: #43a047; } /* ── 工具勾选行：min-height 52px、24px checkbox、整行可点、完成变绿 ── */ .theme-kid .kid-tool { display: flex; align-items: center; gap: 0.8rem; min-height: 52px; padding: 0.4rem 0.8rem; border-radius: 10px; font-size: 1.05rem; cursor: pointer; background: #fff; border: 2px solid #ffe0b2; } .theme-kid .kid-tool input { width: 24px; height: 24px; flex-shrink: 0; } .theme-kid .kid-tool.done { background: #e8f5e9; border-color: #a5d6a7; } /* ── 完成按钮：56px 绿底圆胖 + 按压感（:active 下沉 2px） ── */ .theme-kid .kid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 56px; padding: 0 2rem; border: none; border-radius: 14px; font-size: 1.1rem; font-weight: 700; cursor: pointer; font-family: inherit; background: #66bb6a; color: #fff; box-shadow: 0 4px 0 #43a047; } .theme-kid .kid-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #43a047; } /* ── 家长区：

折叠、暖灰 #f5efe8、0.82rem 紧凑 ── */ .theme-kid .parent-zone { background: #f5efe8; border-radius: 12px; margin-top: 1.2rem; font-size: 0.82rem; line-height: 1.6; } .theme-kid .parent-zone summary { cursor: pointer; padding: 0.7rem 1rem; font-size: 0.85rem; list-style: none; color: #a1887f; } .theme-kid .parent-zone .pz-body { padding: 0 1rem 0.9rem; color: #666; }