/* app-kit.css —— 手机App外壳 (自托管, 零外网). 在 index.html 里即可用 */ :root{ /* ===== 2026-06-18 UI升级·第1步: 设计令牌系统 (间距/字号/圆角/分层阴影/语义色成体系) ===== 默认深色暖调的"具体值"全部保持 2026-06-14 那版不变(零回归), 只是改成令牌驱动 → 各风格能整套换肤. */ /* 间距阶 (4/8 网格, 真App的节奏感全靠它) */ --ak-sp-1:4px; --ak-sp-2:8px; --ak-sp-3:12px; --ak-sp-4:16px; --ak-sp-5:24px; --ak-sp-6:32px; /* 圆角阶 / 字号阶 / 字重 / 行高 */ --ak-r-1:8px; --ak-r-2:12px; --ak-r-3:16px; --ak-r-4:22px; --ak-fs-display:28px; --ak-fs-title:20px; --ak-fs-headline:17px; --ak-fs-body:15px; --ak-fs-callout:13px; --ak-fs-caption:11px; --ak-fw-bold:800; --ak-fw-semibold:700; --ak-fw-medium:600; --ak-lh-tight:1.25; --ak-lh-normal:1.45; /* ===== 语义色 (深色暖调默认; .ak-theme-* 整套覆盖) ===== */ --ak-bg-deep:#0c0a10; --ak-bg:#15131a; --ak-surface:#1d1a24; --ak-card:#262230; --ak-card-2:#2e2a3a; --ak-text:#eef1f7; --ak-text-2:#c4c9d4; --ak-muted:#9aa3b2; --ak-primary:#6d6bf6; --ak-primary-2:#9b6bf6; --ak-on-primary:#ffffff; --ak-primary-soft:rgba(109,107,246,.16); --ak-border:rgba(255,255,255,.07); --ak-divider:rgba(255,255,255,.06); --ak-track:rgba(255,255,255,.07); --ak-track-strong:rgba(255,255,255,.18); --ak-header-bg:rgba(15,17,23,.72); --ak-tabbar-bg:rgba(20,23,32,.92); /* 分层柔和阴影阶 (默认深色: 沿用原卡片阴影, 视觉不变) */ --ak-elev-1:0 2px 6px rgba(0,0,0,.25); --ak-elev-2:0 6px 20px rgba(0,0,0,.25); --ak-elev-3:0 14px 40px rgba(0,0,0,.42); --ak-primary-shadow:0 8px 20px rgba(109,107,246,.35); /* 兼容旧变量(作品/旧组件可能引用, 保持原值不删) */ --ak-radius:18px; --ak-gap:14px; --ak-safe-t:env(safe-area-inset-top,0px); --ak-safe-b:env(safe-area-inset-bottom,0px); } /* ===== 8 套风格 = 8 套令牌主题(换肤). 作品在加 class="ak-theme-xxx" 即整套变样; 配色全交给这些令牌, 别再手写一套颜色. 浅色主题自带柔和灰阴影 + 浅色边框, 一眼像真App. ===== */ .ak-theme-kid{--ak-bg-deep:#fbe9f6;--ak-bg:#fdf3fb;--ak-surface:#fff6fc;--ak-card:#ffffff;--ak-card-2:#fbf3fb;--ak-text:#44456a;--ak-text-2:#6c6e93;--ak-muted:#a9abce;--ak-primary:#4fd1c5;--ak-primary-2:#7eb6ff;--ak-on-primary:#0e3b3a;--ak-primary-soft:rgba(79,209,197,.16);--ak-border:rgba(68,69,106,.10);--ak-divider:rgba(68,69,106,.08);--ak-track:rgba(68,69,106,.06);--ak-track-strong:rgba(68,69,106,.18);--ak-header-bg:rgba(253,243,251,.82);--ak-tabbar-bg:rgba(255,255,255,.92);--ak-radius:20px;--ak-r-3:20px;--ak-elev-1:0 2px 8px rgba(125,90,140,.10);--ak-elev-2:0 8px 24px rgba(125,90,140,.13);--ak-elev-3:0 16px 44px rgba(125,90,140,.18);--ak-primary-shadow:0 8px 20px rgba(79,209,197,.30);} .ak-theme-candy{--ak-bg-deep:#ffe1ee;--ak-bg:#fff0f6;--ak-surface:#fff5f9;--ak-card:#ffffff;--ak-card-2:#fff0f6;--ak-text:#6a2348;--ak-text-2:#9a4f74;--ak-muted:#d08bac;--ak-primary:#ff4f9a;--ak-primary-2:#ffc24b;--ak-on-primary:#5a1233;--ak-primary-soft:rgba(255,79,154,.14);--ak-border:rgba(106,35,72,.10);--ak-divider:rgba(106,35,72,.08);--ak-track:rgba(106,35,72,.06);--ak-track-strong:rgba(106,35,72,.18);--ak-header-bg:rgba(255,240,246,.82);--ak-tabbar-bg:rgba(255,255,255,.92);--ak-radius:22px;--ak-r-3:22px;--ak-elev-1:0 3px 10px rgba(214,70,130,.14);--ak-elev-2:0 10px 26px rgba(214,70,130,.18);--ak-elev-3:0 18px 46px rgba(214,70,130,.22);--ak-primary-shadow:0 10px 22px rgba(255,79,154,.34);} .ak-theme-ios{--ak-bg-deep:#e9e9ee;--ak-bg:#f2f2f7;--ak-surface:#f7f7fb;--ak-card:#ffffff;--ak-card-2:#f2f2f7;--ak-text:#1c1c1e;--ak-text-2:#43434a;--ak-muted:#8e8e93;--ak-primary:#0a84ff;--ak-primary-2:#5ac8fa;--ak-on-primary:#ffffff;--ak-primary-soft:rgba(10,132,255,.12);--ak-border:rgba(60,60,67,.12);--ak-divider:rgba(60,60,67,.10);--ak-track:rgba(118,118,128,.10);--ak-track-strong:rgba(118,118,128,.20);--ak-header-bg:rgba(248,248,250,.80);--ak-tabbar-bg:rgba(248,248,250,.88);--ak-radius:14px;--ak-r-3:14px;--ak-elev-1:0 1px 3px rgba(0,0,0,.08);--ak-elev-2:0 4px 16px rgba(0,0,0,.08);--ak-elev-3:0 12px 32px rgba(0,0,0,.12);--ak-primary-shadow:0 6px 16px rgba(10,132,255,.26);} .ak-theme-tech{--ak-bg-deep:#070a14;--ak-bg:#0b0f1c;--ak-surface:#121830;--ak-card:rgba(255,255,255,.07);--ak-card-2:rgba(255,255,255,.10);--ak-text:#e7f0ff;--ak-text-2:#aab8d6;--ak-muted:#5d6b88;--ak-primary:#22d3ee;--ak-primary-2:#a78bfa;--ak-on-primary:#08222f;--ak-primary-soft:rgba(34,211,238,.16);--ak-border:rgba(125,211,252,.22);--ak-divider:rgba(125,211,252,.14);--ak-track:rgba(255,255,255,.06);--ak-track-strong:rgba(255,255,255,.16);--ak-header-bg:rgba(11,15,28,.66);--ak-tabbar-bg:rgba(11,15,28,.82);--ak-radius:14px;--ak-r-3:14px;--ak-elev-1:0 2px 8px rgba(0,0,0,.4);--ak-elev-2:0 8px 26px rgba(0,0,0,.5);--ak-elev-3:0 16px 44px rgba(0,0,0,.6);--ak-primary-shadow:0 8px 22px rgba(34,211,238,.28);} .ak-theme-calm{--ak-bg-deep:#e4e7da;--ak-bg:#eef0e8;--ak-surface:#f4f5ec;--ak-card:#fafaf4;--ak-card-2:#f0f1e6;--ak-text:#535249;--ak-text-2:#73715f;--ak-muted:#9c9784;--ak-primary:#8ba888;--ak-primary-2:#c9b79c;--ak-on-primary:#2b3622;--ak-primary-soft:rgba(139,168,136,.18);--ak-border:rgba(83,82,73,.10);--ak-divider:rgba(83,82,73,.08);--ak-track:rgba(83,82,73,.06);--ak-track-strong:rgba(83,82,73,.18);--ak-header-bg:rgba(238,240,232,.82);--ak-tabbar-bg:rgba(250,250,244,.92);--ak-radius:16px;--ak-r-3:16px;--ak-elev-1:0 2px 8px rgba(90,88,70,.10);--ak-elev-2:0 8px 22px rgba(90,88,70,.12);--ak-elev-3:0 16px 40px rgba(90,88,70,.16);--ak-primary-shadow:0 8px 20px rgba(139,168,136,.26);} .ak-theme-pixel{--ak-bg-deep:#11132a;--ak-bg:#1a1d33;--ak-surface:#22264a;--ak-card:#2c2f54;--ak-card-2:#363a66;--ak-text:#ffffff;--ak-text-2:#c5c9ee;--ak-muted:#8b8fb5;--ak-primary:#ff4d6d;--ak-primary-2:#4dd0e1;--ak-on-primary:#2a0d1c;--ak-primary-soft:rgba(255,77,109,.18);--ak-border:rgba(255,255,255,.14);--ak-divider:rgba(255,255,255,.10);--ak-track:rgba(255,255,255,.08);--ak-track-strong:rgba(255,255,255,.20);--ak-header-bg:rgba(26,29,51,.88);--ak-tabbar-bg:rgba(26,29,51,.94);--ak-radius:0px;--ak-r-1:0px;--ak-r-2:0px;--ak-r-3:0px;--ak-r-4:0px;--ak-elev-1:3px 3px 0 rgba(0,0,0,.45);--ak-elev-2:5px 5px 0 rgba(0,0,0,.5);--ak-elev-3:7px 7px 0 rgba(0,0,0,.55);--ak-primary-shadow:4px 4px 0 rgba(0,0,0,.5);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;} .ak-theme-guochao{--ak-bg-deep:#ece1cb;--ak-bg:#f4ecdd;--ak-surface:#f8f1e2;--ak-card:#fbf6ea;--ak-card-2:#f4ecdb;--ak-text:#2b2b2b;--ak-text-2:#56503f;--ak-muted:#9c917a;--ak-primary:#c0392b;--ak-primary-2:#c9a24b;--ak-primary-soft:rgba(192,57,43,.12);--ak-border:rgba(43,43,43,.12);--ak-divider:rgba(43,43,43,.09);--ak-track:rgba(43,43,43,.06);--ak-track-strong:rgba(43,43,43,.18);--ak-header-bg:rgba(244,236,221,.84);--ak-tabbar-bg:rgba(251,246,234,.92);--ak-radius:8px;--ak-r-3:8px;--ak-elev-1:0 2px 8px rgba(120,90,40,.12);--ak-elev-2:0 8px 22px rgba(120,90,40,.14);--ak-elev-3:0 16px 40px rgba(120,90,40,.18);--ak-primary-shadow:0 8px 20px rgba(192,57,43,.24);font-family:"KaiTi","STKaiti","楷体",serif;} .ak-theme-journal{--ak-bg-deep:#f3ecd9;--ak-bg:#fdfaef;--ak-surface:#fffdf6;--ak-card:#ffffff;--ak-card-2:#fdf8e9;--ak-text:#4a463d;--ak-text-2:#6e6a5c;--ak-muted:#a59c86;--ak-primary:#f4a261;--ak-primary-2:#9bc995;--ak-on-primary:#4d2f15;--ak-primary-soft:rgba(244,162,97,.16);--ak-border:rgba(74,70,61,.12);--ak-divider:rgba(74,70,61,.09);--ak-track:rgba(74,70,61,.06);--ak-track-strong:rgba(74,70,61,.18);--ak-header-bg:rgba(253,250,239,.84);--ak-tabbar-bg:rgba(255,255,255,.92);--ak-radius:12px;--ak-r-3:12px;--ak-elev-1:0 2px 8px rgba(150,120,70,.12);--ak-elev-2:0 8px 22px rgba(150,120,70,.14);--ak-elev-3:0 16px 40px rgba(150,120,70,.18);--ak-primary-shadow:0 8px 20px rgba(244,162,97,.26);} /* 2026-06-26 手动深色模式: AppKit.dark(true|false|留空切换). 与主题类挂同一元素(), 定义在所有主题之后→结构色转深(主色/圆角/字体保留不变). 偏好存 localStorage·开屏自动恢复. 现成开关给 <... class="ak-switch ak-dark-toggle">(自动接线·自动切换). */ .ak-dark{--ak-bg-deep:#0c0a10;--ak-bg:#15131a;--ak-surface:#1d1a24;--ak-card:#262230;--ak-card-2:#2e2a3a;--ak-text:#eef1f7;--ak-text-2:#c4c9d4;--ak-muted:#9aa3b2;--ak-border:rgba(255,255,255,.08);--ak-divider:rgba(255,255,255,.06);--ak-track:rgba(255,255,255,.08);--ak-track-strong:rgba(255,255,255,.20);--ak-header-bg:rgba(15,17,23,.78);--ak-tabbar-bg:rgba(20,23,32,.94);--ak-elev-1:0 2px 6px rgba(0,0,0,.30);--ak-elev-2:0 6px 20px rgba(0,0,0,.32);--ak-elev-3:0 14px 40px rgba(0,0,0,.48);} .ak-dark .field{background:#2a2733;color:#eef1f7;-webkit-text-fill-color:#eef1f7;border-color:rgba(255,255,255,.14);} .ak-dark .field::placeholder{color:#7c8595;-webkit-text-fill-color:#7c8595;} .ak-dark input,.ak-dark textarea,.ak-dark select{color-scheme:dark;} *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; background:var(--ak-bg-deep); color:var(--ak-text); -webkit-font-smoothing:antialiased; } /* App 外壳: 居中手机宽度, 竖屏单列 */ .app{max-width:430px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--ak-surface),var(--ak-bg)); color:var(--ak-text); position:relative; overflow:hidden;} /* 假状态栏 (顶部: 真时间 + 满信号 + 5G + 满电池, 一眼像真手机) */ .app-statusbar{display:flex; align-items:center; justify-content:space-between; padding:7px 20px 3px; font-size:13px; font-weight:700; color:var(--ak-text); user-select:none; flex:0 0 auto;} .app-statusbar .ak-sb-time{font-variant-numeric:tabular-nums; letter-spacing:.5px;} .app-statusbar .ak-sb-icons{display:flex; align-items:center; gap:6px;} .app-statusbar .ak-sb-batt{position:relative; display:inline-block; width:23px; height:12px; border:1.5px solid currentColor; border-radius:3px; opacity:.85;} .app-statusbar .ak-sb-batt::before{content:""; position:absolute; right:-3.5px; top:3px; width:2px; height:6px; background:currentColor; border-radius:0 2px 2px 0;} .app-statusbar .ak-sb-batt::after{content:""; position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:72%; background:currentColor; border-radius:1px;} .app-header{position:sticky; top:0; z-index:10; padding:6px 18px 14px; font-size:var(--ak-fs-title); font-weight:var(--ak-fw-bold); letter-spacing:-.01em; color:var(--ak-text); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:var(--ak-header-bg); border-bottom:1px solid var(--ak-divider); display:flex; align-items:center; gap:10px;} .app-main{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px calc(var(--ak-safe-b) + 84px + var(--ak-kb, 0px)); transition:padding-bottom .2s;} /* 屏幕: 用 .screen + .screen.active 切换 (配合 app-kit.js 的 AppKit.show) */ .screen{display:none; animation:ak-fade .22s ease;} .screen.active{display:block;} /* 底部 Tab 栏 */ .app-tabbar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px; display:flex; padding:8px 8px calc(var(--ak-safe-b) + 8px); gap:4px; background:var(--ak-tabbar-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--ak-divider); z-index:20;} .tab{flex:1; border:0; background:transparent; color:var(--ak-muted); font:inherit; font-size:11px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; border-radius:12px; cursor:pointer; transition:color .15s, background .15s;} .tab .tab-ico{font-size:21px; line-height:1;} .tab.active{color:var(--ak-primary); background:var(--ak-primary-soft);} .tab:active{transform:scale(.94);} /* 卡片 / 按钮 / 列表 */ .card{background:var(--ak-card); border:1px solid var(--ak-border); border-radius:var(--ak-radius); padding:16px; margin-bottom:var(--ak-gap); box-shadow:var(--ak-elev-2);} .btn{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:800; color:var(--ak-on-primary); padding:13px 18px; border-radius:14px; background:linear-gradient(135deg,var(--ak-primary),var(--ak-primary-2)); box-shadow:var(--ak-primary-shadow); transition:transform .12s, filter .12s; min-height:44px;} .btn:active{transform:scale(.96); filter:brightness(1.05);} .btn.ghost{background:var(--ak-track); box-shadow:none; color:var(--ak-text);} .list{list-style:none; margin:0; padding:0;} .list-item{display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--ak-divider);} h1,h2,h3{margin:0 0 10px;} .muted{color:var(--ak-muted);} /* Toast */ .ak-toast{position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(var(--ak-safe-b) + 92px); background:#11141d; color:#fff; padding:11px 18px; border-radius:14px; font-weight:700; font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; z-index:50; transition:opacity .2s, transform .2s; max-width:88%;} .ak-toast.show{opacity:1; transform:translateX(-50%) translateY(0);} @keyframes ak-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}} /* 骨架屏 (shimmer 流光占位; 配合 AppKit.skeleton / AppKit.loadInto) */ .skeleton{position:relative; overflow:hidden; background:var(--ak-track); border-radius:10px;} .skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); animation:ak-shimmer 1.25s infinite;} .skeleton-text{height:11px; margin:7px 0; border-radius:6px;} .skeleton-title{height:17px; width:55%; margin:6px 0 10px; border-radius:7px;} .skeleton-avatar{width:46px; height:46px; border-radius:50%; flex:0 0 auto;} .skeleton-card{height:84px; margin-bottom:12px; border-radius:16px;} @keyframes ak-shimmer{100%{transform:translateX(100%);}} /* 拍照识别 loading (AppKit.snap) */ @keyframes ak-spin{to{transform:rotate(360deg);}} .ak-snap-load{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; color:#1f2937; padding:18px 24px; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.22); font-size:15px; z-index:100000; display:flex; align-items:center; gap:12px;} .ak-snap-spin{width:22px; height:22px; border:3px solid #e5e7eb; border-top-color:#10b981; border-radius:50%; animation:ak-spin .8s linear infinite; flex:0 0 auto;} /* 录音抽屉 (AppKit.recordVoice / voiceInput) */ .ak-rec-mic{font-size:54px; text-align:center; margin:6px 0 2px; line-height:1;} .ak-rec-wave{display:flex; align-items:flex-end; justify-content:center; gap:5px; height:40px; margin:10px 0;} .ak-rec-wave i{width:6px; height:10px; border-radius:3px; background:#ef4444; display:inline-block; animation:ak-rec-bounce .9s ease-in-out infinite;} .ak-rec-wave i:nth-child(2){animation-delay:.15s;} .ak-rec-wave i:nth-child(3){animation-delay:.3s;} .ak-rec-wave i:nth-child(4){animation-delay:.45s;} .ak-rec-wave i:nth-child(5){animation-delay:.6s;} @keyframes ak-rec-bounce{0%,100%{height:10px; opacity:.5;} 50%{height:34px; opacity:1;}} .ak-rec-time{text-align:center; font-size:13px; color:#9ca3af; margin-bottom:4px;} .ak-rec-hint{text-align:center; font-size:13px; color:#6b7280; margin-bottom:8px;} /* ── 批二扩容组件 ── */ /* 开关 (

标题

—— .nav-back 自动调 AppKit.pop() 回上一屏 */ .navbar{ display:flex; align-items:center; gap:6px; padding:4px 0 10px; min-height:36px; } .navbar .nav-back{ border:0; background:transparent; color:var(--ak-primary); font-size:27px; line-height:1; padding:2px 8px 2px 0; cursor:pointer; font-weight:400; -webkit-tap-highlight-color:transparent; } .navbar .nav-back:active{ opacity:.5; } .navbar h1{ margin:0; font-size:var(--ak-fs-title2, 19px); font-weight:var(--ak-fw-bold); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .navbar .nav-right{ margin-left:auto; } /* 大标题滚动折叠(iOS招牌·自动接线): 内容下滚 → 大标题缩小 + 顶栏浮出分隔阴影 */ .nav-large{ transition:padding .22s; } .nav-large h1{ transition:font-size .22s; } .nav-large.compact{ padding-top:0; padding-bottom:2px; } .nav-large.compact h1{ font-size:var(--ak-fs-title2, 20px); } .app-header.scrolled{ box-shadow:0 0.5px 0 var(--ak-divider), 0 5px 14px rgba(0,0,0,.05); } /* 慢操作按钮转圈+禁连点: AppKit.busy(按钮, true|false|Promise) */ .btn.loading{ color:transparent !important; pointer-events:none; position:relative; } .btn.loading::after{ content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:ak-spin .7s linear infinite; } .btn.ghost.loading::after{ border-color:rgba(0,0,0,.18); border-top-color:var(--ak-primary); } /* 下拉刷新: AppKit.pullRefresh('.app-main', async()=>{ 重新拉数据 }) */ .ak-ptr{ height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; transition:height .2s; } .ak-ptr-spin{ width:22px; height:22px; border:2px solid var(--ak-border); border-top-color:var(--ak-primary); border-radius:50%; transition:transform .2s; } .ak-ptr.ready .ak-ptr-spin{ transform:rotate(180deg); } .ak-ptr.loading .ak-ptr-spin{ animation:ak-spin .7s linear infinite; } @media (prefers-reduced-motion:reduce){ .screen.ak-nav-fwd,.screen.ak-nav-back{animation:none;} .nav-large,.nav-large h1{transition:none;} } /* Tab 未读角标(AppKit.tabBadge('home',5) 数字 / true 小红点): 定位在 Tab 右上 */ .tab{ position:relative; } .ak-tabbadge{ position:absolute; top:2px; left:calc(50% + 5px); min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#ff3b30; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--ak-tabbar-bg); pointer-events:none; } .ak-tabbadge.dot{ min-width:0; width:9px; height:9px; padding:0; top:3px; left:calc(50% + 9px); } /* 描边图标(AppKit.icon('home') 或 ): 跟随文字色, 默认随字号; 放进 .ico/.tab-ico/.btn 自动合适大小 */ .ak-ico{display:inline-block; width:1.25em; height:1.25em; vertical-align:-.18em; flex:0 0 auto;} .tab-ico .ak-ico{width:23px; height:23px; vertical-align:0;} .row .ico .ak-ico,.ico .ak-ico{width:20px; height:20px;} .btn .ak-ico{width:1.05em; height:1.05em; vertical-align:-.16em;} .nav-large .ak-ico,h1 .ak-ico,h2 .ak-ico{vertical-align:-.12em;} /* 渐变大头图 hero: 用主题色做个有"画面"的头部, 比纯文字大标题更有质感(放首屏顶部). 角落一个大淡图标/emoji=画面感.

标题

副标题

🌊

*/ .hero{position:relative; overflow:hidden; border-radius:var(--ak-r-3); padding:22px 18px; margin-bottom:var(--ak-sp-4); color:var(--ak-on-primary); background:linear-gradient(135deg,var(--ak-primary),var(--ak-primary-2)); box-shadow:var(--ak-primary-shadow);} .hero h1{margin:0; font-size:var(--ak-fs-display); font-weight:var(--ak-fw-bold); letter-spacing:-.02em; line-height:1.15;} .hero .sub{margin-top:5px; opacity:.88; font-size:var(--ak-fs-callout);} .hero .deco{position:absolute; right:4px; bottom:-20px; font-size:104px; line-height:1; opacity:.18; pointer-events:none; user-select:none;} .hero .deco .ak-ico{width:104px; height:104px;} /* 列表/卡片进场: 整块容器加 .reveal, 里面直接子元素逐个淡入上滑(只跑一次·尊重 prefers-reduced-motion). 配 AppKit.reveal() 给重画后的列表也补上 */ .reveal > *{animation:ak-reveal .42s both;} .reveal > *:nth-child(2){animation-delay:.05s;} .reveal > *:nth-child(3){animation-delay:.1s;} .reveal > *:nth-child(4){animation-delay:.15s;} .reveal > *:nth-child(5){animation-delay:.2s;} .reveal > *:nth-child(6){animation-delay:.25s;} .reveal > *:nth-child(n+7){animation-delay:.3s;} @keyframes ak-reveal{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion:reduce){.reveal > *{animation:none;}}