/* 主页样式（共享文档站点 scratchpad 有自己的一份，配色保持一致） */ /* 配色由 决定，见 theme.js。 两套主题只换下面这组基础色，其余颜色都用 color-mix 从它们推出来 */ :root { color-scheme: light; --coral: #ff7f50; --coral-hover: #f5693a; --coral-ink: #c4481f; /* 背景上的珊瑚色文字，保证对比度 */ --bg: #f6f0ec; --surface: #fffcfa; --line: #ebe1da; --ink: #2b211c; --muted: #7d6d64; --shadow: 0 1px 2px rgb(43 33 28 / 4%), 0 8px 24px rgb(43 33 28 / 6%); --coral-soft: color-mix(in srgb, var(--coral) 10%, var(--surface)); --coral-line: color-mix(in srgb, var(--coral) 32%, var(--surface)); --glow: 16%; /* 背景上珊瑚色光晕的浓度 */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* 深色参考 VS Code Dark Modern：中性灰，不带色偏 */ :root[data-theme="dark"] { color-scheme: dark; --coral-hover: #ff9368; --coral-ink: #ff9c78; --bg: #181818; --surface: #1f1f1f; --line: #2e2e2e; --ink: #e4e4e4; --muted: #9d9d9d; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%); --glow: 5%; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } body.glow { min-height: 100vh; background: radial-gradient(60rem 32rem at -10% -10%, rgb(255 127 80 / var(--glow)), transparent 60%), radial-gradient(50rem 30rem at 110% 110%, rgb(255 170 120 / var(--glow)), transparent 60%), var(--bg); background-attachment: fixed; } ::selection { background: var(--coral-line); } .gradient-text { background: linear-gradient(120deg, #ff9a6b, var(--coral) 45%, #ff5f45); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- 图标：Lucide 的 SVG（public/vendor/lucide/）做遮罩，颜色跟随文字 ---------- */ .icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .i-arrow-right { --i: url("/vendor/lucide/arrow-right.svg"); } .i-file { --i: url("/vendor/lucide/file-text.svg"); } .i-languages { --i: url("/vendor/lucide/languages.svg"); } .i-shield { --i: url("/vendor/lucide/shield-check.svg"); } .i-sparkles { --i: url("/vendor/lucide/sparkles.svg"); } /* 主题切换按钮：浅色时显示月亮，深色时显示太阳 */ .i-theme { --i: url("/vendor/lucide/moon.svg"); } [data-theme="dark"] .i-theme { --i: url("/vendor/lucide/sun.svg"); } .icon-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--coral-soft); color: var(--coral); } .icon-tile .icon { width: 20px; height: 20px; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: 500 13px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; } .btn:hover { background: var(--coral-soft); color: var(--coral-ink); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } .btn-outline { border-color: var(--line); background: var(--surface); } .btn-outline:hover { border-color: var(--coral-line); } .btn-primary { background: var(--coral); color: #fff; box-shadow: 0 2px 10px rgb(255 127 80 / 35%); } .btn-primary:hover { background: var(--coral-hover); color: #fff; } .btn-icon { width: 34px; padding: 0; } /* ---------- 主页 ---------- */ .home { max-width: 1100px; margin: 0 auto; padding: 24px 24px 40px; } .home-nav { display: flex; justify-content: flex-end; gap: 8px; } .home-hero { padding: 72px 0 40px; } .home-hero h1 { margin-bottom: 16px; font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -0.02em; } .home-hero p { max-width: 600px; color: var(--muted); font-size: 1.1rem; line-height: 1.7; } .section-title { margin-bottom: 14px; font-size: 1.4rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .card { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .card:hover { transform: translateY(-4px); border-color: var(--coral-line); box-shadow: 0 16px 40px rgb(255 127 80 / 14%); } .card h3 { margin: 16px 0 8px; font-size: 1.15rem; } .card p { flex: 1; margin-bottom: 20px; color: var(--muted); line-height: 1.6; } .card .btn { align-self: flex-start; } /* 整张可点的卡片 */ .card-link { color: inherit; text-decoration: none; } .card-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; } .card-link:hover .btn-primary { background: var(--coral-hover); } .card-link .i-arrow-right { transition: transform 0.2s; } .card-link:hover .i-arrow-right { transform: translateX(3px); } /* 卡片主按钮下面的一排备选链接 */ .card .card-links { display: flex; flex: none; gap: 14px; margin: 12px 0 0; font-size: 13px; } .card-links a { color: var(--muted); text-decoration: none; } .card-links a:hover { color: var(--coral-ink); text-decoration: underline; } .card.muted { border-style: dashed; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: none; } .card.muted:hover { transform: none; border-color: var(--line); box-shadow: none; } .home-footer { margin-top: 80px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }