/* ========================================================================== HugeCMS Default Theme — 原生 CSS（无构建步骤，浏览器直接加载） 深色模式：partials/theme-mode-init.blade.php 在 上切换 .dark class， 此处通过 html.dark 覆盖 CSS 自定义属性实现。 响应式断点：sm = 640px，md = 768px，lg = 1024px（与原 Tailwind 设计一致）。 ========================================================================== */ /* ---------- 设计变量（浅色） ---------- */ :root { --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --font-serif: 'Georgia', 'Cambria', 'Times New Roman', Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* 原 paper / ink 色板 */ --paper-50: #FBFBF9; --paper-100: #F4F4F0; --paper-200: #E7E7E1; --ink-900: #121215; --ink-800: #18181B; --ink-700: #27272A; --ink-600: #52525B; --ink-400: #A1A1AA; /* 语义化变量 */ --bg-page: #FBFBF9; --bg-card: #ffffff; --bg-header: rgba(255, 255, 255, 0.8); --bg-footer: #ffffff; --bg-modal: #ffffff; --bg-input: #fafafa; --bg-chip: #f4f4f5; --bg-hover: #f4f4f5; --bg-soft: #fafafa; --text-body: #18181b; --text-heading: #18181b; --text-secondary: #52525b; --text-muted: #71717a; --text-faint: #a1a1aa; --border: #e4e4e7; --border-soft: #f4f4f5; --border-card: rgba(228, 228, 231, 0.9); --border-card-hover: rgba(161, 161, 170, 0.4); --accent: #b45309; /* amber-700 */ --accent-strong: #d97706; /* amber-600 */ --progress-bg: #18181B; --btn-bg: #18181b; --btn-text: #ffffff; --nav-link: #475569; /* slate-600 */ --nav-accent: #4f46e5; /* indigo-600 */ --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02); } /* ---------- 设计变量（深色） ---------- */ html.dark { --bg-page: #09090B; --bg-card: #121215; --bg-header: rgba(9, 9, 11, 0.8); --bg-footer: #09090b; --bg-modal: #18181b; --bg-input: #18181b; --bg-chip: #27272a; --bg-hover: #27272a; --bg-soft: rgba(24, 24, 27, 0.6); --text-body: #f4f4f5; --text-heading: #ffffff; --text-secondary: #a1a1aa; --text-muted: #a1a1aa; --text-faint: #a1a1aa; --border: #27272a; --border-soft: #27272a; --border-card: rgba(39, 39, 42, 0.9); --border-card-hover: rgba(113, 113, 122, 0.4); --accent: #fbbf24; /* amber-400 */ --accent-strong: #fbbf24; --progress-bg: #F4F4F0; --btn-bg: #f4f4f5; --btn-text: #18181b; --nav-link: #cbd5e1; /* slate-300 */ --nav-accent: #818cf8; /* indigo-400 */ --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.3); } /* ---------- 基础重置（替代 Tailwind preflight 中用到的部分） ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; background-color: var(--bg-page); color: var(--text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.15s ease, color 0.15s ease; } h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure { margin: 0; } ul, ol { padding: 0; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ::selection { background-color: #f59e0b; color: #ffffff; } /* ---------- 通用布局 ---------- */ .container { width: 100%; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .container-narrow { width: 100%; max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .container-form { width: 100%; max-width: 28rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container, .container-narrow { padding-left: 1.5rem; padding-right: 1.5rem; } } .site-main { flex: 1 0 auto; } /* 图标尺寸辅助 */ .icon-xs { width: 0.875rem; height: 0.875rem; } .icon-sm { width: 1rem; height: 1rem; } .icon-md { width: 1.25rem; height: 1.25rem; } /* 文本截断 */ .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-2 { -webkit-line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; } /* 通用小文本 */ .meta-text { font-size: 0.75rem; color: var(--text-muted); } .text-faint { color: var(--text-faint); } /* 强调链接（琥珀色） */ .accent-link { font-weight: 600; color: var(--accent); } .accent-link:hover { text-decoration: underline; } /* 阅读进度条（#reading-progress 为 js/app.js 钩子，勿改名） */ #reading-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background-color: var(--progress-bg); z-index: 60; transition: width 0.1s ease-out; } /* ---------- 卡片基础（原 card-craft） ---------- */ .card { background-color: var(--bg-card); border: 1px solid var(--border-card); border-radius: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--border-card-hover); } /* ---------- 站点头部 ---------- */ .site-header { position: sticky; top: 0; z-index: 40; width: 100%; background-color: var(--bg-header); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background-color 0.15s ease, border-color 0.15s ease; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; } .site-brand { display: flex; align-items: center; gap: 0.75rem; } .brand-link { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; letter-spacing: -0.025em; font-size: 1.125rem; color: var(--text-heading); transition: opacity 0.15s ease; } .brand-link:hover { opacity: 0.8; } .brand-logo { height: 1.75rem; width: auto; } .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; background-color: var(--btn-bg); color: var(--btn-text); font-family: var(--font-serif); font-weight: 900; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; } .brand-name { font-family: var(--font-serif); } /* 主导航 */ .nav-main { display: none; align-items: center; gap: 1.5rem; font-size: 0.75rem; font-weight: 500; } @media (min-width: 768px) { .nav-main { display: flex; } } .nav-link { font-weight: 500; color: var(--nav-link); transition: color 0.15s ease; } .nav-link:hover { color: var(--nav-accent); } .nav-link.active { color: var(--nav-accent); font-weight: 600; } /* 带下拉的菜单项 */ .nav-item { position: relative; } .nav-dropdown-btn { display: flex; align-items: center; gap: 0.25rem; } .nav-caret { transition: transform 0.15s ease; } .nav-item:hover .nav-caret { transform: rotate(180deg); } .nav-dropdown { display: none; position: absolute; left: 0; top: 100%; padding-top: 0.5rem; width: 12rem; z-index: 50; } .nav-item:hover .nav-dropdown { display: block; } .nav-dropdown-panel { background-color: #ffffff; border: 1px solid #f1f5f9; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); padding-top: 0.5rem; padding-bottom: 0.5rem; } html.dark .nav-dropdown-panel { background-color: #1e293b; border-color: rgba(51, 65, 85, 0.6); } .nav-dropdown-link { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; color: #334155; transition: color 0.15s ease, background-color 0.15s ease; } .nav-dropdown-link:hover { background-color: #eef2ff; color: #4f46e5; } html.dark .nav-dropdown-link { color: #cbd5e1; } html.dark .nav-dropdown-link:hover { background-color: rgba(51, 65, 85, 0.5); color: #818cf8; } /* 头部右侧控制区 */ .header-controls { display: flex; align-items: center; gap: 0.75rem; } .search-trigger { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .search-trigger:hover { background-color: var(--bg-hover); } .search-trigger-label, .search-kbd { display: none; } @media (min-width: 640px) { .search-trigger-label { display: inline; } .search-kbd { display: inline-block; } } .search-kbd { padding: 0.125rem 0.375rem; font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); background-color: var(--bg-chip); border: 1px solid var(--border); border-radius: 0.25rem; } .header-auth { display: none; align-items: center; gap: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--border); font-size: 0.75rem; font-weight: 500; } @media (min-width: 640px) { .header-auth { display: flex; } } .header-auth-link { color: var(--text-secondary); transition: color 0.15s ease; } .header-auth-link:hover { color: var(--text-heading); } .logout-btn { color: var(--text-faint); transition: color 0.15s ease; } .logout-btn:hover { color: #e11d48; } html.dark .logout-btn:hover { color: #fb7185; } .inline-form { display: inline; } /* 主题切换按钮（#theme-toggle 为 JS 钩子，勿改名） */ .theme-toggle { padding: 0.5rem; border-radius: 9999px; color: #71717a; transition: color 0.15s ease; } .theme-toggle:hover { color: #3f3f46; } html.dark .theme-toggle { color: #a1a1aa; } html.dark .theme-toggle:hover { color: #e4e4e7; } .theme-icon-sun { display: none; } html.dark .theme-icon-sun { display: block; } html.dark .theme-icon-moon { display: none; } /* ---------- 按钮 ---------- */ .btn-primary { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem; background-color: var(--btn-bg); color: var(--btn-text); font-weight: 700; font-size: 0.75rem; text-align: center; transition: opacity 0.15s ease; } .btn-primary:hover { opacity: 0.9; } .btn-sm { padding: 0.375rem 0.75rem; } .btn-block { display: block; width: 100%; } .btn-secondary { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem; background-color: #27272a; color: #ffffff; font-weight: 700; font-size: 0.75rem; transition: background-color 0.15s ease; } .btn-secondary:hover { background-color: #3f3f46; } .btn-indigo { display: inline-block; padding: 0.625rem 1.25rem; border-radius: 0.75rem; background-color: #4f46e5; color: #ffffff; font-weight: 700; font-size: 0.75rem; box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2), 0 2px 4px -2px rgba(99, 102, 241, 0.2); transition: background-color 0.15s ease; } .btn-indigo:hover { background-color: #4338ca; } .btn-indigo-lg { padding: 0.75rem 1rem; font-size: 0.875rem; } .btn-light { display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; border-radius: 0.5rem; background-color: #ffffff; color: #18181b; font-weight: 700; font-size: 0.75rem; transition: background-color 0.15s ease; } .btn-light:hover { background-color: #f4f4f5; } .btn-outline { display: inline-block; padding: 0.375rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); transition: color 0.15s ease, border-color 0.15s ease; } .btn-outline:hover { color: var(--text-heading); } /* ---------- 表单 ---------- */ .form-field { margin-bottom: 0; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; color: #3f3f46; margin-bottom: 0.25rem; } html.dark .form-label { color: #d4d4d8; } .form-label-slate { color: #334155; } html.dark .form-label-slate { color: #cbd5e1; } .form-input, .form-textarea { width: 100%; padding: 0.625rem 0.875rem; border-radius: 0.5rem; border: 1px solid var(--border); background-color: var(--bg-input); color: var(--text-heading); font-size: 0.875rem; transition: border-color 0.15s ease; } .form-input:focus, .form-textarea:focus { outline: none; border-color: #a1a1aa; } .form-input-sm { padding: 0.5rem 0.75rem; font-size: 0.75rem; } .form-textarea { padding: 0.75rem; border-radius: 0.75rem; background-color: var(--bg-card); font-size: 0.75rem; resize: vertical; } /* slate / indigo 风格输入框（找回、重置密码页） */ .form-input-indigo { width: 100%; padding: 0.625rem 1rem; border-radius: 0.75rem; border: 1px solid #e2e8f0; background-color: #f8fafc; color: #0f172a; font-size: 0.875rem; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .form-input-indigo:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); } html.dark .form-input-indigo { border-color: #334155; background-color: #0f172a; color: #ffffff; } .form-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .form-link { font-size: 0.75rem; color: var(--text-muted); transition: color 0.15s ease; } .form-link:hover { color: var(--text-heading); } .checkbox-row { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.25rem; } .form-checkbox { border-radius: 0.25rem; accent-color: #18181b; } .checkbox-label { font-size: 0.75rem; color: var(--text-secondary); } /* ---------- 提示框 ---------- */ .alert { padding: 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; border: 1px solid transparent; } .alert-error { background-color: #fff1f2; border-color: #fecdd3; color: #e11d48; } html.dark .alert-error { background-color: rgba(76, 5, 25, 0.4); border-color: rgba(136, 19, 55, 0.6); color: #fb7185; } .alert-success { padding: 1rem; border-radius: 1rem; background-color: #ecfdf5; border-color: #a7f3d0; color: #059669; } html.dark .alert-success { background-color: rgba(2, 44, 34, 0.4); border-color: rgba(6, 78, 59, 0.6); color: #34d399; } /* ---------- 站点底部 ---------- */ .site-footer { margin-top: 5rem; border-top: 1px solid var(--border); background-color: var(--bg-footer); transition: background-color 0.15s ease, border-color 0.15s ease; } .footer-inner { padding-top: 3rem; padding-bottom: 3rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-soft); } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(12, 1fr); } .footer-brand { grid-column: span 5; } .footer-links { grid-column: span 7; justify-content: flex-end; } } .footer-brand > * + * { margin-top: 1rem; } .footer-brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: var(--text-heading); display: flex; align-items: center; gap: 0.5rem; } .footer-desc { font-size: 0.75rem; color: var(--text-muted); max-width: 24rem; line-height: 1.625; } .footer-links { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; font-size: 0.75rem; } .footer-col > * + * { margin-top: 0.5rem; } .footer-heading { font-weight: 700; color: var(--text-heading); font-size: 0.75rem; } .footer-list { list-style: none; color: var(--text-muted); } .footer-list > li + li { margin-top: 0.375rem; } .footer-list a { transition: color 0.15s ease; } .footer-list a:hover { color: var(--text-heading); } .footer-bottom { padding-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--text-faint); } @media (min-width: 640px) { .footer-bottom { flex-direction: row; } } .footer-icp { display: flex; align-items: center; gap: 1rem; } /* ---------- 搜索弹窗（#search-modal 等为 JS 钩子，勿改名） ---------- */ .search-modal { display: none; position: fixed; inset: 0; z-index: 50; background-color: rgba(9, 9, 11, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 5rem 1rem 0; } .search-modal.is-open { display: flex; align-items: flex-start; justify-content: center; } .search-modal-panel { background-color: var(--bg-modal); border: 1px solid var(--border); width: 100%; max-width: 36rem; border-radius: 1rem; padding: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .search-modal-panel > * + * { margin-top: 1rem; } .search-modal-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.75rem; } .search-modal-field { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0%; color: var(--text-faint); } .search-modal-input { width: 100%; background: transparent; border: none; font-size: 0.875rem; color: var(--text-heading); } .search-modal-input:focus { outline: none; } .search-modal-input::placeholder { color: #a1a1aa; } .search-modal-close { font-size: 0.75rem; color: var(--text-faint); padding: 0.25rem 0.5rem; transition: color 0.15s ease; } .search-modal-close:hover { color: var(--text-secondary); } .search-modal-hint { padding-top: 1.5rem; padding-bottom: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--text-faint); } /* ---------- 首页 ---------- */ .home-page { padding-top: 2.5rem; padding-bottom: 2.5rem; } .home-page > * + * { margin-top: 3rem; } .home-hero { border-bottom: 1px solid var(--border); padding-bottom: 2.5rem; } .home-hero-inner { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .home-hero-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .home-hero-text { max-width: 42rem; } .home-hero-text > * + * { margin-top: 0.5rem; } .home-title { font-size: 1.875rem; line-height: 2.25rem; font-family: var(--font-serif); font-weight: 900; letter-spacing: -0.025em; color: var(--text-heading); } @media (min-width: 640px) { .home-title { font-size: 2.25rem; line-height: 2.5rem; } } .home-desc { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.625; } @media (min-width: 640px) { .home-desc { font-size: 1rem; } } .social-bar { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); } .icon-btn { padding: 0.5rem; border-radius: 0.5rem; color: inherit; transition: color 0.15s ease, background-color 0.15s ease; } .icon-btn:hover { background-color: var(--bg-hover); color: var(--text-heading); } /* 小节标签 */ .section-label { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .section-label-bordered { padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-soft); } /* 精选文章 */ .featured-section > * + * { margin-top: 1rem; } .featured-card { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; padding: 1.5rem; } @media (min-width: 640px) { .featured-card { padding: 2rem; } } @media (min-width: 1024px) { .featured-card { grid-template-columns: repeat(12, 1fr); } .featured-cover { grid-column: span 6; } .featured-body { grid-column: span 6; } .featured-body-full { grid-column: span 12; } } .featured-body > * + * { margin-top: 1rem; } .cover-frame { overflow: hidden; border-radius: 0.75rem; background-color: var(--bg-chip); } .aspect-16-10 { aspect-ratio: 16 / 10; } .aspect-16-9 { aspect-ratio: 16 / 9; } .aspect-21-9 { aspect-ratio: 21 / 9; } .cover-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .article-card:hover .cover-img, .featured-card:hover .cover-img, .post-card:hover .cover-img, .block-card:hover .cover-img { transform: scale(1.05); } .article-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } .article-meta-sm { gap: 0.5rem; } .featured-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; font-family: var(--font-serif); color: var(--text-heading); transition: color 0.15s ease; } @media (min-width: 640px) { .featured-title { font-size: 1.875rem; line-height: 2.25rem; } } .featured-card:hover .featured-title { color: var(--accent); } .featured-summary { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.625; } .featured-footer { padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; } .read-more { font-size: 0.75rem; font-weight: 600; color: var(--text-heading); transition: color 0.15s ease; } .read-more:hover { color: var(--accent); } /* 首页主区布局 */ .home-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .home-layout { grid-template-columns: repeat(12, 1fr); } .home-main { grid-column: span 8; } .home-sidebar { grid-column: span 4; } } .home-main > * + * { margin-top: 1.5rem; } .home-sidebar > * + * { margin-top: 2rem; } .article-list > * + * { margin-top: 1.5rem; } /* 文章列表卡片 */ .article-card { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; padding: 1.25rem; border-radius: 0.75rem; } @media (min-width: 640px) { .article-card { flex-direction: row; padding: 1.5rem; } } .article-card-cover { width: 100%; flex-shrink: 0; } @media (min-width: 640px) { .article-card-cover { width: 11rem; } } .article-card-body { flex: 1 1 0%; } .article-card-body > * + * { margin-top: 0.5rem; } .article-card-title { font-weight: 700; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.75rem; color: var(--text-heading); transition: color 0.15s ease; } .article-card:hover .article-card-title { color: var(--accent); } .article-card-summary { font-size: 0.75rem; color: var(--text-muted); line-height: 1.625; } .empty-state { padding-top: 3rem; padding-bottom: 3rem; text-align: center; font-size: 0.75rem; color: var(--text-faint); } .empty-state-lg { padding-top: 5rem; padding-bottom: 5rem; } .pagination-wrap { padding-top: 1rem; } /* 侧栏小部件 */ .widget { padding: 1.5rem; } .widget > * + * { margin-top: 1rem; } .widget-head > * + * { margin-top: 0.25rem; } .widget-title { font-family: var(--font-serif); font-weight: 700; font-size: 0.875rem; color: var(--text-heading); } .widget-title-bordered { border-bottom: 1px solid var(--border-soft); padding-bottom: 0.5rem; } .widget-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.625; } .newsletter-form > * + * { margin-top: 0.5rem; } .category-list > * + * { margin-top: 0.25rem; } .category-item { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; border-radius: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); transition: color 0.15s ease, background-color 0.15s ease; } .category-item:hover { background-color: var(--bg-soft); color: var(--text-heading); } .category-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } /* ---------- 文章详情页 ---------- */ .article-page { padding-top: 2.5rem; padding-bottom: 2.5rem; } .article-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .article-layout { grid-template-columns: repeat(12, 1fr); } .article-main { grid-column: span 8; } .article-sidebar { display: block; grid-column: span 4; } } .article-main > * + * { margin-top: 2.5rem; } .article-sidebar { display: none; } .article-header { border-bottom: 1px solid var(--border); padding-bottom: 2rem; } .article-header > * + * { margin-top: 1rem; } .article-title { font-size: 1.875rem; line-height: 2.25rem; font-family: var(--font-serif); font-weight: 700; color: var(--text-heading); letter-spacing: -0.025em; } @media (min-width: 640px) { .article-title { font-size: 2.25rem; line-height: 2.5rem; } } @media (min-width: 1024px) { .article-title { font-size: 3rem; line-height: 1.2; } } .article-author { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); padding-top: 0.5rem; } .author-name { font-weight: 700; color: var(--text-heading); } .author-role { color: var(--text-faint); font-size: 11px; display: block; } /* 头像 */ .avatar { border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .avatar-sm { width: 1.75rem; height: 1.75rem; background-color: #e4e4e7; color: #3f3f46; } html.dark .avatar-sm { background-color: #27272a; color: #d4d4d8; } .avatar-lg { width: 3rem; height: 3rem; font-size: 1.125rem; } .avatar-xl { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; } .avatar-invert { background-color: var(--btn-bg); color: var(--btn-text); font-family: var(--font-serif); font-weight: 900; } .article-cover { border: 1px solid var(--border); } .article-summary { padding: 1rem; border-radius: 0.75rem; background-color: var(--bg-soft); border-left: 4px solid #d97706; color: #3f3f46; font-size: 0.875rem; line-height: 1.625; } html.dark .article-summary { color: #d4d4d8; } /* 正文排版（.prose 同时是 js/app.js 的选择器 article.prose，勿改名） */ .prose { color: #27272A; line-height: 1.8; font-size: 1rem; } html.dark .prose { color: #D4D4D8; } .prose > * + * { margin-top: 1.25rem; } .article-body.prose > * + * { margin-top: 1.5rem; } .prose h1, .prose h2, .prose h3, .prose h4 { color: #09090B; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; scroll-margin-top: 5rem; } html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose h4 { color: #FAFAFA; } .prose h1 { font-size: 1.875rem; } .prose h2 { font-size: 1.5rem; } .prose h3 { font-size: 1.25rem; } .prose h4 { font-size: 1.125rem; } .prose a { color: var(--accent); text-decoration: underline; } .prose ul { list-style: disc; padding-left: 1.5rem; } .prose ol { list-style: decimal; padding-left: 1.5rem; } .prose blockquote { border-left: 3px solid #D97706; padding-left: 1.25rem; font-style: italic; color: #52525B; margin: 1.5rem 0; } html.dark .prose blockquote { border-left-color: #F59E0B; color: #A1A1AA; } .prose pre { background-color: #18181B; color: #F4F4F6; border-radius: 0.75rem; padding: 1.25rem; overflow-x: auto; font-size: 0.875rem; } .prose code { font-family: var(--font-mono); font-size: 0.875em; } .prose pre code { background: none; padding: 0; } .prose img { border-radius: 0.75rem; margin: 1.5rem 0; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } /* 互动栏（点赞 / 标签 / 分享） */ .interaction-bar { padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .interaction-group { display: flex; align-items: center; gap: 0.5rem; } .like-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.75rem; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; transition: all 0.15s ease; } .like-btn:hover { border-color: #d97706; } html.dark .like-btn:hover { border-color: #fbbf24; } /* js/app.js 点赞后切换 is-liked */ .like-btn.is-liked { background-color: #fef3c7; color: #b45309; } html.dark .like-btn.is-liked { background-color: rgba(69, 26, 3, 0.6); color: #fbbf24; } .like-count { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background-color: var(--bg-chip); font-family: var(--font-mono); font-size: 11px; } .tag-chip { padding: 0.25rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem; font-family: var(--font-mono); background-color: var(--bg-chip); color: var(--text-secondary); transition: color 0.15s ease; } .tag-chip:hover { color: var(--accent); } /* 作者简介卡 */ .author-box { padding: 1.5rem; border-radius: 1rem; background-color: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: flex-start; gap: 1rem; } .author-box-text { font-size: 0.75rem; } .author-box-text > * + * { margin-top: 0.25rem; } .author-box-title { font-weight: 700; color: var(--text-heading); font-size: 0.875rem; } .author-box-desc { color: var(--text-muted); line-height: 1.625; } /* 评论区 */ .comments-section { padding-top: 1.5rem; border-top: 1px solid var(--border); } .comments-section > * + * { margin-top: 1.5rem; } .comments-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.125rem; color: var(--text-heading); } .comment-form > * + * { margin-top: 0.75rem; } .comment-form-foot { display: flex; align-items: center; justify-content: space-between; } .hint-text { font-size: 11px; color: var(--text-faint); } .comment-list { padding-top: 0.5rem; } .comment-list > * + * { margin-top: 1rem; } .comment-card { padding: 1rem; border-radius: 0.75rem; border: 1px solid var(--border-soft); background-color: var(--bg-card); } .comment-card > * + * { margin-top: 0.5rem; } .comment-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; } .comment-author { font-weight: 700; color: var(--text-heading); } .comment-time { color: var(--text-faint); font-size: 11px; } .comment-text { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.625; } /* 目录（TOC）侧栏 */ .toc-sticky { position: sticky; top: 6rem; } .toc-card { padding: 1.25rem; } .toc-card > * + * { margin-top: 0.75rem; } .toc-title { font-family: var(--font-serif); font-weight: 700; font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .toc-list { list-style: none; } .toc-list > li + li { margin-top: 0.25rem; } /* 以下三个类由 js/app.js 动态生成，勿改名 */ .toc-link { display: block; font-size: 0.75rem; font-weight: 500; padding-top: 0.25rem; padding-bottom: 0.25rem; color: #334155; transition: color 0.15s ease; } .toc-link:hover { color: #d97706; } html.dark .toc-link { color: #cbd5e1; } html.dark .toc-link:hover { color: #fbbf24; } .toc-link-sub { padding-left: 0.75rem; font-weight: 400; color: #64748b; } html.dark .toc-link-sub { color: #94a3b8; } .toc-link.toc-active { color: #d97706; font-weight: 700; } html.dark .toc-link.toc-active { color: #fbbf24; } .toc-empty { font-size: 0.75rem; color: #94a3b8; font-style: italic; } html.dark .toc-empty { color: #64748b; } /* ---------- 分类 / 标签页 ---------- */ .archive-page { padding-top: 2.5rem; padding-bottom: 2.5rem; } .archive-page > * + * { margin-top: 2.5rem; } .page-hero { border-bottom: 1px solid var(--border); padding-bottom: 2rem; } .page-hero > * + * { margin-top: 0.75rem; } .page-hero-kicker { font-size: 0.75rem; color: var(--accent); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .page-hero-kicker-mono { font-family: var(--font-mono); text-transform: none; } .page-title { font-size: 1.875rem; line-height: 2.25rem; font-family: var(--font-serif); font-weight: 900; color: var(--text-heading); letter-spacing: -0.025em; } .page-desc { color: var(--text-muted); font-size: 0.75rem; max-width: 36rem; line-height: 1.625; } @media (min-width: 640px) { .page-desc { font-size: 0.875rem; } } .page-count { font-size: 0.75rem; color: var(--text-faint); font-family: var(--font-mono); } .cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } } .cards-grid .empty-state { grid-column: 1 / -1; } .archive-list > * + * { margin-top: 1.5rem; } /* 网格文章卡（分类 / 标签页） */ .post-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-radius: 0.75rem; } .post-card-main > * + * { margin-top: 0.75rem; } .post-card-date { font-size: 0.75rem; color: var(--text-faint); } .post-card-title { font-weight: 700; font-family: var(--font-serif); font-size: 1rem; line-height: 1.5rem; color: var(--text-heading); transition: color 0.15s ease; } .post-card:hover .post-card-title { color: var(--accent); } .post-card-summary { font-size: 0.75rem; color: var(--text-muted); line-height: 1.625; } .post-card-footer { padding-top: 0.75rem; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--text-faint); } .post-card-footer a { font-weight: 500; transition: color 0.15s ease; } .post-card-footer a:hover { color: var(--text-heading); } /* ---------- 独立页面 ---------- */ .page-single { padding-top: 2.5rem; padding-bottom: 2.5rem; } .page-single > * + * { margin-top: 2rem; } .page-single-header { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; } .page-single-header > * + * { margin-top: 0.5rem; } @media (min-width: 640px) { .page-single-header .page-title { font-size: 2.25rem; line-height: 2.5rem; } } .page-blocks > * + * { margin-top: 2.5rem; } .page-updated { font-size: 0.75rem; color: var(--text-faint); font-family: var(--font-mono); } /* ---------- 认证页 ---------- */ .auth-page { padding-top: 3rem; padding-bottom: 3rem; } .auth-card { padding: 2rem; } .auth-card > * + * { margin-top: 1.5rem; } .auth-head { text-align: center; } .auth-head > * + * { margin-top: 0.25rem; } .auth-title { font-size: 1.5rem; line-height: 2rem; font-family: var(--font-serif); font-weight: 900; color: var(--text-heading); } .auth-subtitle { font-size: 0.75rem; color: var(--text-muted); } .auth-form > * + * { margin-top: 1rem; } .auth-foot { text-align: center; font-size: 0.75rem; color: var(--text-muted); padding-top: 0.5rem; border-top: 1px solid var(--border-soft); } .auth-foot-link { color: var(--text-heading); font-weight: 600; } .auth-foot-link:hover { text-decoration: underline; } /* slate / indigo 风格认证卡（找回、重置密码页） */ .auth-card-alt { background-color: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .auth-card-alt > * + * { margin-top: 1.5rem; } html.dark .auth-card-alt { background-color: rgba(30, 41, 59, 0.8); border-color: rgba(51, 65, 85, 0.6); } .auth-title-alt { font-size: 1.5rem; line-height: 2rem; font-weight: 900; color: #0f172a; } html.dark .auth-title-alt { color: #ffffff; } .auth-subtitle-alt { font-size: 0.75rem; color: #64748b; } html.dark .auth-subtitle-alt { color: #94a3b8; } .auth-foot-alt { text-align: center; font-size: 0.75rem; color: #64748b; padding-top: 0.5rem; border-top: 1px solid #f1f5f9; } html.dark .auth-foot-alt { color: #94a3b8; border-top-color: #334155; } .auth-foot-link-alt { color: #4f46e5; font-weight: 600; } .auth-foot-link-alt:hover { text-decoration: underline; } html.dark .auth-foot-link-alt { color: #818cf8; } /* ---------- 会员中心 ---------- */ .dashboard-page { padding-top: 2.5rem; padding-bottom: 2.5rem; } .dashboard-page > * + * { margin-top: 2rem; } .profile-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .profile-card { padding: 2rem; flex-direction: row; align-items: center; justify-content: space-between; } } .profile-identity { display: flex; align-items: center; gap: 1rem; text-align: center; } @media (min-width: 640px) { .profile-identity { text-align: left; } } .profile-name { font-size: 1.125rem; font-family: var(--font-serif); font-weight: 700; color: var(--text-heading); } .profile-email { font-size: 0.75rem; color: var(--text-muted); } .badge-outline { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-family: var(--font-mono); background-color: var(--bg-chip); color: var(--text-secondary); border: 1px solid var(--border); } .form-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } .form-card { padding: 1.5rem; } .form-card > * + * { margin-top: 1rem; } .form-card-title { font-size: 0.875rem; font-family: var(--font-serif); font-weight: 700; color: var(--text-heading); border-bottom: 1px solid var(--border-soft); padding-bottom: 0.75rem; } /* ---------- 页面构建区块（blocks） ---------- */ .block-wrap { padding-top: 1.5rem; padding-bottom: 1.5rem; } .block-articles { padding-top: 1.5rem; padding-bottom: 1.5rem; } .block-articles > * + * { margin-top: 1.5rem; } .block-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 0.5rem; } html.dark .block-title { color: #ffffff; } .block-title-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background-color: #4f46e5; } /* slate 风格区块卡 */ .block-card { background-color: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: box-shadow 0.15s ease; } .block-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } html.dark .block-card { background-color: rgba(30, 41, 59, 0.8); border-color: rgba(51, 65, 85, 0.6); } .block-card-main > * + * { margin-top: 0.75rem; } .block-card-cover { background-color: #f1f5f9; } html.dark .block-card-cover { background-color: #334155; } .block-card-title { font-weight: 700; font-size: 1rem; line-height: 1.5rem; color: #0f172a; transition: color 0.15s ease; } .block-card:hover .block-card-title { color: #4f46e5; } html.dark .block-card-title { color: #ffffff; } html.dark .block-card:hover .block-card-title { color: #818cf8; } .block-card-summary { font-size: 0.75rem; color: #64748b; line-height: 1.625; } html.dark .block-card-summary { color: #94a3b8; } .block-card-footer { padding-top: 0.75rem; border-top: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #94a3b8; } html.dark .block-card-footer { border-top-color: rgba(51, 65, 85, 0.6); color: #64748b; } .block-card-footer a { font-weight: 500; transition: color 0.15s ease; } .block-card-footer a:hover { color: #4f46e5; } html.dark .block-card-footer a:hover { color: #818cf8; } /* CTA 区块 */ .block-cta { padding: 2rem; border-radius: 1.5rem; background-color: #eef2ff; border: 1px solid #e0e7ff; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .block-cta > * + * { margin-top: 1rem; } html.dark .block-cta { background-color: #1e293b; border-color: rgba(51, 65, 85, 0.6); } .block-cta-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; } html.dark .block-cta-title { color: #ffffff; } .block-cta-desc { font-size: 0.75rem; color: #475569; max-width: 28rem; margin-left: auto; margin-right: auto; } html.dark .block-cta-desc { color: #94a3b8; } /* Hero 区块 */ .block-hero { padding: 3rem 2rem; border-radius: 1rem; background-color: #18181b; color: #ffffff; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .block-hero > * + * { margin-top: 1rem; } .block-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-family: var(--font-mono); background-color: #27272a; color: #fbbf24; } .block-hero-title { font-size: 1.875rem; line-height: 2.25rem; font-family: var(--font-serif); font-weight: 900; letter-spacing: -0.025em; color: #ffffff; } @media (min-width: 640px) { .block-hero-title { font-size: 2.25rem; line-height: 2.5rem; } } .block-hero-subtitle { color: #a1a1aa; font-size: 0.75rem; max-width: 36rem; margin-left: auto; margin-right: auto; line-height: 1.625; } @media (min-width: 640px) { .block-hero-subtitle { font-size: 0.875rem; } } .block-hero-action { padding-top: 1rem; } /* 图片区块 */ .block-image { margin-top: 1.5rem; margin-bottom: 1.5rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .block-image img { width: 100%; height: auto; object-fit: cover; } .block-image-caption { text-align: center; font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; font-style: italic; } /* 分割线区块 */ .block-divider { margin-top: 2rem; margin-bottom: 2rem; border: 0; border-top: 1px solid #e2e8f0; } html.dark .block-divider { border-top-color: #1e293b; } /* 双栏区块 */ .block-two-column { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; } @media (min-width: 768px) { .block-two-column { grid-template-columns: repeat(2, 1fr); } } .block-col > * + * { margin-top: 1rem; } .block-col-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #0f172a; } html.dark .block-col-title { color: #ffffff; } .block-col-text { color: #475569; font-size: 0.875rem; line-height: 1.625; } html.dark .block-col-text { color: #cbd5e1; }