feat: refine spectra lab alignment and components
All checks were successful
Deploy / deploy (push) Successful in 1s
All checks were successful
Deploy / deploy (push) Successful in 1s
This commit is contained in:
Chen Gu
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,4 +1,6 @@
|
||||
spectra-lab-local.png
|
||||
spectra-lab-redesign.png
|
||||
spectra-lab-polish.png
|
||||
spectra-lab-refine-v2-desktop.png
|
||||
spectra-lab-refine-v2-mobile.png
|
||||
.DS_Store
|
||||
|
||||
95
app.js
95
app.js
@@ -6,12 +6,54 @@ const workTitle = document.getElementById('workTitle');
|
||||
const workCopy = document.getElementById('workCopy');
|
||||
const stageCard = document.querySelector('.stage-card');
|
||||
const revealBlocks = document.querySelectorAll('.reveal');
|
||||
const toneChips = document.querySelectorAll('.tone-chip');
|
||||
const swatches = document.querySelectorAll('.swatch');
|
||||
const noteItems = document.querySelectorAll('.note-item');
|
||||
const densityRange = document.getElementById('densityRange');
|
||||
const densityValue = document.getElementById('densityValue');
|
||||
const previewCard = document.getElementById('previewCard');
|
||||
const previewTone = document.getElementById('previewTone');
|
||||
const previewDensity = document.getElementById('previewDensity');
|
||||
const previewTitle = document.getElementById('previewTitle');
|
||||
const previewText = document.getElementById('previewText');
|
||||
const previewAccentLabel = document.getElementById('previewAccentLabel');
|
||||
const previewNote = document.getElementById('previewNote');
|
||||
const storedMode = window.localStorage.getItem('spectra-mode');
|
||||
|
||||
if (storedMode === 'light') {
|
||||
document.body.classList.add('light-mode');
|
||||
}
|
||||
|
||||
const toneMap = {
|
||||
quiet: {
|
||||
label: 'Quiet tone',
|
||||
title: 'A layout that leaves more breathing room.',
|
||||
text: '较安静的版式语气会减少冲突感，让留白、边框与小字说明承担更多秩序工作。',
|
||||
},
|
||||
balanced: {
|
||||
label: 'Balanced tone',
|
||||
title: 'A layout that knows where to stop.',
|
||||
text: '平衡模式维持标题、说明与边框之间的中段张力，更适合作为正式落地页的默认状态。',
|
||||
},
|
||||
dramatic: {
|
||||
label: 'Dramatic tone',
|
||||
title: 'A layout with sharper contrast and pacing.',
|
||||
text: '更强对比的语气不会增加花哨效果，而是把标题权重、信息落差和段落收束做得更明显。',
|
||||
},
|
||||
};
|
||||
|
||||
const densityMap = {
|
||||
'1': 'Airy',
|
||||
'2': 'Balanced',
|
||||
'3': 'Dense',
|
||||
};
|
||||
|
||||
const accentNames = {
|
||||
'#7f2f2f': 'Accent / Oxblood',
|
||||
'#3f5a73': 'Accent / Slate Blue',
|
||||
'#6c6250': 'Accent / Warm Taupe',
|
||||
};
|
||||
|
||||
function applyMode() {
|
||||
const isLight = document.body.classList.contains('light-mode');
|
||||
modeToggle.textContent = isLight ? 'Dark Mode' : 'Light Mode';
|
||||
@@ -41,15 +83,56 @@ function updateWorkStage(item) {
|
||||
workCopy.textContent = item.dataset.copy || '';
|
||||
}
|
||||
|
||||
function updatePreviewTone(tone) {
|
||||
toneChips.forEach((chip) => chip.classList.toggle('is-active', chip.dataset.tone === tone));
|
||||
previewCard.dataset.tone = tone;
|
||||
previewTone.textContent = toneMap[tone].label;
|
||||
previewTitle.textContent = toneMap[tone].title;
|
||||
previewText.textContent = toneMap[tone].text;
|
||||
}
|
||||
|
||||
function updatePreviewDensity(level) {
|
||||
previewCard.dataset.density = level;
|
||||
previewCard.style.padding = level === '1' ? '20px' : level === '3' ? '30px' : '24px';
|
||||
densityValue.textContent = densityMap[level];
|
||||
previewDensity.textContent = `Density 0${level}`;
|
||||
}
|
||||
|
||||
function updatePreviewAccent(accent) {
|
||||
swatches.forEach((swatch) => swatch.classList.toggle('is-active', swatch.dataset.accent === accent));
|
||||
document.documentElement.style.setProperty('--accent', accent);
|
||||
document.documentElement.style.setProperty('--accent-soft', `${accent}22`);
|
||||
previewAccentLabel.textContent = accentNames[accent] || 'Accent / Custom';
|
||||
}
|
||||
|
||||
function updatePreviewNote(note) {
|
||||
noteItems.forEach((item) => item.classList.toggle('is-active', item.dataset.note === note));
|
||||
previewNote.textContent = note;
|
||||
}
|
||||
|
||||
modeToggle?.addEventListener('click', () => {
|
||||
document.body.classList.toggle('light-mode');
|
||||
applyMode();
|
||||
});
|
||||
|
||||
workItems.forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
updateWorkStage(item);
|
||||
});
|
||||
item.addEventListener('click', () => updateWorkStage(item));
|
||||
});
|
||||
|
||||
toneChips.forEach((chip) => {
|
||||
chip.addEventListener('click', () => updatePreviewTone(chip.dataset.tone || 'balanced'));
|
||||
});
|
||||
|
||||
swatches.forEach((swatch) => {
|
||||
swatch.addEventListener('click', () => updatePreviewAccent(swatch.dataset.accent || '#7f2f2f'));
|
||||
});
|
||||
|
||||
noteItems.forEach((item) => {
|
||||
item.addEventListener('click', () => updatePreviewNote(item.dataset.note || ''));
|
||||
});
|
||||
|
||||
densityRange?.addEventListener('input', (event) => {
|
||||
updatePreviewDensity(event.target.value);
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
@@ -65,7 +148,13 @@ const observer = new IntersectionObserver(
|
||||
);
|
||||
|
||||
revealBlocks.forEach((block) => observer.observe(block));
|
||||
|
||||
if (workItems[0]) {
|
||||
updateWorkStage(workItems[0]);
|
||||
}
|
||||
|
||||
updatePreviewTone('balanced');
|
||||
updatePreviewDensity(densityRange?.value || '2');
|
||||
updatePreviewAccent('#7f2f2f');
|
||||
updatePreviewNote('封面对齐决定第一印象。');
|
||||
applyMode();
|
||||
|
||||
210
index.html
210
index.html
@@ -6,7 +6,7 @@
|
||||
<title>Spectra Lab</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Spectra Lab — 一页式编辑感品牌站，强调作品感、排版和克制动效，而不是 AI 式炫技。"
|
||||
content="Spectra Lab — 一页式编辑感品牌站，强调作品感、排版秩序、边界对齐与克制交互。"
|
||||
/>
|
||||
<script>
|
||||
if (location.pathname === '/spectra-lab') {
|
||||
@@ -23,6 +23,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-shell">
|
||||
<div class="page-grid" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
|
||||
<header class="topbar">
|
||||
<a class="brand" href="#top" aria-label="Spectra Lab 首页">
|
||||
<span class="brand-mark"></span>
|
||||
@@ -32,6 +37,7 @@
|
||||
<a href="#statement">Statement</a>
|
||||
<a href="#works">Works</a>
|
||||
<a href="#system">System</a>
|
||||
<a href="#components">Components</a>
|
||||
<a href="#closing">Closing</a>
|
||||
</nav>
|
||||
<button id="modeToggle" class="mode-toggle" type="button" aria-label="切换页面模式">
|
||||
@@ -41,118 +47,127 @@
|
||||
|
||||
<main id="top">
|
||||
<section class="hero reveal">
|
||||
<div class="hero-meta">
|
||||
<div class="hero-meta ruled-row">
|
||||
<p class="kicker">Front-end concept / 2026</p>
|
||||
<p class="issue">Issue 01 — Reduced Artificiality</p>
|
||||
<p class="issue">Issue 02 — Alignment & Components</p>
|
||||
</div>
|
||||
<div class="hero-grid">
|
||||
|
||||
<div class="hero-grid ruled-row">
|
||||
<div class="hero-copy">
|
||||
<h1>
|
||||
把“像 AI 做的页面”<br />
|
||||
改成“像真的品牌作品”。
|
||||
把背景线、边框和内容列，
|
||||
真正对齐到同一套秩序里。
|
||||
</h1>
|
||||
<p class="hero-text">
|
||||
Spectra Lab 的第二版不再依赖霓虹、玻璃拟态和悬浮指标，而是回到更克制的设计表达：更强的排版、更明确的留白、更少但更准的动效，以及更像真实创意团队会交付的页面气质。
|
||||
这一轮不再只谈风格，而是把页面的基础秩序校准：背景线不再漂浮，边框不再各说各话，卡片与文本块都回到同一套列宽、间距与边界系统里。然后，再往里增加一组真正值得操作的交互组件。
|
||||
</p>
|
||||
</div>
|
||||
<aside class="hero-note">
|
||||
<aside class="hero-note framed-note">
|
||||
<p>
|
||||
这一版的目标不是“更炫”，而是更像作品本身：可阅读、可陈列、可被记住。
|
||||
真正精细的页面，首先要让看不见的结构先成立；风格，只是结构成立之后的结果。
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="hero-ledger">
|
||||
|
||||
<div class="hero-ledger ruled-row">
|
||||
<article class="ledger-item">
|
||||
<span>Design principle</span>
|
||||
<strong>Less gesture, more judgment.</strong>
|
||||
<span>Grid discipline</span>
|
||||
<strong>背景线、外框、分隔线与内容容器共享同一套对齐参照。</strong>
|
||||
</article>
|
||||
<article class="ledger-item">
|
||||
<span>Material cue</span>
|
||||
<strong>纸感、墨感、少量暗红，而不是数字炫光。</strong>
|
||||
<span>Border logic</span>
|
||||
<strong>边框只在真正需要建立层级时出现，不再随机地围一圈。</strong>
|
||||
</article>
|
||||
<article class="ledger-item">
|
||||
<span>Reading rhythm</span>
|
||||
<strong>先标题，再说明，再留下停顿。</strong>
|
||||
<span>Interactive layer</span>
|
||||
<strong>组件区不只是摆样子，而是能切换、能反馈、能记住状态。</strong>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="statement" class="statement section reveal">
|
||||
<div class="section-head">
|
||||
<p class="kicker">Statement</p>
|
||||
<h2>先去掉套路，再谈风格。</h2>
|
||||
<section id="statement" class="section reveal">
|
||||
<div class="section-head ruled-row">
|
||||
<div>
|
||||
<p class="kicker">Statement</p>
|
||||
<h2>精细感，首先来自对齐，其次才是风格。</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statement-grid">
|
||||
|
||||
<div class="statement-grid ruled-row">
|
||||
<p>
|
||||
大多数 AI 味页面的问题，不是技术不够，而是视觉判断太偷懒：到处发光、到处渐变、到处 floating card，像在证明“我会做效果”，而不是在表达“我知道什么该留下”。
|
||||
许多页面第一眼显得“差一点”，并不是因为颜色或字体错了，而是因为线条系统没有被认真处理：背景里的线是背景，卡片边框是卡片边框，文本区是文本区，它们彼此没有参照，自然就显得散。
|
||||
</p>
|
||||
<p>
|
||||
所以这一版只保留三件事：结构、节奏、材质。结构决定像不像品牌，节奏决定高级不高级，材质决定页面有没有手感。除此之外，能删的都删。
|
||||
所以 Spectra Lab 这轮重构，优先把对齐关系收紧：统一页宽、统一纵向节奏、统一卡片边界、统一线条出场方式。只有这样，后面加进去的组件和交互，才不会像“后来又塞了一块东西”。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="works" class="works section reveal">
|
||||
<div class="section-head split-head">
|
||||
<section id="works" class="section reveal">
|
||||
<div class="section-head split-head ruled-row">
|
||||
<div>
|
||||
<p class="kicker">Selected Works</p>
|
||||
<h2>四个页面切片，组成完整气质。</h2>
|
||||
<h2>四个切片，说明这一页如何建立气质。</h2>
|
||||
</div>
|
||||
<p class="section-caption">点击左侧卡片，右侧会切换对应的设计说明。</p>
|
||||
<p class="section-caption">点击左侧卡片，右侧会切换说明与编号。</p>
|
||||
</div>
|
||||
|
||||
<div class="works-layout">
|
||||
<div class="works-layout ruled-row">
|
||||
<div class="work-list" role="tablist" aria-label="设计切片列表">
|
||||
<button
|
||||
class="work-item is-active"
|
||||
type="button"
|
||||
aria-selected="true"
|
||||
data-title="Opening Spread"
|
||||
data-index="01"
|
||||
data-copy="首页像一本刊物的开篇大跨页：强标题、宽留白、细线和小号说明文字共同建立秩序，而不是用一堆发光元素抢注意力。"
|
||||
data-copy="首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。"
|
||||
>
|
||||
<span class="work-number">01</span>
|
||||
<span>
|
||||
<strong>Opening Spread</strong>
|
||||
<small>封面感与留白</small>
|
||||
<small>封面感与主次节奏</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="work-item"
|
||||
type="button"
|
||||
aria-selected="false"
|
||||
data-title="Quiet Contrast"
|
||||
data-index="02"
|
||||
data-copy="对比来自字重、边界和材质差异，而不是夸张色彩。黑、白、灰、纸感米色，再加少量暗红作点缀，已经足够建立品牌记忆。"
|
||||
data-copy="对比来自字重、列宽、材质与边界，而不是夸张颜色。暗红只作为标记，不作为表演。"
|
||||
>
|
||||
<span class="work-number">02</span>
|
||||
<span>
|
||||
<strong>Quiet Contrast</strong>
|
||||
<small>克制颜色，而非特效堆叠</small>
|
||||
<small>克制色彩，而非堆叠效果</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="work-item"
|
||||
type="button"
|
||||
aria-selected="false"
|
||||
data-title="Measured Motion"
|
||||
data-index="03"
|
||||
data-copy="动效只承担两个任务：引导阅读和提供触感。它不负责表演，也不负责制造噪声，所以 hover、滚动 reveal 和模式切换都很轻。"
|
||||
data-copy="动效只承担两件事：提示切换、改善触感。页面不会为了证明自己会动而到处动。"
|
||||
>
|
||||
<span class="work-number">03</span>
|
||||
<span>
|
||||
<strong>Measured Motion</strong>
|
||||
<small>只做必要的运动</small>
|
||||
<small>把运动当作排版的一部分</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="work-item"
|
||||
type="button"
|
||||
aria-selected="false"
|
||||
data-title="Material Ending"
|
||||
data-index="04"
|
||||
data-copy="收尾部分不再追加功能堆料，而是用一个有材料感的段落把情绪压住，让整个页面从头到尾有完整的起承转合。"
|
||||
data-copy="结尾像一页真正收住的落版：不抢戏、不吵闹，只让页面在最后留下明确的材质与余味。"
|
||||
>
|
||||
<span class="work-number">04</span>
|
||||
<span>
|
||||
<strong>Material Ending</strong>
|
||||
<small>收住，而不是越做越满</small>
|
||||
<small>收尾比开始更能决定完成度</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -163,47 +178,136 @@
|
||||
<div class="stage-index" id="workIndex">01</div>
|
||||
<h3 id="workTitle">Opening Spread</h3>
|
||||
<p id="workCopy">
|
||||
首页像一本刊物的开篇大跨页：强标题、宽留白、细线和小号说明文字共同建立秩序，而不是用一堆发光元素抢注意力。
|
||||
首页像一本刊物的开篇大跨页：不是堆特效，而是用标题、说明、细线和留白一起建立一眼可感知的秩序。
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="system" class="system section reveal">
|
||||
<div class="section-head">
|
||||
<p class="kicker">System</p>
|
||||
<h2>视觉系统不复杂，但必须一致。</h2>
|
||||
<section id="system" class="section reveal">
|
||||
<div class="section-head ruled-row">
|
||||
<div>
|
||||
<p class="kicker">System</p>
|
||||
<h2>一套足够克制、但能支撑细节的视觉系统。</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-grid">
|
||||
|
||||
<div class="system-grid ruled-row">
|
||||
<article class="system-card">
|
||||
<span>Typography</span>
|
||||
<strong>Serif headline / Sans body</strong>
|
||||
<p>标题用更有书卷感的衬线中文，正文维持干净无衬线，让页面既有性格也不失可读性。</p>
|
||||
<p>标题用更有书卷感的衬线中文，正文保持无衬线，以免页面陷入“全都在强调”的疲劳状态。</p>
|
||||
</article>
|
||||
<article class="system-card">
|
||||
<span>Palette</span>
|
||||
<strong>Ink / Paper / Oxblood</strong>
|
||||
<p>颜色压到少数几种：墨黑、纸白、米灰、暗红。这样更像品牌系统，而不是灵感拼贴。</p>
|
||||
<p>主色调维持在墨黑、纸白、灰米和暗红之间，确保视觉语言更接近品牌系统，而不是灵感拼贴。</p>
|
||||
</article>
|
||||
<article class="system-card">
|
||||
<span>Motion</span>
|
||||
<strong>Reveal / Shift / Fade</strong>
|
||||
<p>动效只使用最基本的进入、位移和透明度变化，避免每个区域都在“自我表演”。</p>
|
||||
<span>Border & Grid</span>
|
||||
<strong>One shell, one logic</strong>
|
||||
<p>背景线、内容边框、说明条和交互组件全部依附于同一页壳，不再出现互相打架的边界体系。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="closing" class="closing section reveal">
|
||||
<div class="closing-panel">
|
||||
<section id="components" class="section reveal">
|
||||
<div class="section-head split-head ruled-row">
|
||||
<div>
|
||||
<p class="kicker">Components</p>
|
||||
<h2>再加一组真正可以操作的前端交互组件。</h2>
|
||||
</div>
|
||||
<p class="section-caption">切换布局语气、信息密度与材质标记，右侧预览会即时更新。</p>
|
||||
</div>
|
||||
|
||||
<div class="components-layout ruled-row">
|
||||
<div class="control-panel">
|
||||
<div class="control-block">
|
||||
<p class="control-label">Layout tone</p>
|
||||
<div class="segmented" role="tablist" aria-label="布局语气切换">
|
||||
<button class="tone-chip is-active" type="button" data-tone="quiet">Quiet</button>
|
||||
<button class="tone-chip" type="button" data-tone="balanced">Balanced</button>
|
||||
<button class="tone-chip" type="button" data-tone="dramatic">Dramatic</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-block">
|
||||
<label class="control-label" for="densityRange">Information density</label>
|
||||
<input id="densityRange" class="density-range" type="range" min="1" max="3" step="1" value="2" />
|
||||
<div class="density-legend">
|
||||
<span>Airy</span>
|
||||
<span id="densityValue">Balanced</span>
|
||||
<span>Dense</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-block">
|
||||
<p class="control-label">Material accent</p>
|
||||
<div class="swatch-row">
|
||||
<button class="swatch is-active" type="button" data-accent="#7f2f2f" style="--swatch:#7f2f2f"></button>
|
||||
<button class="swatch" type="button" data-accent="#3f5a73" style="--swatch:#3f5a73"></button>
|
||||
<button class="swatch" type="button" data-accent="#6c6250" style="--swatch:#6c6250"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-block">
|
||||
<p class="control-label">Editorial notes</p>
|
||||
<div class="note-stack">
|
||||
<button class="note-item is-active" type="button" data-note="封面对齐决定第一印象。">封面对齐决定第一印象。</button>
|
||||
<button class="note-item" type="button" data-note="组件数量增加后，更需要统一边框逻辑。">组件数量增加后，更需要统一边框逻辑。</button>
|
||||
<button class="note-item" type="button" data-note="交互反馈应该像纸页翻动，而不是界面在炫耀。">交互反馈应该像纸页翻动，而不是界面在炫耀。</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-panel">
|
||||
<div class="preview-card" id="previewCard" data-tone="balanced" data-density="2">
|
||||
<div class="preview-topline">
|
||||
<span id="previewTone">Balanced tone</span>
|
||||
<span id="previewDensity">Density 02</span>
|
||||
</div>
|
||||
<div class="preview-body">
|
||||
<p class="preview-kicker">Live editorial specimen</p>
|
||||
<h3 id="previewTitle">A layout that knows where to stop.</h3>
|
||||
<p id="previewText">
|
||||
这一块不是静态说明，而是一张会随着交互变化的样张：它会根据布局语气、信息密度与材料色点，实时调整状态。
|
||||
</p>
|
||||
</div>
|
||||
<div class="preview-foot">
|
||||
<span id="previewAccentLabel">Accent / Oxblood</span>
|
||||
<strong id="previewNote">封面对齐决定第一印象。</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mini-modules">
|
||||
<details class="mini-module" open>
|
||||
<summary>Spacing rule</summary>
|
||||
<p>所有主要模块共享统一的竖向节奏，避免 section 间的呼吸不一致。</p>
|
||||
</details>
|
||||
<details class="mini-module">
|
||||
<summary>Border rule</summary>
|
||||
<p>边框只在需要建立层级和材料感时出现，不再无差别包裹所有区域。</p>
|
||||
</details>
|
||||
<details class="mini-module">
|
||||
<summary>Motion rule</summary>
|
||||
<p>交互组件只做提示性运动，不做自我表演型运动。</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="closing" class="section reveal">
|
||||
<div class="closing-panel ruled-row">
|
||||
<p class="kicker">Closing</p>
|
||||
<h2>真正高级的页面，通常都有一点节制。</h2>
|
||||
<h2>当结构、边界与互动开始说同一种语言，页面才会显得真正完整。</h2>
|
||||
<p>
|
||||
如果第一页就把所有招式用完，观者只会记得“效果很多”。但如果页面知道何时收、何时留白、何时只用一条线和一块色面说话，它才更像真正完成度高的作品。
|
||||
这一版的目的不是把元素做得更多，而是让每一个元素都有归属：线条知道为什么在那里，边框知道为何出现，组件知道自己服务于什么。这样页面才不再只是“看起来不错”，而会更接近真正可落地的前端作品。
|
||||
</p>
|
||||
<div class="closing-signoff">
|
||||
<span>Spectra Lab / Editorial pass</span>
|
||||
<span>Built for calm impact.</span>
|
||||
<span>Spectra Lab / Alignment pass</span>
|
||||
<span>Built with stricter structure.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
642
styles.css
642
styles.css
@@ -1,33 +1,38 @@
|
||||
:root {
|
||||
--bg: #111111;
|
||||
--bg-soft: #171717;
|
||||
--shell-width: 1320px;
|
||||
--shell-gutter: 24px;
|
||||
--grid-gap: 24px;
|
||||
--bg: #121212;
|
||||
--bg-soft: #181818;
|
||||
--panel: #1d1b1a;
|
||||
--panel-2: #23211f;
|
||||
--paper: #f2ece4;
|
||||
--paper-soft: #e6ded3;
|
||||
--ink: #141414;
|
||||
--line: rgba(255, 255, 255, 0.16);
|
||||
--line-strong: rgba(255, 255, 255, 0.28);
|
||||
--text: #f4efe8;
|
||||
--muted: rgba(244, 239, 232, 0.66);
|
||||
--paper-soft: #e5ddd1;
|
||||
--ink: #151515;
|
||||
--text: #f3efe8;
|
||||
--muted: rgba(243, 239, 232, 0.68);
|
||||
--line: rgba(255, 255, 255, 0.11);
|
||||
--line-strong: rgba(255, 255, 255, 0.22);
|
||||
--accent: #7f2f2f;
|
||||
--accent-soft: rgba(127, 47, 47, 0.16);
|
||||
--shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
|
||||
--accent-soft: rgba(127, 47, 47, 0.12);
|
||||
--shadow: 0 26px 80px rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
body.light-mode {
|
||||
--bg: #efe8de;
|
||||
--bg-soft: #e7dfd3;
|
||||
--panel: #f6f0e7;
|
||||
--paper: #ffffff;
|
||||
--paper-soft: #f5eee4;
|
||||
--bg: #eee7dd;
|
||||
--bg-soft: #e6ddd1;
|
||||
--panel: #f7f1e8;
|
||||
--panel-2: #f1eadf;
|
||||
--paper: #fffdfa;
|
||||
--paper-soft: #f3ebdf;
|
||||
--ink: #171717;
|
||||
--line: rgba(23, 23, 23, 0.12);
|
||||
--line-strong: rgba(23, 23, 23, 0.22);
|
||||
--text: #171717;
|
||||
--muted: rgba(23, 23, 23, 0.68);
|
||||
--muted: rgba(23, 23, 23, 0.7);
|
||||
--line: rgba(23, 23, 23, 0.11);
|
||||
--line-strong: rgba(23, 23, 23, 0.2);
|
||||
--accent: #8d3d38;
|
||||
--accent-soft: rgba(141, 61, 56, 0.11);
|
||||
--shadow: 0 20px 60px rgba(28, 22, 18, 0.08);
|
||||
--accent-soft: rgba(141, 61, 56, 0.12);
|
||||
--shadow: 0 18px 50px rgba(29, 22, 18, 0.08);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -42,60 +47,64 @@ body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
|
||||
radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 30%),
|
||||
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
|
||||
color: var(--text);
|
||||
font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
transition: background 260ms ease, color 260ms ease;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
|
||||
linear-gradient(180deg, transparent 0, transparent 88px, var(--line) 88px, var(--line) 89px, transparent 89px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 28px;
|
||||
border: 1px solid var(--line);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
a,
|
||||
input {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
width: min(1320px, calc(100% - 48px));
|
||||
position: relative;
|
||||
width: min(var(--shell-width), calc(100% - (var(--shell-gutter) * 2)));
|
||||
margin: 0 auto;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.section,
|
||||
.footer {
|
||||
.page-shell > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: var(--grid-gap);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.page-grid span {
|
||||
border-left: 1px solid var(--line);
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.page-grid span:last-child {
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 22px 0 18px;
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent 18%), color-mix(in srgb, var(--bg) 58%, transparent 42%));
|
||||
gap: 18px;
|
||||
padding: 18px 0;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent 12%), color-mix(in srgb, var(--bg) 58%, transparent 42%));
|
||||
backdrop-filter: blur(14px);
|
||||
z-index: 8;
|
||||
border-bottom: 1px solid var(--line);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -103,47 +112,44 @@ a {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 6px var(--accent-soft);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.nav-links a,
|
||||
.mode-toggle,
|
||||
.footer {
|
||||
font-size: 0.92rem;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
|
||||
.nav-links a:hover,
|
||||
.mode-toggle:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.mode-toggle:hover,
|
||||
.nav-links a:hover {
|
||||
color: var(--text);
|
||||
.mode-toggle {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
|
||||
}
|
||||
|
||||
.mode-toggle:hover {
|
||||
@@ -151,45 +157,27 @@ a {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 42px 0 72px;
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-ledger {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 30px;
|
||||
padding-top: 18px;
|
||||
.section,
|
||||
.hero,
|
||||
.footer {
|
||||
padding: 36px 0 0;
|
||||
}
|
||||
|
||||
.ruled-row {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.ledger-item {
|
||||
padding: 18px 18px 20px;
|
||||
border: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
|
||||
}
|
||||
|
||||
.ledger-item span,
|
||||
.closing-signoff span {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ledger-item strong {
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-meta,
|
||||
.section-head,
|
||||
.footer {
|
||||
.footer,
|
||||
.closing-signoff,
|
||||
.preview-topline,
|
||||
.preview-foot,
|
||||
.density-legend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
@@ -199,27 +187,54 @@ a {
|
||||
.kicker,
|
||||
.issue,
|
||||
.stage-kicker,
|
||||
.system-card span {
|
||||
.control-label,
|
||||
.preview-kicker,
|
||||
.ledger-item span,
|
||||
.system-card span,
|
||||
.closing-signoff span,
|
||||
.mini-module summary,
|
||||
.preview-topline span {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 0.74rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
.hero-meta,
|
||||
.section-head {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.statement-grid,
|
||||
.works-layout,
|
||||
.system-grid,
|
||||
.hero-ledger,
|
||||
.components-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
|
||||
gap: 36px;
|
||||
margin-top: 26px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--line);
|
||||
gap: var(--grid-gap);
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
grid-column: 1 / span 8;
|
||||
}
|
||||
|
||||
.hero-note {
|
||||
grid-column: 10 / span 3;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.hero-copy h1,
|
||||
.section-head h2,
|
||||
.closing-panel h2,
|
||||
.work-stage h3 {
|
||||
.work-stage h3,
|
||||
.preview-card h3,
|
||||
.closing-panel h2 {
|
||||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||||
letter-spacing: -0.03em;
|
||||
font-weight: 700;
|
||||
@@ -227,84 +242,117 @@ a {
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(3.5rem, 8vw, 7rem);
|
||||
line-height: 1.03;
|
||||
font-size: clamp(3.3rem, 7.8vw, 6.6rem);
|
||||
line-height: 1.04;
|
||||
max-width: 11ch;
|
||||
}
|
||||
|
||||
.hero-text,
|
||||
.statement-grid p,
|
||||
.system-card p,
|
||||
.closing-panel p,
|
||||
.work-stage p,
|
||||
.section-caption,
|
||||
.work-item small,
|
||||
.work-stage p,
|
||||
.system-card p,
|
||||
.preview-card p,
|
||||
.mini-module p,
|
||||
.closing-panel p,
|
||||
.hero-note p {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
line-height: 1.82;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
margin: 28px 0 0;
|
||||
max-width: 46rem;
|
||||
font-size: 1.06rem;
|
||||
max-width: 48rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.hero-note {
|
||||
align-self: end;
|
||||
padding: 22px 0 0 20px;
|
||||
border-left: 1px solid var(--line);
|
||||
.framed-note,
|
||||
.ledger-item,
|
||||
.work-item,
|
||||
.stage-card,
|
||||
.system-card,
|
||||
.control-panel,
|
||||
.preview-card,
|
||||
.mini-module,
|
||||
.closing-panel {
|
||||
border: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 72px 0;
|
||||
.framed-note {
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
.hero-ledger {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.ledger-item {
|
||||
padding: 18px 20px 20px;
|
||||
}
|
||||
|
||||
.ledger-item:nth-child(1) {
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.ledger-item:nth-child(2) {
|
||||
grid-column: 5 / span 4;
|
||||
}
|
||||
|
||||
.ledger-item:nth-child(3) {
|
||||
grid-column: 9 / span 4;
|
||||
}
|
||||
|
||||
.ledger-item strong {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
line-height: 1.65;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.section-head h2,
|
||||
.closing-panel h2 {
|
||||
margin: 10px 0 0;
|
||||
font-size: clamp(2rem, 4vw, 3.6rem);
|
||||
line-height: 1.1;
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.statement-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
margin-top: 28px;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.split-head {
|
||||
align-items: end;
|
||||
.statement-grid p:nth-child(1) {
|
||||
grid-column: 1 / span 6;
|
||||
}
|
||||
|
||||
.statement-grid p:nth-child(2) {
|
||||
grid-column: 7 / span 6;
|
||||
}
|
||||
|
||||
.works-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: 28px;
|
||||
margin-top: 30px;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.work-list {
|
||||
grid-column: 1 / span 5;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.work-stage {
|
||||
grid-column: 6 / span 7;
|
||||
}
|
||||
|
||||
.work-item {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr;
|
||||
grid-template-columns: 48px 1fr;
|
||||
gap: 16px;
|
||||
padding: 18px 18px 20px;
|
||||
text-align: left;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
|
||||
cursor: pointer;
|
||||
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
||||
}
|
||||
@@ -313,7 +361,13 @@ a {
|
||||
.work-item.is-active {
|
||||
transform: translateX(4px);
|
||||
border-color: var(--line-strong);
|
||||
background: var(--accent-soft);
|
||||
background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.02));
|
||||
}
|
||||
|
||||
.work-number {
|
||||
letter-spacing: 0.14em;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.work-item.is-active .work-number,
|
||||
@@ -321,42 +375,20 @@ a {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.work-number {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.work-item strong {
|
||||
display: block;
|
||||
font-size: 1.12rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.work-stage {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.stage-card,
|
||||
.system-card,
|
||||
.closing-panel {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 34px;
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
padding: 34px;
|
||||
background:
|
||||
linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 100%),
|
||||
linear-gradient(135deg, rgba(255,255,255,0.02), transparent 48%),
|
||||
linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 80%, black 20%));
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%),
|
||||
linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 84%, black 16%));
|
||||
}
|
||||
|
||||
.stage-card::before {
|
||||
@@ -364,8 +396,7 @@ a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.04) 100%);
|
||||
opacity: 0.5;
|
||||
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.045));
|
||||
}
|
||||
|
||||
.stage-card.is-refreshing {
|
||||
@@ -373,60 +404,192 @@ a {
|
||||
}
|
||||
|
||||
.stage-index {
|
||||
font-size: clamp(4.2rem, 8vw, 8rem);
|
||||
margin: 18px 0 12px;
|
||||
font-size: clamp(4rem, 8vw, 7.6rem);
|
||||
line-height: 0.92;
|
||||
margin: 20px 0 12px;
|
||||
color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
|
||||
color: color-mix(in srgb, var(--accent) 74%, var(--text) 26%);
|
||||
}
|
||||
|
||||
.work-stage h3 {
|
||||
font-size: clamp(1.8rem, 3vw, 3rem);
|
||||
.work-stage h3,
|
||||
.preview-card h3 {
|
||||
font-size: clamp(1.8rem, 3vw, 2.8rem);
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.system-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18px;
|
||||
margin-top: 28px;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.system-card {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.system-card:nth-child(1) {
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.system-card:nth-child(2) {
|
||||
grid-column: 5 / span 4;
|
||||
}
|
||||
|
||||
.system-card:nth-child(3) {
|
||||
grid-column: 9 / span 4;
|
||||
}
|
||||
|
||||
.system-card strong {
|
||||
display: block;
|
||||
margin: 18px 0 10px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.35;
|
||||
margin: 16px 0 10px;
|
||||
font-size: 1.16rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.components-layout {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
grid-column: 1 / span 5;
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
grid-column: 6 / span 7;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.control-block {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.segmented,
|
||||
.swatch-row,
|
||||
.note-stack {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tone-chip,
|
||||
.note-item {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
|
||||
}
|
||||
|
||||
.tone-chip.is-active,
|
||||
.note-item.is-active,
|
||||
.tone-chip:hover,
|
||||
.note-item:hover {
|
||||
border-color: var(--line-strong);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.density-range {
|
||||
width: 100%;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.density-legend {
|
||||
font-size: 0.84rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--swatch);
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.swatch.is-active {
|
||||
outline: 2px solid color-mix(in srgb, var(--swatch) 60%, white 40%);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
padding: 24px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 34%),
|
||||
linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 86%, black 14%));
|
||||
transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
|
||||
}
|
||||
|
||||
.preview-card[data-tone='quiet'] {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.preview-card[data-tone='balanced'] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.preview-card[data-tone='dramatic'] {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.preview-body {
|
||||
padding: 22px 0 28px;
|
||||
}
|
||||
|
||||
.preview-foot {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
#previewNote {
|
||||
max-width: 32ch;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.mini-modules {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mini-module {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.mini-module summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mini-module p {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.closing-panel {
|
||||
padding: 36px;
|
||||
padding: 34px;
|
||||
background:
|
||||
linear-gradient(0deg, rgba(127, 47, 47, 0.08), rgba(127, 47, 47, 0.08)),
|
||||
linear-gradient(0deg, color-mix(in srgb, var(--accent) 12%, transparent 88%), color-mix(in srgb, var(--accent) 12%, transparent 88%)),
|
||||
linear-gradient(180deg, var(--paper-soft), var(--paper));
|
||||
color: var(--ink);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.closing-panel .kicker,
|
||||
.closing-panel p {
|
||||
color: rgba(20, 20, 20, 0.7);
|
||||
.closing-panel p,
|
||||
.closing-signoff span {
|
||||
color: rgba(20, 20, 20, 0.72);
|
||||
}
|
||||
|
||||
.closing-signoff {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 30px;
|
||||
margin-top: 28px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(20, 20, 20, 0.12);
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 22px 0 42px;
|
||||
margin-top: 28px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@@ -444,7 +607,7 @@ a {
|
||||
@keyframes stageRefresh {
|
||||
0% {
|
||||
transform: translateY(8px);
|
||||
opacity: 0.86;
|
||||
opacity: 0.88;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
@@ -453,18 +616,31 @@ a {
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.topbar,
|
||||
.hero-meta,
|
||||
.section-head,
|
||||
.works-layout,
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.hero-note,
|
||||
.ledger-item,
|
||||
.statement-grid p:nth-child(1),
|
||||
.statement-grid p:nth-child(2),
|
||||
.work-list,
|
||||
.work-stage,
|
||||
.system-card,
|
||||
.control-panel,
|
||||
.preview-panel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.hero-ledger,
|
||||
.statement-grid,
|
||||
.works-layout,
|
||||
.system-grid,
|
||||
.footer {
|
||||
grid-template-columns: 1fr !important;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.components-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
@@ -472,41 +648,43 @@ a {
|
||||
}
|
||||
|
||||
.hero-note {
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-left: 0;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.system-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
body::after {
|
||||
inset: 14px;
|
||||
:root {
|
||||
--shell-gutter: 12px;
|
||||
--grid-gap: 16px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
width: min(100% - 24px, 1320px);
|
||||
.page-grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
font-size: clamp(2.6rem, 13vw, 4.4rem);
|
||||
font-size: clamp(2.5rem, 13vw, 4.2rem);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 54px 0;
|
||||
.section,
|
||||
.hero,
|
||||
.footer {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.stage-card,
|
||||
.closing-panel,
|
||||
.preview-card,
|
||||
.control-panel,
|
||||
.system-card,
|
||||
.ledger-item,
|
||||
.framed-note,
|
||||
.mini-module {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.work-item {
|
||||
@@ -514,12 +692,12 @@ a {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stage-card,
|
||||
.closing-panel {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.closing-signoff {
|
||||
.preview-topline,
|
||||
.preview-foot,
|
||||
.closing-signoff,
|
||||
.density-legend,
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user