/* 字体：Inter（拉丁）+ Noto Sans SC（中文），见各页 引入 */ /* ── App Store 设计变量 ── */ :root { --store-bg: #ffffff; --store-surface: #ffffff; --store-text: #1d1d1f; --store-text-secondary: #6e6e73; --store-text-tertiary: #86868b; --store-border: rgba(0, 0, 0, 0.08); --store-accent: #0071e3; --store-accent-hover: #0077ed; --store-radius-lg: 20px; --store-radius-md: 14px; --store-radius-sm: 12px; --store-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.12); --store-transition: 0.28s cubic-bezier(0.25, 0.1, 0.25, 1); --store-max-width: 1080px; /* 字体：Inter + Noto Sans SC */ --font-display: 'Inter', 'Noto Sans SC', system-ui, sans-serif; --font-text: 'Inter', 'Noto Sans SC', system-ui, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; scrollbar-gutter: stable; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 1.47059; letter-spacing: -0.022em; color: var(--store-text); background-color: var(--store-bg); min-height: 100%; display: flex; flex-direction: column; font-feature-settings: 'kern' 1; font-kerning: normal; } .container { max-width: var(--store-max-width); margin: 0 auto; padding: 0 24px; } /* ── 顶栏：毛玻璃导航 ── */ .header { position: sticky; top: 0; z-index: 100; background: rgba(251, 251, 253, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--store-border); padding: 14px 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .header-brand { min-width: 0; } .logo { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.03em; color: var(--store-text); line-height: 1.15; text-rendering: optimizeLegibility; } .tagline { font-family: var(--font-text); font-size: 0.8125rem; font-weight: 400; color: var(--store-text-tertiary); letter-spacing: -0.01em; line-height: 1.33337; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-nav a { font-family: var(--font-text); font-size: 0.875rem; font-weight: 400; letter-spacing: -0.01em; color: var(--store-accent); text-decoration: none; padding: 6px 12px; border-radius: 980px; transition: background var(--store-transition); } .header-nav a:hover { background: rgba(0, 113, 227, 0.08); } /* ── 入场动画 ── */ @keyframes store-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes store-enter-header { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } body[data-page="index"] .header { animation: store-enter-header 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; } body[data-page="index"] .footer { animation: store-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; } .store-enter { animation: store-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--enter-delay, 0s); } /* ── 主内容 ── */ .main { flex: 1; padding: 2rem 0 3.5rem; } .section { margin-bottom: 2.5rem; } .section-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.032em; line-height: 1.2; color: var(--store-text); margin-bottom: 1rem; text-align: center; text-rendering: optimizeLegibility; } .store-panel { padding: 0.25rem 0; } /* ── 工具网格：上图标 + abbr + name，6 列 ── */ .tools-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem 1rem; } .tool-card { grid-column: span 1; background: transparent; border-radius: var(--store-radius-sm); padding: 0.75rem 0.375rem; min-height: 112px; text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0.5rem; } /* ── 图标：App Store 圆角方块 ── */ .tool-icon { width: 68px; height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .tool-icon--squircle { position: relative; border-radius: 14px; background: transparent; overflow: visible; transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); } .tool-icon--squircle::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #fafafa 0%, #ededf0 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); z-index: 0; } .tool-card:hover .tool-icon--squircle { transform: translateY(-10px); } .tool-icon img, .tool-icon-img { position: relative; z-index: 1; width: 72%; height: 72%; object-fit: contain; padding: 0; } .tool-info { width: 100%; text-align: center; padding: 0 2px; } .tool-abbr { font-family: var(--font-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--store-text); line-height: 1.23077; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-name { font-family: var(--font-text); font-size: 0.6875rem; font-weight: 400; letter-spacing: -0.006em; color: var(--store-text-tertiary); text-align: center; line-height: 1.36364; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dev-name-zh { font-weight: 500; letter-spacing: -0.01em; color: var(--store-text); } /* ── 开发者页 ── */ .dev-section { background: var(--store-surface); border-radius: var(--store-radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; border: 1px solid var(--store-border); box-shadow: none; } .dev-section h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.024em; line-height: 1.2; color: var(--store-text); margin-bottom: 0.25rem; } .dev-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.8125rem; letter-spacing: -0.01em; } .dev-table th, .dev-table td { padding: 0.75rem 0.5rem; text-align: left; border-bottom: 1px solid var(--store-border); } .dev-table th { background: transparent; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--store-text-tertiary); } .dev-table tbody tr:last-child td { border-bottom: none; } .dev-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); } .dev-table .dev-link { color: var(--store-accent); word-break: break-all; text-decoration: none; } .dev-table .dev-link:hover { text-decoration: underline; } .status-active, .status-warning, .status-pending { display: inline-block; padding: 0.2rem 0.625rem; border-radius: 980px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; } .status-active { color: #1a7f37; background: rgba(52, 199, 89, 0.14); } .status-warning { color: #b25000; background: rgba(255, 149, 0, 0.14); } .status-pending { color: var(--store-text-secondary); background: rgba(0, 0, 0, 0.06); } .dev-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; } /* ── 按钮 ── */ .btn { padding: 0.625rem 1.375rem; border-radius: 980px; text-decoration: none; font-weight: 500; font-family: inherit; font-size: 0.875rem; letter-spacing: -0.01em; cursor: pointer; border: none; transition: all var(--store-transition); } .btn-primary { background: var(--store-accent); color: #fff; } .btn-primary:hover { background: var(--store-accent-hover); } .btn-secondary { background: rgba(0, 0, 0, 0.06); color: var(--store-text); } .btn-secondary:hover { background: rgba(0, 0, 0, 0.1); } .btn-black { background: var(--store-text); color: #fff; } .btn-black:hover { background: #424245; } /* ── 页脚 ── */ .footer { margin-top: auto; padding: 1.25rem 0 1.75rem; text-align: center; color: var(--store-text-tertiary); font-size: 0.75rem; font-weight: 400; letter-spacing: -0.006em; line-height: 1.33337; border-top: 1px solid var(--store-border); background: rgba(251, 251, 253, 0.5); } .footer a { color: var(--store-accent); text-decoration: none; } .footer a:hover { text-decoration: underline; } .load-error { color: #bf4800; text-align: center; padding: 2rem; font-size: 0.875rem; } /* ── 暂未开放 / 错误页 ── */ .unavailable-panel { background: var(--store-surface); border-radius: var(--store-radius-lg); padding: 3rem 2rem; text-align: center; box-shadow: none; border: 1px solid var(--store-border); max-width: 480px; margin: 0 auto; } .unavailable-code { font-size: 0.75rem; font-weight: 600; color: var(--store-text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.75rem; } .unavailable-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.028em; color: var(--store-text); margin-bottom: 0.75rem; } .unavailable-message { font-size: 1.0625rem; color: var(--store-text-secondary); margin-bottom: 0.5rem; } .unavailable-hint { font-size: 0.875rem; color: var(--store-text-tertiary); margin-bottom: 2rem; } .unavailable-actions { display: flex; justify-content: center; gap: 0.75rem; } /* ── 响应式 ── */ @media (max-width: 1024px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .header-inner { flex-direction: column; align-items: flex-start; } .tagline { white-space: normal; } .tools-grid { grid-template-columns: repeat(4, 1fr); } .dev-table { display: block; overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { body[data-page="index"] .header, body[data-page="index"] .footer, .store-enter { animation: none; } .tool-card:hover .tool-icon--squircle { transform: none; } }