/* 作品集 Demo 共用 · 开发流程条（横向步骤 / 窄屏竖排） */ .portfolio-dev-flow { max-width: 920px; margin: 0 auto 14px; padding: 0 14px; box-sizing: border-box; } .portfolio-dev-flow > summary { list-style: none; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: #475569; padding: 6px 0 10px; letter-spacing: -0.02em; line-height: 1.4; max-width: 100%; } .portfolio-dev-flow > summary::-webkit-details-marker { display: none; } .portfolio-dev-flow[open] > summary { padding-bottom: 8px; } .dev-flow { margin: 0 0 4px; padding: 14px 14px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.94)); border: 0.5px solid rgba(15, 23, 42, 0.09); border-radius: 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .dev-flow-kicker { font-size: 11px; font-weight: 650; letter-spacing: 0.02em; text-transform: none; color: #64748b; margin-bottom: 10px; line-height: 1.45; } /* 窄屏用短文案（与 prototypes/manifest.json resume_anchor.kicker_* 对齐） */ .dev-flow-kicker-text--short { display: none; } .dev-flow-track { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; justify-content: flex-start; margin: 0; padding: 0; } .dev-flow-step { flex: 1 1 88px; min-width: 76px; max-width: 150px; padding: 8px 12px 8px 6px; border-right: 1px dashed rgba(148, 163, 184, 0.45); box-sizing: border-box; } .dev-flow-step:last-child { border-right: none; } .dev-flow-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 8px; background: rgba(0, 113, 227, 0.12); color: #0071e3; font-size: 11px; font-weight: 700; margin-bottom: 6px; } .dev-flow-title { display: block; font-size: 12px; font-weight: 650; color: #0f172a; line-height: 1.25; letter-spacing: -0.02em; } .dev-flow-note { display: block; margin-top: 4px; font-size: 11px; color: #64748b; line-height: 1.38; } @media (max-width: 640px) { .dev-flow-kicker-text--full { display: none; } .dev-flow-kicker-text--short { display: block; } .dev-flow-track { flex-direction: column; } .dev-flow-step { max-width: none; border-right: none; border-bottom: 1px dashed rgba(148, 163, 184, 0.35); padding: 10px 4px; } .dev-flow-step:last-child { border-bottom: none; } } /* 宠伴页夜间主题 */ body[data-theme="night"] .dev-flow { background: linear-gradient(180deg, rgba(44, 44, 46, 0.96), rgba(28, 28, 30, 0.92)); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } body[data-theme="night"] .dev-flow-kicker, body[data-theme="night"] .dev-flow-note { color: #a1a1a6; } body[data-theme="night"] .dev-flow-title { color: #f5f5f7; } body[data-theme="night"] .dev-flow-step { border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.1); } body[data-theme="night"] .portfolio-dev-flow > summary { color: #a1a1a6; } /* 冷启动 / Prompt 暗色 */ body[data-theme="dark"] .dev-flow { background: rgba(30, 30, 34, 0.95); border-color: rgba(255, 255, 255, 0.12); } body[data-theme="dark"] .dev-flow-title { color: #e8e8ed; } body[data-theme="dark"] .dev-flow-kicker, body[data-theme="dark"] .dev-flow-note, body[data-theme="dark"] .portfolio-dev-flow > summary { color: #9ca3af; } body[data-theme="dark"] .dev-flow-step { border-right-color: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(255, 255, 255, 0.08); } body[data-theme="ink"] .dev-flow { background: rgba(250, 250, 250, 0.98); border: 1px solid #bbb; box-shadow: none; } /* 与 neumorphic-shared.css 同步：仅当 时强化流程条质感 */ html[data-ui="neumorphic"] .dev-flow { background: var(--neu-bg, #e6e6e6) !important; border: 1px solid var(--neu-border, transparent) !important; border-radius: 22px !important; box-shadow: var(--neu-shadow) !important; } html[data-ui="neumorphic"] .dev-flow-kicker, html[data-ui="neumorphic"] .dev-flow-note { color: var(--neu-muted, #6b6b6b) !important; } html[data-ui="neumorphic"] .dev-flow-title { color: var(--neu-text, #3f3f3f) !important; } html[data-ui="neumorphic"] .dev-flow-step { border-right-color: color-mix(in srgb, var(--neu-muted, #6b6b6b) 35%, transparent); border-bottom-color: color-mix(in srgb, var(--neu-muted, #6b6b6b) 28%, transparent); } html[data-ui="neumorphic"] .dev-flow-num { background: color-mix(in srgb, var(--neu-accent, #5a6a7a) 22%, transparent); color: var(--neu-accent, #5a6a7a); } html[data-ui="neumorphic"] .portfolio-dev-flow > summary { color: var(--neu-muted, #64748b); } html[data-ui="neumorphic"] body[data-theme="night"] .dev-flow, html[data-ui="neumorphic"] body[data-theme="dark"] .dev-flow { background: var(--neu-bg) !important; } html[data-ui="neumorphic"] body[data-theme="night"] .portfolio-dev-flow > summary, html[data-ui="neumorphic"] body[data-theme="dark"] .portfolio-dev-flow > summary { color: var(--neu-muted); } html[data-ui="neumorphic"] body.theme-dark .dev-flow { background: var(--neu-bg) !important; } html[data-ui="neumorphic"] body.theme-dark .portfolio-dev-flow > summary { color: var(--neu-muted); }