/* ============================================================ * Longlight - 长光雨滴小站 | 基础样式 base.css * 职责：reset、排版、全局工具类、动效工具类、无障碍偏好 * 分层：公共控件样式一律在 components/，本文件不承载任何控件规则（FE-08） * 依赖：tokens.css（必须先引入） * ============================================================ */ /* ============================================================ * 1. 基础重置 * ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font: var(--text-body); color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out); } img, svg, video { max-width: 100%; display: block; } a { color: var(--green-900); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } /* 去除点击/触摸自带的矩形焦点框与高亮（含移动端 tap 高亮）， 保留键盘 Tab 导航的焦点轮廓，保证无障碍 */ * { -webkit-tap-highlight-color: transparent; } :focus:not(:focus-visible) { outline: none; } /* ============================================================ * 2. 排版工具类 * ============================================================ */ .text-display { font: var(--text-display); letter-spacing: var(--ls-display); } .text-h1 { font: var(--text-h1); letter-spacing: var(--ls-h1); } .text-h2 { font: var(--text-h2); letter-spacing: var(--ls-h2); } .text-h3 { font: var(--text-h3); letter-spacing: var(--ls-h3); } .text-h4 { font: var(--text-h4); } .text-body-l { font: var(--text-body-l); } .text-body { font: var(--text-body); } .text-ui { font: var(--text-ui); } .text-caption { font: var(--text-caption); letter-spacing: var(--ls-caption); } .text-mono { font: var(--text-mono); } .text-quote { font: var(--font-quote); font-style: italic; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--amber-500); } .text-accent { color: var(--warm-600); } .text-green { color: var(--green-900); } /* ============================================================ * 3. 动效工具类 * ============================================================ */ /* 元素进入 */ .animate-in { opacity: 0; transform: translateY(8px); animation: animateIn var(--duration-enter) var(--ease-out) forwards; } @keyframes animateIn { to { opacity: 1; transform: translateY(0); } } /* 元素退出 */ .animate-out { opacity: 1; transform: translateY(0); animation: animateOut var(--duration-exit) var(--ease-in) forwards; } @keyframes animateOut { to { opacity: 0; transform: translateY(-4px); } } /* 页面切换 */ .page-enter { opacity: 0; transform: translateY(6px); animation: pageEnter var(--duration-page) var(--ease-out) forwards; } @keyframes pageEnter { to { opacity: 1; transform: translateY(0); } } /* 主题过场：投影底色切换的瞬间由 core/theme 为 挂 .theme-transition，过渡结束即摘除。 过场期间统一接管颜色类属性的过渡，使全站底色 / 文字 / 边框 / 阴影 / 描边交叉渐变成 柔和的明暗迁移而非硬切；常驻不挂类，避免干扰悬停、展开等既有动效 */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color var(--duration-theme) var(--ease-in-out), color var(--duration-theme) var(--ease-in-out), border-color var(--duration-theme) var(--ease-in-out), outline-color var(--duration-theme) var(--ease-in-out), box-shadow var(--duration-theme) var(--ease-in-out), fill var(--duration-theme) var(--ease-in-out), stroke var(--duration-theme) var(--ease-in-out) !important; transition-delay: 0s !important; } /* 列表 stagger（每项延迟 20ms，最多 8 项） */ .stagger > *:nth-child(1) { animation-delay: calc(var(--stagger-item) * 0); } .stagger > *:nth-child(2) { animation-delay: calc(var(--stagger-item) * 1); } .stagger > *:nth-child(3) { animation-delay: calc(var(--stagger-item) * 2); } .stagger > *:nth-child(4) { animation-delay: calc(var(--stagger-item) * 3); } .stagger > *:nth-child(5) { animation-delay: calc(var(--stagger-item) * 4); } .stagger > *:nth-child(6) { animation-delay: calc(var(--stagger-item) * 5); } .stagger > *:nth-child(7) { animation-delay: calc(var(--stagger-item) * 6); } .stagger > *:nth-child(8) { animation-delay: calc(var(--stagger-item) * 7); } /* 展开折叠（配合 max-height 或 grid-template-rows） */ .collapsible { overflow: hidden; transition: max-height var(--duration-expand) var(--ease-out), opacity var(--duration-expand) var(--ease-out); } /* ============================================================ * 4. 工具类 * ============================================================ */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center{ align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-8 { gap: var(--space-icon-text); } .gap-16 { gap: var(--space-form-field); } .gap-24 { gap: var(--space-card); } .gap-32 { gap: var(--space-card-lg); } .w-full { width: 100%; } .h-full { height: 100%; } .text-center { text-align: center; } .text-right { text-align: right; } .mt-8 { margin-top: var(--space-icon-text); } .mt-16 { margin-top: var(--space-form-field); } .mt-24 { margin-top: var(--space-card); } .mt-32 { margin-top: var(--space-card-lg); } .mb-8 { margin-bottom: var(--space-icon-text); } .mb-16 { margin-bottom: var(--space-form-field); } .mb-24 { margin-bottom: var(--space-card); } .mb-32 { margin-bottom: var(--space-card-lg); } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } /* ============================================================ * 5. 减少动态偏好 * ============================================================ */ @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; } }