/* 六智宝库 - 生活场景列表页（居家 / 清洁 / 出行共用）视觉基准：home/antacid.html 三个页面结构一致，仅靠区分主色：居家 #C73E2A / 清洁 #1E6B6E / 出行 #C89F3D 标签、图标底、色条、光斑全部由 --tone 派生 —— 加分类只需复制一个页面。 */ body { --tone: var(--primary); } /* ---------- 内容容器 ---------- */ .subject-content { max-width: 1100px; margin: 0 auto 4rem; padding: 0 1.5rem; } .subject-section { margin-bottom: 2.75rem; } .section-head { position: relative; display: flex; align-items: center; gap: .75rem; padding-left: .85rem; margin-bottom: 1.15rem; } .section-head::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1.15rem; border-radius: 2px; background: var(--tone); } .section-head h2 { font-family: 'Fraunces', 'Songti SC','Source Han Serif SC','SimSun', serif; font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; } .section-hint { margin-left: auto; flex-shrink: 0; font-size: .76rem; font-weight: 600; color: var(--muted); padding: .22rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--tone) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent); } /* ---------- 话题卡片 ---------- */ .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.15rem; } .topic-card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem 1.5rem 1.35rem; border-radius: 16px; border: 1px solid var(--card-border); background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 48%), var(--card); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; } /* 顶部 tone 色条 */ .topic-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(to right, var(--tone), color-mix(in srgb, var(--tone) 12%, transparent)); opacity: 0; transition: opacity .3s; } /* 跟随鼠标的光斑 */ .topic-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone) 12%, transparent), transparent 72%); opacity: 0; transition: opacity .3s; } .topic-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone) 34%, transparent); box-shadow: 0 22px 46px -26px color-mix(in srgb, var(--tone) 52%, rgba(44, 31, 18, .45)); } .topic-card:hover::before, .topic-card:hover::after { opacity: 1; } .topic-badge { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; font-size: .68rem; font-weight: 700; letter-spacing: .07em; padding: .2rem .55rem; border-radius: 5px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); } .topic-badge.dev { color: var(--muted); background: rgba(111, 90, 71, .10); border-color: rgba(111, 90, 71, .20); } .topic-card h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.45; } .topic-card p { flex: 1; font-size: .86rem; line-height: 1.65; color: var(--muted); } .topic-arrow { font-size: 1.05rem; font-weight: 700; color: var(--tone); opacity: .75; transition: transform .22s var(--ease), opacity .2s; } .topic-card:hover .topic-arrow { transform: translateX(4px); opacity: 1; } /* 开发中的话题：虚线 + 去色，不可点击 */ .topic-card.is-dev { border-style: dashed; background: color-mix(in srgb, var(--surface) 62%, transparent); box-shadow: none; cursor: default; } .topic-card.is-dev::before { display: none; } .topic-card.is-dev:hover { transform: none; border-color: var(--card-border); box-shadow: none; } /* 只有一张已发布解读时：拉通整行做「主打」横向卡，避免 1/3 宽孤零零 */ .topic-body { display: flex; flex-direction: column; gap: .55rem; flex: 1; min-width: 0; } .topic-body h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.45; } .topic-body p { font-size: .86rem; line-height: 1.65; color: var(--muted); } .topic-card.is-featured { grid-column: 1 / -1; } @media (min-width: 769px) { .topic-card.is-featured { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.5rem 1.8rem; } .topic-card.is-featured .topic-arrow { font-size: 1.4rem; } } /* 已发布解读为 2 个时：等宽两列铺满整行，避免 auto-fill 留下空轨道 */ .topic-grid.is-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 768px) { .topic-grid.is-duo { grid-template-columns: 1fr; } } /* ---------- 术语速查入口 ---------- */ .terms-band { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; border-radius: 16px; border: 1px solid var(--card-border); background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 9%, transparent), transparent 62%), var(--card); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .terms-band-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; font-size: 1.15rem; background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent); } .terms-band-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .terms-band-text strong { font-size: .98rem; } .terms-band-text span { font-size: .8rem; color: var(--muted); } .terms-band-go { margin-left: auto; flex-shrink: 0; font-size: .86rem; font-weight: 700; color: var(--tone); transition: transform .22s var(--ease); } .terms-band:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 32%, transparent); box-shadow: 0 18px 38px -24px color-mix(in srgb, var(--tone) 50%, rgba(44, 31, 18, .40)); } .terms-band:hover .terms-band-go { transform: translateX(4px); } /* 空状态提示 */ .empty-note { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.2rem; border-radius: 12px; border: 1px dashed var(--card-border); background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--muted); font-size: .86rem; line-height: 1.6; } /* ---------- 响应式 ---------- */ @media (max-width: 768px) { .subject-section { margin-bottom: 2.1rem; } .topic-grid { grid-template-columns: 1fr; } .terms-band { padding: .95rem 1.1rem; gap: .8rem; } .terms-band-icon { width: 38px; height: 38px; font-size: 1.05rem; } .terms-band-go { display: none; } }