feat: elevate spectra lab editorial polish

index.html

@@ -51,38 +51,38 @@
 
       <main id="top" class="relative z-10 space-y-9 pb-6 md:space-y-12">
         <section class="hero reveal space-y-6 pt-2 md:space-y-8">
-          <div class="flex flex-col gap-2 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-baseline md:justify-between">
+          <div class="section-rule flex flex-col gap-2 pt-3 md:flex-row md:items-baseline md:justify-between">
             <p class="smallcaps">Front-end concept / 2026</p>
             <p class="smallcaps">Issue 03 — Tailwind Adaptive Pass</p>
           </div>
 
-          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-12 md:gap-6">
+          <div class="section-rule grid gap-6 pt-6 md:grid-cols-12 md:gap-6">
             <div class="md:col-span-8">
-              <h1 class="font-serif text-[2.4rem] font-bold leading-[1.05] tracking-[-0.03em] md:text-[4.3rem] lg:text-[5.8rem]">
+              <h1 class="section-title max-w-[11ch] font-serif text-[2.4rem] font-bold leading-[1.02] md:text-[4.15rem] lg:text-[5.45rem]">
                 用 Tailwind 重建响应式秩序，
                 让你看到的和我看到的一样。
               </h1>
-              <p class="mt-6 max-w-3xl text-[1.02rem] leading-[1.82] muted">
+              <p class="lede mt-6 text-[1.01rem] leading-[1.9] muted">
                 这轮把布局体系切到 Tailwind：栅格、间距、断点、组件状态全部落成可复用的响应式规则。核心目标不是“更炫”，而是减少端侧渲染差异，让真实线上观感更稳定地贴近验收截图。
               </p>
             </div>
-            <aside class="ui-card md:col-span-4 md:col-start-10 p-5 self-end">
+            <aside class="ui-card card-tight md:col-span-4 md:col-start-10 p-5 self-end">
               <p class="text-[0.96rem] leading-[1.75] muted">
                 如果页面精细度只存在于截图里，那不是设计成功。真正成功是：你打开线上站，看到的质感能稳定复现。
               </p>
             </aside>
           </div>
 
-          <div class="grid gap-4 border-t border-[color:var(--line)] pt-6 md:grid-cols-3">
+          <div class="section-rule grid gap-4 pt-6 md:grid-cols-3">
-            <article class="ui-card p-5">
+            <article class="ui-card card-tight p-5">
               <span class="smallcaps">Layout system</span>
               <p class="mt-3 text-[1rem] leading-[1.7]">Tailwind 断点统一驱动容器、列宽和间距，不再靠手写规则散点拼接。</p>
             </article>
-            <article class="ui-card p-5">
+            <article class="ui-card card-tight p-5">
               <span class="smallcaps">Visual consistency</span>
               <p class="mt-3 text-[1rem] leading-[1.7]">边框、材质、阴影和状态样式拆成组件类，减少页面局部漂移。</p>
             </article>
-            <article class="ui-card p-5">
+            <article class="ui-card card-tight p-5">
               <span class="smallcaps">Interaction parity</span>
               <p class="mt-3 text-[1rem] leading-[1.7]">交互钩子保持不变，行为和视觉在不同设备上更可预测。</p>
             </article>
@@ -90,40 +90,40 @@
         </section>
 
         <section id="statement" class="section reveal space-y-6">
-          <div class="border-t border-[color:var(--line)] pt-3">
+          <div class="section-rule pt-3">
             <p class="smallcaps">Statement</p>
-            <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">先收敛系统，再追求惊艳，页面才不会忽好忽坏。</h2>
+            <h2 class="section-title mt-3 max-w-[18ch] font-serif text-[1.85rem] leading-[1.14] md:text-[2.85rem]">先收敛系统，再追求惊艳，页面才不会忽好忽坏。</h2>
           </div>
-          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-2">
+          <div class="section-rule grid gap-6 pt-6 md:grid-cols-2">
-            <p class="leading-[1.82] muted">你说“页面看起来不如截图好”，这个反馈很关键。它通常不是单个颜色问题，而是样式体系在不同环境下的稳定性不够。Tailwind 的价值就在于把这些变化收敛到确定的 utility + 断点规则里。</p>
+            <p class="lede leading-[1.88] muted">你说“页面看起来不如截图好”，这个反馈很关键。它通常不是单个颜色问题，而是样式体系在不同环境下的稳定性不够。Tailwind 的价值就在于把这些变化收敛到确定的 utility + 断点规则里。</p>
-            <p class="leading-[1.82] muted">所以这版会优先保证不同屏幕尺寸下的排版和边界一致，再叠加动效和组件互动。先把基础稳定性拉起来，精细感才不会随机消失。</p>
+            <p class="lede leading-[1.88] muted">所以这版会优先保证不同屏幕尺寸下的排版和边界一致，再叠加动效和组件互动。先把基础稳定性拉起来，精细感才不会随机消失。</p>
           </div>
         </section>
 
         <section id="works" class="section reveal space-y-6">
-          <div class="flex flex-col gap-3 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-end md:justify-between">
+          <div class="section-rule flex flex-col gap-3 pt-3 md:flex-row md:items-end md:justify-between">
             <div>
               <p class="smallcaps">Selected Works</p>
-              <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">四个切片，展示这页的结构与质感。</h2>
+              <h2 class="section-title mt-3 max-w-[16ch] font-serif text-[1.85rem] leading-[1.14] md:text-[2.85rem]">四个切片，展示这页的结构与质感。</h2>
             </div>
             <p class="text-sm muted">点击左侧卡片，右侧说明会联动更新。</p>
           </div>
 
-          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-12">
+          <div class="section-rule grid gap-6 pt-6 md:grid-cols-12">
             <div class="work-list grid gap-3 md:col-span-5" role="tablist" aria-label="设计切片列表">
-              <button class="work-item ui-card is-active grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="true" data-title="Opening Spread" data-index="01" data-copy="首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。">
+              <button class="work-item ui-card card-tight is-active grid grid-cols-[44px_1fr] gap-3 p-4 text-left hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="true" data-title="Opening Spread" data-index="01" data-copy="首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。">
                 <span class="work-number text-xs tracking-[0.14em] muted">01</span>
                 <span><strong class="block text-[1.05rem]">Opening Spread</strong><small class="text-sm muted">封面感与主次节奏</small></span>
               </button>
-              <button class="work-item ui-card grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Quiet Contrast" data-index="02" data-copy="对比来自字重、列宽、材质与边界，而不是夸张颜色。暗红只作为标记，不作为表演。">
+              <button class="work-item ui-card card-tight grid grid-cols-[44px_1fr] gap-3 p-4 text-left hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Quiet Contrast" data-index="02" data-copy="对比来自字重、列宽、材质与边界，而不是夸张颜色。暗红只作为标记，不作为表演。">
                 <span class="work-number text-xs tracking-[0.14em] muted">02</span>
                 <span><strong class="block text-[1.05rem]">Quiet Contrast</strong><small class="text-sm muted">克制色彩，而非堆叠效果</small></span>
               </button>
-              <button class="work-item ui-card grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Measured Motion" data-index="03" data-copy="动效只承担两件事：提示切换、改善触感。页面不会为了证明自己会动而到处动。">
+              <button class="work-item ui-card card-tight grid grid-cols-[44px_1fr] gap-3 p-4 text-left hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Measured Motion" data-index="03" data-copy="动效只承担两件事：提示切换、改善触感。页面不会为了证明自己会动而到处动。">
                 <span class="work-number text-xs tracking-[0.14em] muted">03</span>
                 <span><strong class="block text-[1.05rem]">Measured Motion</strong><small class="text-sm muted">把运动当作排版的一部分</small></span>
               </button>
-              <button class="work-item ui-card grid grid-cols-[44px_1fr] gap-3 p-4 text-left transition hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Material Ending" data-index="04" data-copy="结尾像一页真正收住的落版：不抢戏、不吵闹，只让页面在最后留下明确的材质与余味。">
+              <button class="work-item ui-card card-tight grid grid-cols-[44px_1fr] gap-3 p-4 text-left hover:translate-x-1 hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)]" type="button" aria-selected="false" data-title="Material Ending" data-index="04" data-copy="结尾像一页真正收住的落版：不抢戏、不吵闹，只让页面在最后留下明确的材质与余味。">
                 <span class="work-number text-xs tracking-[0.14em] muted">04</span>
                 <span><strong class="block text-[1.05rem]">Material Ending</strong><small class="text-sm muted">收尾比开始更能决定完成度</small></span>
               </button>
@@ -141,28 +141,28 @@
         </section>
 
         <section id="system" class="section reveal space-y-6">
-          <div class="border-t border-[color:var(--line)] pt-3">
+          <div class="section-rule pt-3">
             <p class="smallcaps">System</p>
-            <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">Tailwind 驱动的响应式系统，确保视觉稳定落地。</h2>
+            <h2 class="section-title mt-3 max-w-[16ch] font-serif text-[1.85rem] leading-[1.14] md:text-[2.85rem]">Tailwind 驱动的响应式系统，确保视觉稳定落地。</h2>
           </div>
-          <div class="grid gap-4 border-t border-[color:var(--line)] pt-6 md:grid-cols-3">
+          <div class="section-rule grid gap-4 pt-6 md:grid-cols-3">
-            <article class="ui-card p-5"><span class="smallcaps">Typography</span><p class="mt-3 text-[1rem] leading-[1.7] muted">衬线标题 + 无衬线正文，结构层次稳定且阅读负担更低。</p></article>
+            <article class="ui-card card-tight p-5"><span class="smallcaps">Typography</span><p class="mt-3 text-[1rem] leading-[1.76] muted">衬线标题 + 无衬线正文，结构层次稳定且阅读负担更低。</p></article>
-            <article class="ui-card p-5"><span class="smallcaps">Adaptive spacing</span><p class="mt-3 text-[1rem] leading-[1.7] muted">间距通过断点阶梯控制，避免在手机端失衡、在桌面端发散。</p></article>
+            <article class="ui-card card-tight p-5"><span class="smallcaps">Adaptive spacing</span><p class="mt-3 text-[1rem] leading-[1.76] muted">间距通过断点阶梯控制，避免在手机端失衡、在桌面端发散。</p></article>
-            <article class="ui-card p-5"><span class="smallcaps">State style</span><p class="mt-3 text-[1rem] leading-[1.7] muted">选中、hover、联动反馈统一收口到组件状态，不再零散散落。</p></article>
+            <article class="ui-card card-tight p-5"><span class="smallcaps">State style</span><p class="mt-3 text-[1rem] leading-[1.76] muted">选中、hover、联动反馈统一收口到组件状态，不再零散散落。</p></article>
           </div>
         </section>
 
         <section id="components" class="section reveal space-y-6">
-          <div class="flex flex-col gap-3 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-end md:justify-between">
+          <div class="section-rule flex flex-col gap-3 pt-3 md:flex-row md:items-end md:justify-between">
             <div>
               <p class="smallcaps">Components</p>
-              <h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">交互组件区：可切换、可反馈、可验证。</h2>
+              <h2 class="section-title mt-3 max-w-[18ch] font-serif text-[1.85rem] leading-[1.14] md:text-[2.85rem]">把组件区做成一页真实样张，而不是功能展示板。</h2>
             </div>
-            <p class="text-sm muted">这块用于直接验证响应式组件的一致性。</p>
+            <p class="text-sm muted">这里既要能交互，也要像真正可以交付的品牌样张。</p>
           </div>
 
-          <div class="grid gap-6 border-t border-[color:var(--line)] pt-6 md:grid-cols-12">
+          <div class="section-rule grid gap-6 pt-6 md:grid-cols-12">
-            <div class="control-panel ui-card grid gap-5 p-5 md:col-span-5">
+            <div class="control-panel ui-card card-tight grid gap-5 p-5 md:col-span-5">
               <div class="grid gap-2">
                 <p class="smallcaps">Layout tone</p>
                 <div class="flex flex-wrap gap-2" role="tablist" aria-label="布局语气切换">
@@ -200,15 +200,36 @@
             </div>
 
             <div class="preview-panel grid gap-4 md:col-span-7">
-              <div id="previewCard" class="preview-card ui-card p-5 md:p-6" data-tone="balanced" data-density="2">
+              <div class="editorial-sheet ui-card p-5 md:p-6">
+                <div class="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
+                  <div>
+                    <p class="editorial-kicker">Issue note / editorial specimen</p>
+                    <h3 class="section-title mt-3 max-w-[14ch] font-serif text-[1.5rem] leading-[1.12] md:text-[2rem]">同一套规则，应该在不同屏幕上都维持住版式气质。</h3>
+                  </div>
+                  <div class="min-w-[180px] border-l-0 pt-0 text-sm muted md:border-l md:border-[color:var(--line)] md:pl-5">
+                    <p>Material study</p>
+                    <p class="mt-2 editorial-note">更少的边框噪音，更稳定的段落宽度，更克制的层级阴影。</p>
+                  </div>
+                </div>
+                <div class="editorial-spec mt-6 grid gap-4 py-4 md:grid-cols-[1.2fr_0.8fr] md:gap-6">
+                  <p class="editorial-note">这一块不再只是“预览卡片”，而是模拟真实交付时的版心、旁注与状态信息如何共存。它需要可读，也要足够安静。</p>
+                  <div class="grid gap-2 text-xs uppercase tracking-[0.16em] muted">
+                    <span>Responsive parity</span>
+                    <span>Quiet material</span>
+                    <span>Editorial pacing</span>
+                  </div>
+                </div>
+              </div>
+
+              <div id="previewCard" class="preview-card stage-card ui-card p-5 md:p-6" data-tone="balanced" data-density="2">
                 <div class="flex flex-col gap-1 border-b border-[color:var(--line)] pb-3 text-xs uppercase tracking-[0.16em] muted sm:flex-row sm:items-center sm:justify-between">
                   <span id="previewTone">Balanced tone</span>
                   <span id="previewDensity">Density 02</span>
                 </div>
                 <div class="py-5 md:py-7">
                   <p class="smallcaps">Live editorial specimen</p>
-                  <h3 id="previewTitle" class="mt-3 font-serif text-[1.65rem] leading-tight md:text-[2.1rem]">A layout that knows where to stop.</h3>
+                  <h3 id="previewTitle" class="section-title mt-3 max-w-[14ch] font-serif text-[1.6rem] leading-[1.12] md:text-[2rem]">A layout that knows where to stop.</h3>
-                  <p id="previewText" class="mt-3 leading-[1.8] muted">这一块不是静态说明，而是一张会随着交互变化的样张：它会根据布局语气、信息密度与材料色点，实时调整状态。</p>
+                  <p id="previewText" class="lede mt-3 leading-[1.86] muted">这一块不是静态说明，而是一张会随着交互变化的样张：它会根据布局语气、信息密度与材料色点，实时调整状态。</p>
                 </div>
                 <div class="flex flex-col gap-2 border-t border-[color:var(--line)] pt-3 text-xs uppercase tracking-[0.16em] muted sm:flex-row sm:items-center sm:justify-between">
                   <span id="previewAccentLabel">Accent / Oxblood</span>
@@ -217,15 +238,15 @@
               </div>
 
               <div class="grid gap-3">
-                <details class="mini-module ui-card p-4" open>
+                <details class="mini-module ui-card card-tight p-4" open>
                   <summary class="smallcaps cursor-pointer">Spacing rule</summary>
                   <p class="mt-2 text-sm leading-[1.75] muted">所有主要模块共享统一的竖向节奏，避免 section 间呼吸不一致。</p>
                 </details>
-                <details class="mini-module ui-card p-4">
+                <details class="mini-module ui-card card-tight p-4">
                   <summary class="smallcaps cursor-pointer">Border rule</summary>
                   <p class="mt-2 text-sm leading-[1.75] muted">边框只在建立层级时出现，不再无差别包裹全部区域。</p>
                 </details>
-                <details class="mini-module ui-card p-4">
+                <details class="mini-module ui-card card-tight p-4">
                   <summary class="smallcaps cursor-pointer">Motion rule</summary>
                   <p class="mt-2 text-sm leading-[1.75] muted">交互动画只做提示，不做夸张炫技。</p>
                 </details>

src/tailwind.css

@@ -51,6 +51,20 @@ body.light-mode {
     @apply relative mx-auto w-[min(1320px,calc(100%-24px))] md:w-[min(1320px,calc(100%-48px))] pb-10;
   }
 
+  .section-rule {
+    border-top: 1px solid var(--line);
+  }
+
+  .section-title {
+    text-wrap: balance;
+    letter-spacing: -0.028em;
+  }
+
+  .lede {
+    max-width: 58ch;
+    text-wrap: pretty;
+  }
+
   .site-header {
     @apply sticky top-0 z-30 mb-2 border-b py-4 backdrop-blur-xl;
     width: 100vw;
@@ -78,9 +92,39 @@ body.light-mode {
   }
 
   .ui-card {
-    @apply border shadow-soft;
+    @apply border;
     border-color: var(--line);
-    background: color-mix(in srgb, var(--panel) 92%, transparent);
+    background: color-mix(in srgb, var(--panel) 94%, transparent);
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
+  }
+
+  .card-tight {
+    box-shadow: none;
+    background: color-mix(in srgb, var(--panel) 97%, transparent);
+  }
+
+  .stage-card {
+    background: color-mix(in srgb, var(--panel-2) 96%, transparent);
+    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.16);
+  }
+
+  .editorial-sheet {
+    background: color-mix(in srgb, var(--panel) 90%, transparent);
+  }
+
+  .editorial-kicker {
+    @apply text-[10px] uppercase tracking-[0.22em];
+    color: var(--muted);
+  }
+
+  .editorial-spec {
+    border-top: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+  }
+
+  .editorial-note {
+    @apply text-[0.95rem] leading-[1.75];
+    color: var(--muted);
   }
 
   .muted {
@@ -99,6 +143,17 @@ body.light-mode {
     background: var(--accent-soft);
   }
 
+  .work-item,
+  .tone-chip,
+  .note-item,
+  .mini-module {
+    transition:
+      border-color 180ms ease,
+      background-color 180ms ease,
+      transform 180ms ease,
+      color 180ms ease;
+  }
+
   .work-item.is-active .work-number,
   .work-item.is-active small {
     color: var(--text);