/*
* Anthropic Style — Base CSS
* 将此文件作为所有 Anthropic 风格项目的基础层
* 包含：CSS 变量、Reset、基础排版
*
* ⚠️ 使用前请在 HTML 中先引入本地字体：
*
* 然后再引入本文件：
*
*
* 字体文件位于 assets/fonts/ 目录，无需联网即可加载。
*/
/* ═══════════════════════════════════════
1. 设计 Token
═══════════════════════════════════════ */
:root {
/* 颜色 */
--color-bg-base: #ECE9E0;
--color-bg-raised: #F5F3EC;
--color-bg-overlay: #FDFCF8;
--color-bg-inverted: #141413;
--color-text-primary: #141413;
--color-text-secondary: #6B6860;
--color-text-muted: #B0AEA5;
--color-text-inverted: #FAF9F5;
--color-text-link: #C96442;
--color-border-default: #D8D5CC;
--color-border-subtle: #E8E6DC;
--color-border-strong: #9B9890;
--color-accent-orange: #D97757;
--color-accent-warm: #C96442;
--color-accent-blue: #6A9BCC;
--color-accent-green: #788C5D;
--color-accent-sand: #C4B99A;
--color-success: #6B8F47;
--color-warning: #C9943A;
--color-error: #C0453A;
--color-info: #5A89B8;
/* 字体（Latin）
* 官方品牌字体（来自 brand-guidelines）：Poppins（heading）+ Lora（body）
* 备选字体（风格相近，可替代）：DM Sans（heading）+ DM Serif（body）
* 所有字体均已内置在 assets/fonts/ 中
*/
--font-display: 'Lora', 'DM Serif Display', 'Georgia', serif;
--font-heading: 'Poppins', 'DM Sans', 'Arial', sans-serif;
--font-body: 'Lora', 'DM Serif Text', 'Georgia', serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
/* 字重参考（Poppins 可用 300/400/500/600/700）*/
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600; /* 新增：Poppins 有 600，DM Sans 无 */
--weight-bold: 700;
/* 字体（简体中文混排）
* 英文字体在前（已声明 unicode-range，自动跳过 CJK 字符）
* 中文字体在后，作为 CJK 字符的渲染字体
*/
--font-display-cn: 'Lora', 'DM Serif Display',
'LXGW WenKai', 'Songti SC', 'STSong', 'SimSun', serif;
--font-body-cn: 'Lora', 'DM Serif Text',
'LXGW WenKai', 'Songti SC', 'STSong', 'SimSun', serif;
--font-heading-cn: 'Poppins', 'DM Sans', 'Noto Sans SC', 'Source Han Sans SC',
'PingFang SC', 'Microsoft YaHei UI',
'Microsoft YaHei', sans-serif;
/* 字号 */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 2.75rem;
--text-4xl: 3.5rem;
--text-5xl: 4.5rem;
/* 行高（Latin） */
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-normal: 1.55;
--leading-loose: 1.75;
/* 行高（中文：比 Latin 高约 15%）*/
--leading-cn-tight: 1.4; /* 大标题 */
--leading-cn-snug: 1.6; /* 小标题 */
--leading-cn-normal: 1.75; /* 正文 */
--leading-cn-loose: 1.9; /* 长文阅读 */
/* 字号（中文：正文下限提升至 15px）*/
--text-cn-sm: 0.9375rem; /* 15px，替代原 14px */
--text-cn-base: 1rem; /* 16px */
--text-cn-md: 1.125rem; /* 18px */
/* 字重 */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 700;
/* 间距 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
/* 宽度 */
--max-width-prose: 680px;
--max-width-text: 860px;
--max-width-layout: 1200px;
--max-width-full: 1440px;
/* 圆角 */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* 动效 */
--ease-default: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
:root {
--color-bg-base: #1A1916;
--color-bg-raised: #222119;
--color-bg-overlay: #2C2B26;
--color-bg-inverted: #F5F3EC;
--color-text-primary: #EAE7DC;
--color-text-secondary: #9D9A91;
--color-text-muted: #5C5A54;
--color-text-inverted: #141413;
--color-border-default: #3A3830;
--color-border-subtle: #2E2D27;
}
}
/* ═══════════════════════════════════════
2. 现代 Reset
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--color-bg-base);
color: var(--color-text-primary);
font-family: var(--font-heading);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; overflow-wrap: break-word; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
font: inherit;
color: inherit;
background: none;
border: none;
outline: none;
appearance: none;
}
/* ═══════════════════════════════════════
3. 布局工具类
═══════════════════════════════════════ */
.page-container {
width: 100%;
max-width: var(--max-width-layout);
margin: 0 auto;
padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
}
.section-hero { padding-block: clamp(80px, 12vw, 160px); }
.section-content { padding-block: clamp(64px, 8vw, 128px); }
.section-tight { padding-block: clamp(40px, 6vw, 80px); }
/* ═══════════════════════════════════════
4. 可访问性
═══════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--color-accent-orange);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════
5. 滚动动画工具
═══════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
animation: fadeUp var(--duration-slow) var(--ease-default) forwards;
}
.reveal:nth-child(1) { animation-delay: 0ms; }
.reveal:nth-child(2) { animation-delay: 80ms; }
.reveal:nth-child(3) { animation-delay: 160ms; }
.reveal:nth-child(4) { animation-delay: 240ms; }
.reveal:nth-child(5) { animation-delay: 320ms; }
.scroll-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s var(--ease-default), transform 0.5s var(--ease-default);
}
.scroll-reveal.is-visible {
opacity: 1;
transform: none;
}
/* ═══════════════════════════════════════════════
项目自定义 Token（合并保留）
═══════════════════════════════════════════════ */
:root {
/* 阴影（暖色调统一） */
--shadow-card: 0 2px 12px rgba(20, 20, 19, 0.07);
--shadow-elevated: 0 8px 32px rgba(20, 20, 19, 0.08);
--shadow-btn: 0 4px 12px rgba(217, 119, 87, 0.3);
/* UI 快捷别名 */
--font-ui: var(--font-heading);
/* 兼容别名（旧代码引用） */
--color-bg-surface: var(--color-bg-raised);
--color-bg-elevated: var(--color-bg-overlay);
--color-bg-sidebar: #F0EDE4;
--color-bg-input: var(--color-bg-overlay);
--color-border: var(--color-border-default);
--color-accent: var(--color-accent-orange);
--color-accent-dim: rgba(217, 119, 87, 0.12);
--color-accent-glow: rgba(217, 119, 87, 0.18);
--color-success-dim: rgba(107, 143, 71, 0.12);
--color-success-glow: rgba(107, 143, 71, 0.12);
--color-warning-dim: rgba(201, 148, 58, 0.12);
--color-error-dim: rgba(192, 69, 58, 0.12);
--color-text-accent: var(--color-accent-warm);
--color-text-success: var(--color-success);
--color-text-error: var(--color-error);
--color-text-warning: var(--color-warning);
--color-text-disabled: var(--color-text-muted);
--color-numeric: var(--color-accent-blue);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg-sidebar: #1E1D19;
}
}
/* ═══════════════════════════════════════
Auth Modal
═══════════════════════════════════════ */
.auth-modal-backdrop {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: 24px;
background: rgba(20, 20, 19, 0.58);
backdrop-filter: blur(10px);
}
.auth-modal-shell {
position: relative;
width: min(920px, 100%);
max-height: calc(100vh - 48px);
display: grid;
grid-template-columns: minmax(260px, 0.88fr) minmax(360px, 1.12fr);
overflow: hidden;
border: 1px solid rgba(216, 213, 204, 0.9);
border-radius: var(--radius-lg);
background: var(--color-bg-overlay);
box-shadow: 0 24px 80px rgba(20, 20, 19, 0.26);
}
.auth-modal-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-grid;
width: 36px;
height: 36px;
place-items: center;
border: 1px solid rgba(155, 152, 144, 0.28);
border-radius: var(--radius-full);
background: rgba(253, 252, 248, 0.82);
color: var(--color-text-secondary);
cursor: pointer;
transition:
color var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default);
}
.auth-modal-close:hover {
border-color: rgba(155, 152, 144, 0.55);
background: var(--color-bg-overlay);
color: var(--color-text-primary);
}
.auth-modal-close-icon {
width: 17px;
height: 17px;
}
.auth-modal-side {
min-width: 0;
padding: 48px 38px 42px;
border-right: 1px solid var(--color-border-subtle);
background: var(--color-bg-raised);
}
.auth-modal-mark,
.auth-modal-main-icon {
display: inline-grid;
place-items: center;
border: 1px solid rgba(201, 100, 66, 0.22);
border-radius: var(--radius-md);
background: rgba(217, 119, 87, 0.1);
color: var(--color-accent-warm);
}
.auth-modal-mark {
width: 44px;
height: 44px;
margin-bottom: 28px;
}
.auth-modal-mark-icon {
width: 22px;
height: 22px;
}
.auth-modal-kicker {
margin-bottom: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.auth-modal-side-title {
margin: 0;
max-width: 320px;
font-family: var(--font-display-cn);
font-size: 25px;
font-weight: 600;
line-height: var(--leading-cn-snug);
color: var(--color-text-primary);
text-wrap: pretty;
}
.auth-modal-copy {
margin-top: 16px;
max-width: 330px;
font-size: 14px;
line-height: var(--leading-cn-loose);
color: var(--color-text-secondary);
text-wrap: pretty;
}
.auth-modal-wechat {
display: inline-flex;
width: 100%;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 30px;
border: 1px solid rgba(20, 20, 19, 0.12);
border-radius: var(--radius-md);
background: var(--color-text-primary);
color: var(--color-text-inverted);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default);
}
.auth-modal-wechat:hover {
transform: translateY(-1px);
background: var(--color-accent-warm);
}
.auth-modal-note {
margin-top: 12px;
font-size: 12px;
line-height: 1.7;
color: var(--color-text-muted);
}
.auth-modal-main {
min-width: 0;
padding: 54px clamp(34px, 5vw, 64px) 46px;
background: var(--color-bg-overlay);
}
.auth-modal-main-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.auth-modal-main-icon {
width: 40px;
height: 40px;
flex: 0 0 auto;
}
.auth-modal-main-icon-svg,
.auth-modal-button-icon {
width: 18px;
height: 18px;
}
.auth-modal-title {
margin: 0;
font-family: var(--font-heading-cn);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: var(--color-text-primary);
}
.auth-modal-form,
.auth-modal-field {
display: grid;
gap: 10px;
}
.auth-modal-form {
gap: 18px;
}
.auth-modal-label {
font-size: 13px;
font-weight: 700;
color: var(--color-text-secondary);
}
.auth-modal-input {
width: 100%;
height: 48px;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
background: #fff;
padding: 0 15px;
font-family: var(--font-heading-cn);
font-size: 16px;
color: var(--color-text-primary);
transition:
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default);
}
.auth-modal-input::placeholder {
color: var(--color-text-muted);
}
.auth-modal-input:focus {
border-color: var(--color-accent-warm);
background: var(--color-bg-overlay);
box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.12);
}
.auth-modal-code-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 138px;
gap: 10px;
}
.auth-modal-code-button,
.auth-modal-primary {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: var(--radius-md);
font-family: var(--font-heading-cn);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default),
opacity var(--duration-fast) var(--ease-default);
}
.auth-modal-code-button {
border: 1px solid var(--color-border-default);
background: var(--color-bg-raised);
color: var(--color-text-primary);
}
.auth-modal-code-button:hover:not(:disabled) {
border-color: var(--color-border-strong);
background: var(--color-bg-overlay);
}
.auth-modal-primary {
width: 100%;
margin-top: 4px;
border: 1px solid var(--color-text-primary);
background: var(--color-text-primary);
color: var(--color-text-inverted);
}
.auth-modal-primary:hover:not(:disabled) {
transform: translateY(-1px);
background: var(--color-accent-warm);
border-color: var(--color-accent-warm);
}
.auth-modal-code-button:disabled,
.auth-modal-primary:disabled {
cursor: not-allowed;
opacity: 0.58;
transform: none;
}
.auth-modal-message {
margin: 0;
border-radius: var(--radius-md);
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.65;
}
.auth-modal-message-error {
border: 1px solid rgba(192, 69, 58, 0.18);
background: var(--color-error-dim);
color: var(--color-error);
}
.auth-modal-message-info {
border: 1px solid rgba(90, 137, 184, 0.18);
background: rgba(90, 137, 184, 0.1);
color: var(--color-info);
}
.auth-modal-spin {
animation: authModalSpin 0.8s linear infinite;
}
@keyframes authModalSpin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 720px) {
.auth-modal-backdrop {
align-items: end;
padding: 12px;
}
.auth-modal-shell {
max-height: calc(100vh - 24px);
grid-template-columns: 1fr;
overflow-y: auto;
}
.auth-modal-side {
padding: 30px 22px 22px;
border-right: 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.auth-modal-mark {
margin-bottom: 18px;
}
.auth-modal-side-title {
max-width: none;
font-size: 21px;
}
.auth-modal-copy {
max-width: none;
margin-top: 10px;
font-size: 13px;
}
.auth-modal-wechat {
margin-top: 20px;
}
.auth-modal-main {
padding: 28px 22px 24px;
}
.auth-modal-main-head {
margin-bottom: 20px;
}
.auth-modal-title {
font-size: 21px;
}
.auth-modal-code-row {
grid-template-columns: 1fr;
}
}