diff --git a/.gitignore b/.gitignore
index 53e30e3..6b78d50 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
spectra-lab-local.png
+spectra-lab-redesign.png
.DS_Store
diff --git a/app.js b/app.js
index ede35ae..9520e09 100644
--- a/app.js
+++ b/app.js
@@ -1,168 +1,43 @@
-const pointerGlow = document.getElementById('pointerGlow');
-const themeToggle = document.getElementById('themeToggle');
-const themeLabel = document.getElementById('themeLabel');
-const sceneCards = document.querySelectorAll('.scene-card');
-const counters = document.querySelectorAll('[data-counter]');
-const sceneDetailTitle = document.getElementById('sceneDetailTitle');
-const sceneDetailCopy = document.getElementById('sceneDetailCopy');
-const particleCanvas = document.getElementById('particleCanvas');
+const modeToggle = document.getElementById('modeToggle');
+const modeLabel = document.getElementById('modeLabel');
+const workItems = document.querySelectorAll('.work-item');
+const workIndex = document.getElementById('workIndex');
+const workTitle = document.getElementById('workTitle');
+const workCopy = document.getElementById('workCopy');
+const revealBlocks = document.querySelectorAll('.reveal');
-const themes = [
- { className: '', label: 'Aurora' },
- { className: 'theme-ember', label: 'Ember' },
- { className: 'theme-tide', label: 'Tide' },
-];
-
-let themeIndex = 0;
-
-function setTheme(index) {
- document.body.classList.remove('theme-ember', 'theme-tide');
- const theme = themes[index];
- if (theme.className) {
- document.body.classList.add(theme.className);
- }
- themeLabel.textContent = theme.label;
+function applyMode() {
+ const isLight = document.body.classList.contains('light-mode');
+ modeToggle.textContent = isLight ? 'Dark Mode' : 'Light Mode';
+ modeLabel.textContent = isLight ? 'Editorial Light' : 'Editorial Dark';
}
-function animateCounter(element) {
- const target = Number(element.dataset.counter || 0);
- const duration = 1400;
- const start = performance.now();
-
- function step(now) {
- const progress = Math.min((now - start) / duration, 1);
- const eased = 1 - Math.pow(1 - progress, 3);
- element.textContent = Math.round(target * eased);
- if (progress < 1) requestAnimationFrame(step);
- }
-
- requestAnimationFrame(step);
-}
-
-function mountParticleField() {
- if (!particleCanvas) return;
- const ctx = particleCanvas.getContext('2d');
- if (!ctx) return;
-
- const particles = [];
- const particleCount = 48;
- let width = 0;
- let height = 0;
-
- function resize() {
- width = window.innerWidth;
- height = window.innerHeight;
- particleCanvas.width = width * window.devicePixelRatio;
- particleCanvas.height = height * window.devicePixelRatio;
- particleCanvas.style.width = `${width}px`;
- particleCanvas.style.height = `${height}px`;
- ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
- }
-
- function seed() {
- particles.length = 0;
- for (let i = 0; i < particleCount; i += 1) {
- particles.push({
- x: Math.random() * width,
- y: Math.random() * height,
- r: Math.random() * 1.8 + 0.8,
- vx: (Math.random() - 0.5) * 0.28,
- vy: (Math.random() - 0.5) * 0.28,
- });
- }
- }
-
- function draw() {
- ctx.clearRect(0, 0, width, height);
-
- particles.forEach((particle, index) => {
- particle.x += particle.vx;
- particle.y += particle.vy;
-
- if (particle.x < -20) particle.x = width + 20;
- if (particle.x > width + 20) particle.x = -20;
- if (particle.y < -20) particle.y = height + 20;
- if (particle.y > height + 20) particle.y = -20;
-
- ctx.beginPath();
- ctx.fillStyle = 'rgba(255,255,255,0.38)';
- ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
- ctx.fill();
-
- for (let j = index + 1; j < particles.length; j += 1) {
- const other = particles[j];
- const dx = particle.x - other.x;
- const dy = particle.y - other.y;
- const distance = Math.sqrt(dx * dx + dy * dy);
- if (distance < 130) {
- ctx.beginPath();
- ctx.strokeStyle = `rgba(130, 180, 255, ${0.12 * (1 - distance / 130)})`;
- ctx.moveTo(particle.x, particle.y);
- ctx.lineTo(other.x, other.y);
- ctx.stroke();
- }
- }
- });
-
- requestAnimationFrame(draw);
- }
-
- resize();
- seed();
- draw();
- window.addEventListener('resize', () => {
- resize();
- seed();
- });
-}
-
-window.addEventListener('pointermove', (event) => {
- pointerGlow.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+modeToggle?.addEventListener('click', () => {
+ document.body.classList.toggle('light-mode');
+ applyMode();
});
-sceneCards.forEach((card) => {
- card.addEventListener('pointermove', (event) => {
- const rect = card.getBoundingClientRect();
- const x = event.clientX - rect.left;
- const y = event.clientY - rect.top;
- const rotateX = ((y / rect.height) - 0.5) * -8;
- const rotateY = ((x / rect.width) - 0.5) * 10;
-
- card.style.setProperty('--mx', `${(x / rect.width) * 100}%`);
- card.style.setProperty('--my', `${(y / rect.height) * 100}%`);
- card.style.transform = `translateY(-6px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+workItems.forEach((item) => {
+ item.addEventListener('click', () => {
+ workItems.forEach((button) => button.classList.remove('is-active'));
+ item.classList.add('is-active');
+ workIndex.textContent = item.dataset.index || '';
+ workTitle.textContent = item.dataset.title || '';
+ workCopy.textContent = item.dataset.copy || '';
});
-
- card.addEventListener('pointerleave', () => {
- card.style.transform = '';
- });
-
- card.addEventListener('click', () => {
- sceneCards.forEach((item) => item.classList.remove('is-active'));
- card.classList.add('is-active');
- sceneDetailTitle.textContent = card.dataset.sceneTitle || '';
- sceneDetailCopy.textContent = card.dataset.sceneCopy || '';
- });
-});
-
-themeToggle.addEventListener('click', () => {
- themeIndex = (themeIndex + 1) % themes.length;
- setTheme(themeIndex);
});
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
- animateCounter(entry.target);
+ entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
},
- { threshold: 0.4 },
+ { threshold: 0.18 },
);
-counters.forEach((counter) => observer.observe(counter));
-sceneCards[0]?.classList.add('is-active');
-setTheme(themeIndex);
-mountParticleField();
+revealBlocks.forEach((block) => observer.observe(block));
+applyMode();
diff --git a/index.html b/index.html
index d20afe4..b406f4d 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
Spectra Lab
diff --git a/styles.css b/styles.css
index 89baec6..6ce3b7e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,30 +1,33 @@
:root {
- --bg: #070816;
- --bg-soft: rgba(255, 255, 255, 0.08);
- --panel: rgba(13, 17, 38, 0.5);
- --panel-strong: rgba(17, 21, 46, 0.72);
- --text: #f3f5ff;
- --muted: rgba(230, 236, 255, 0.72);
- --border: rgba(255, 255, 255, 0.14);
- --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
- --accent-a: #7c5cff;
- --accent-b: #2be4ff;
- --accent-c: #ff6bd6;
- --accent-d: #ffd166;
+ --bg: #111111;
+ --bg-soft: #171717;
+ --panel: #1d1b1a;
+ --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);
+ --accent: #7f2f2f;
+ --accent-soft: rgba(127, 47, 47, 0.16);
+ --shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
-body.theme-ember {
- --accent-a: #ff7a18;
- --accent-b: #ff3cac;
- --accent-c: #7b61ff;
- --accent-d: #ffe66d;
-}
-
-body.theme-tide {
- --accent-a: #4facfe;
- --accent-b: #00f2fe;
- --accent-c: #00ffa3;
- --accent-d: #b2f7ef;
+body.light-mode {
+ --bg: #efe8de;
+ --bg-soft: #e7dfd3;
+ --panel: #f6f0e7;
+ --paper: #ffffff;
+ --paper-soft: #f5eee4;
+ --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);
+ --accent: #8d3d38;
+ --accent-soft: rgba(141, 61, 56, 0.11);
+ --shadow: 0 20px 60px rgba(28, 22, 18, 0.08);
}
* {
@@ -38,149 +41,78 @@ html {
body {
margin: 0;
min-height: 100vh;
- font-family: 'Inter', 'Noto Sans SC', sans-serif;
- color: var(--text);
background:
- radial-gradient(circle at top left, rgba(124, 92, 255, 0.16), transparent 30%),
- radial-gradient(circle at top right, rgba(43, 228, 255, 0.12), transparent 28%),
- linear-gradient(180deg, #050611 0%, #090b18 45%, #06070d 100%);
- overflow-x: hidden;
+ linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
+ 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;
- background-image:
- linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
- background-size: 72px 72px;
- mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
- opacity: 0.28;
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;
}
-.noise {
+body::after {
+ content: '';
position: fixed;
- inset: 0;
- opacity: 0.08;
+ inset: 28px;
+ border: 1px solid var(--line);
pointer-events: none;
- background-image:
- radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22) 0 1px, transparent 1px),
- radial-gradient(circle at 70% 35%, rgba(255,255,255,0.16) 0 1px, transparent 1px),
- radial-gradient(circle at 30% 80%, rgba(255,255,255,0.12) 0 1px, transparent 1px);
- background-size: 180px 180px;
- mix-blend-mode: screen;
}
-.gradient-orb {
- position: fixed;
- width: 38rem;
- height: 38rem;
- border-radius: 50%;
- filter: blur(40px);
- opacity: 0.28;
- pointer-events: none;
- animation: drift 14s ease-in-out infinite alternate;
+button,
+a {
+ color: inherit;
}
-.orb-a {
- top: -8rem;
- left: -10rem;
- background: radial-gradient(circle, var(--accent-a), transparent 62%);
-}
-
-.orb-b {
- top: 24rem;
- right: -12rem;
- background: radial-gradient(circle, var(--accent-b), transparent 60%);
- animation-duration: 18s;
-}
-
-.orb-c {
- bottom: -10rem;
- left: 22%;
- background: radial-gradient(circle, var(--accent-c), transparent 58%);
- animation-duration: 22s;
-}
-
-.pointer-glow {
- position: fixed;
- width: 18rem;
- height: 18rem;
- margin-left: -9rem;
- margin-top: -9rem;
- border-radius: 50%;
- pointer-events: none;
- background: radial-gradient(circle, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 45%, transparent 72%);
- mix-blend-mode: screen;
- opacity: 0.75;
- z-index: 1;
-}
-
-.particle-canvas {
- position: fixed;
- inset: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- opacity: 0.55;
- z-index: 0;
+.page-shell {
+ width: min(1320px, calc(100% - 48px));
+ margin: 0 auto;
}
.topbar,
.section,
.footer {
position: relative;
- z-index: 2;
+ z-index: 1;
}
.topbar {
- width: min(1180px, calc(100% - 32px));
- margin: 20px auto 0;
- padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
+ padding: 28px 0 20px;
}
.brand {
- display: flex;
+ display: inline-flex;
align-items: center;
- gap: 14px;
+ gap: 12px;
+ text-decoration: none;
+ font-size: 0.95rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
}
.brand-mark {
- width: 14px;
- height: 14px;
+ width: 11px;
+ height: 11px;
border-radius: 50%;
- background: linear-gradient(135deg, var(--accent-b), var(--accent-c));
- box-shadow: 0 0 18px var(--accent-b), 0 0 40px var(--accent-c);
+ background: var(--accent);
+ box-shadow: 0 0 0 6px var(--accent-soft);
}
-.brand-eyebrow,
-.brand-sub,
-.eyebrow,
-.scene-tag,
-.metric-card span,
-.footer,
-.section-note {
- letter-spacing: 0.08em;
-}
-
-.brand-eyebrow,
-.eyebrow {
- margin: 0;
- text-transform: uppercase;
- color: rgba(255,255,255,0.74);
- font-size: 0.74rem;
-}
-
-.brand-sub {
- margin: 2px 0 0;
- font-size: 0.75rem;
- color: rgba(255,255,255,0.52);
+.brand-text {
+ font-weight: 700;
}
.nav-links {
@@ -189,436 +121,318 @@ body::before {
}
.nav-links a,
+.mode-toggle,
.footer {
- color: rgba(255,255,255,0.65);
- text-decoration: none;
font-size: 0.92rem;
-}
-
-.ghost-button,
-.primary-button,
-.secondary-button {
- border-radius: 999px;
- transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
-}
-
-.ghost-button {
- border: 1px solid rgba(255,255,255,0.14);
- background: rgba(255,255,255,0.05);
- color: var(--text);
- padding: 12px 16px;
- cursor: pointer;
-}
-
-.primary-button,
-.secondary-button {
text-decoration: none;
- padding: 14px 20px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
+ color: var(--muted);
}
-.primary-button {
- background: linear-gradient(135deg, var(--accent-a), var(--accent-c));
- color: white;
- box-shadow: 0 18px 40px rgba(124, 92, 255, 0.28);
+.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;
}
-.secondary-button {
+.mode-toggle:hover,
+.nav-links a:hover {
color: var(--text);
- border: 1px solid rgba(255,255,255,0.16);
- background: rgba(255,255,255,0.05);
-}
-
-.glass-panel {
- background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
- border: 1px solid var(--border);
- box-shadow: var(--shadow);
- backdrop-filter: blur(24px) saturate(160%);
- -webkit-backdrop-filter: blur(24px) saturate(160%);
-}
-
-.section {
- width: min(1180px, calc(100% - 32px));
- margin: 0 auto;
- padding: 84px 0;
}
.hero {
- display: grid;
- grid-template-columns: 1.08fr 0.92fr;
- align-items: center;
- gap: 42px;
- min-height: calc(100vh - 110px);
-}
-
-.hero-copy h1 {
- margin: 16px 0 18px;
- font-size: clamp(3rem, 7vw, 6.25rem);
- line-height: 0.95;
- letter-spacing: -0.045em;
-}
-
-.hero-text {
- max-width: 40rem;
- font-size: 1.05rem;
- line-height: 1.8;
- color: var(--muted);
-}
-
-.hero-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 14px;
- margin-top: 28px;
-}
-
-.hero-stage {
- position: relative;
- min-height: 620px;
- border-radius: 34px;
- overflow: hidden;
- padding: 30px;
-}
-
-.stage-grid,
-.stage-ring {
- position: absolute;
- inset: 0;
-}
-
-.stage-grid {
- background-image:
- linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
- background-size: 36px 36px;
- mask-image: radial-gradient(circle at center, black 45%, transparent 88%);
- animation: pulseGrid 12s linear infinite;
-}
-
-.stage-ring {
- inset: 12%;
- border-radius: 50%;
- border: 1px solid rgba(255,255,255,0.12);
- box-shadow:
- 0 0 40px rgba(124,92,255,0.22),
- inset 0 0 40px rgba(43,228,255,0.12);
-}
-
-.stage-core {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 16rem;
- height: 16rem;
- border-radius: 50%;
- display: grid;
- place-items: center;
- text-align: center;
- background: radial-gradient(circle, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
- border: 1px solid rgba(255,255,255,0.14);
- box-shadow: 0 0 60px rgba(124,92,255,0.22);
-}
-
-.stage-core p,
-.stage-core span {
- margin: 0;
- color: rgba(255,255,255,0.66);
- text-transform: uppercase;
- font-size: 0.78rem;
- letter-spacing: 0.1em;
-}
-
-.stage-core h2 {
- margin: 6px 0;
- font-size: 5rem;
- line-height: 1;
-}
-
-.floating-card {
- position: absolute;
- min-width: 180px;
- padding: 18px 18px 16px;
- border-radius: 24px;
- background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
- border: 1px solid rgba(255,255,255,0.16);
- box-shadow: 0 18px 40px rgba(0,0,0,0.28);
- backdrop-filter: blur(18px);
-}
-
-.floating-card p,
-.floating-card span {
- margin: 0;
- color: rgba(255,255,255,0.66);
- font-size: 0.78rem;
- letter-spacing: 0.08em;
- text-transform: uppercase;
-}
-
-.floating-card strong {
- display: block;
- margin: 8px 0 6px;
- font-size: 2.5rem;
-}
-
-.card-alpha { top: 8%; left: 4%; animation: floatCard 8s ease-in-out infinite; }
-.card-beta { right: 4%; top: 18%; animation: floatCard 11s ease-in-out infinite reverse; }
-.card-gamma { left: 12%; bottom: 8%; animation: floatCard 9s ease-in-out infinite 0.8s; }
-
-.section-heading {
- max-width: 52rem;
- margin-bottom: 28px;
-}
-
-.section-heading h2,
-.manifesto h2 {
- margin: 12px 0 0;
- font-size: clamp(2rem, 4vw, 3.6rem);
- line-height: 1.05;
- letter-spacing: -0.04em;
-}
-
-.split {
- display: flex;
- justify-content: space-between;
- gap: 20px;
- align-items: end;
-}
-
-.section-note,
-.manifesto p,
-.metric-card p,
-.scene-card p {
- color: var(--muted);
- line-height: 1.75;
-}
-
-.metric-grid,
-.gallery-grid {
- display: grid;
- gap: 18px;
-}
-
-.metric-grid {
- grid-template-columns: repeat(4, 1fr);
-}
-
-.metric-card,
-.scene-card,
-.manifesto {
- border-radius: 28px;
-}
-
-.metric-card {
- padding: 24px;
- min-height: 220px;
-}
-
-.metric-card strong {
- display: block;
- margin: 20px 0 14px;
- font-size: clamp(2rem, 4vw, 3.5rem);
- letter-spacing: -0.05em;
-}
-
-.accent-card {
- background: linear-gradient(135deg, rgba(124,92,255,0.2), rgba(43,228,255,0.1), rgba(255,255,255,0.06));
-}
-
-.gallery-grid {
- grid-template-columns: 1.2fr 1fr 1fr;
- grid-auto-rows: 250px;
-}
-
-.scene-card {
- position: relative;
- overflow: hidden;
- padding: 24px;
- transform-style: preserve-3d;
- transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
-}
-
-.scene-card::before {
- content: '';
- position: absolute;
- inset: -20%;
- background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), transparent 35%);
- opacity: 0;
- transition: opacity 220ms ease;
-}
-
-.scene-card:hover {
- transform: translateY(-6px) rotateX(4deg) rotateY(-4deg);
- border-color: rgba(255,255,255,0.24);
- box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 30px rgba(124,92,255,0.14);
-}
-
-.scene-card:hover::before {
- opacity: 1;
-}
-
-.scene-card.is-active {
- border-color: rgba(255,255,255,0.3);
- box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 34px rgba(124,92,255,0.18);
-}
-
-.scene-large {
- grid-row: span 2;
- min-height: 518px;
- background:
- linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
- radial-gradient(circle at top right, rgba(43,228,255,0.24), transparent 35%),
- radial-gradient(circle at bottom left, rgba(124,92,255,0.24), transparent 34%);
-}
-
-.scene-tag {
- color: rgba(255,255,255,0.72);
- font-size: 0.74rem;
- text-transform: uppercase;
-}
-
-.scene-card h3 {
- margin: 18px 0 10px;
- font-size: 1.8rem;
-}
-
-.scene-detail {
- margin-top: 20px;
- padding: 24px 26px;
-}
-
-.scene-detail h3 {
- margin: 10px 0 6px;
- font-size: clamp(1.6rem, 3vw, 2.4rem);
-}
-
-.manifesto {
- padding: 34px;
- margin-top: 14px;
+ padding: 42px 0 72px;
}
+.hero-meta,
+.section-head,
.footer {
- width: min(1180px, calc(100% - 32px));
- margin: 0 auto;
- padding: 26px 0 44px;
display: flex;
justify-content: space-between;
gap: 16px;
+ align-items: baseline;
}
-.ghost-button:hover,
-.primary-button:hover,
-.secondary-button:hover {
- transform: translateY(-2px);
+.kicker,
+.issue,
+.stage-kicker,
+.system-card span {
+ margin: 0;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ font-size: 0.74rem;
+ color: var(--muted);
}
-@keyframes drift {
- 0% { transform: translate3d(0, 0, 0) scale(1); }
- 100% { transform: translate3d(24px, -32px, 0) scale(1.08); }
+.hero-grid {
+ 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);
}
-@keyframes floatCard {
- 0%, 100% { transform: translateY(0px); }
- 50% { transform: translateY(-12px); }
+.hero-copy h1,
+.section-head h2,
+.closing-panel h2,
+.work-stage h3 {
+ font-family: 'Noto Serif SC', 'Songti SC', serif;
+ letter-spacing: -0.03em;
+ font-weight: 700;
}
-@keyframes pulseGrid {
- 0% { transform: scale(1) rotate(0deg); opacity: 0.72; }
- 50% { transform: scale(1.04) rotate(0.8deg); opacity: 0.9; }
- 100% { transform: scale(1) rotate(0deg); opacity: 0.72; }
+.hero-copy h1 {
+ margin: 0;
+ font-size: clamp(3.5rem, 8vw, 7rem);
+ line-height: 1.03;
+ max-width: 11ch;
+}
+
+.hero-text,
+.statement-grid p,
+.system-card p,
+.closing-panel p,
+.work-stage p,
+.section-caption,
+.work-item small,
+.hero-note p {
+ color: var(--muted);
+ line-height: 1.8;
+}
+
+.hero-text {
+ margin: 28px 0 0;
+ max-width: 46rem;
+ font-size: 1.06rem;
+}
+
+.hero-note {
+ align-self: end;
+ padding: 22px 0 0 20px;
+ border-left: 1px solid var(--line);
+}
+
+.section {
+ padding: 72px 0;
+}
+
+.section-head {
+ padding-bottom: 18px;
+ border-bottom: 1px solid var(--line);
+}
+
+.section-head h2,
+.closing-panel h2 {
+ margin: 10px 0 0;
+ font-size: clamp(2rem, 4vw, 3.6rem);
+ line-height: 1.1;
+}
+
+.statement-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 28px;
+ margin-top: 28px;
+}
+
+.split-head {
+ align-items: end;
+}
+
+.works-layout {
+ display: grid;
+ grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
+ gap: 28px;
+ margin-top: 30px;
+}
+
+.work-list {
+ display: grid;
+ gap: 12px;
+}
+
+.work-item {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 56px 1fr;
+ gap: 16px;
+ text-align: left;
+ padding: 18px;
+ border: 1px solid var(--line);
+ background: transparent;
+ color: var(--text);
+ cursor: pointer;
+ transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
+}
+
+.work-item:hover,
+.work-item.is-active {
+ transform: translateX(4px);
+ border-color: var(--line-strong);
+ background: var(--accent-soft);
+}
+
+.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);
+}
+
+.stage-card {
+ min-height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ 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%));
+}
+
+.stage-index {
+ font-size: clamp(4.2rem, 8vw, 8rem);
+ line-height: 0.92;
+ margin: 20px 0 12px;
+ color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
+}
+
+.work-stage h3 {
+ font-size: clamp(1.8rem, 3vw, 3rem);
+ margin: 0 0 14px;
+}
+
+.system-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 18px;
+ margin-top: 28px;
+}
+
+.system-card {
+ padding: 22px;
+}
+
+.system-card strong {
+ display: block;
+ margin: 18px 0 10px;
+ font-size: 1.2rem;
+ line-height: 1.35;
+}
+
+.closing-panel {
+ padding: 36px;
+ background:
+ linear-gradient(0deg, rgba(127, 47, 47, 0.08), rgba(127, 47, 47, 0.08)),
+ 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);
+}
+
+.footer {
+ padding: 22px 0 42px;
+ border-top: 1px solid var(--line);
+}
+
+.reveal {
+ opacity: 0;
+ transform: translateY(24px);
+ transition: opacity 650ms ease, transform 650ms ease;
+}
+
+.reveal.is-visible {
+ opacity: 1;
+ transform: translateY(0);
}
@media (max-width: 1100px) {
- .hero,
- .metric-grid,
- .gallery-grid,
- .split,
- .footer,
- .topbar {
+ .topbar,
+ .hero-meta,
+ .section-head,
+ .works-layout,
+ .hero-grid,
+ .statement-grid,
+ .system-grid,
+ .footer {
grid-template-columns: 1fr !important;
flex-direction: column;
align-items: flex-start;
}
- .hero {
- min-height: auto;
- padding-top: 40px;
+ .hero-copy h1 {
+ max-width: none;
}
- .metric-grid {
+ .hero-note {
+ border-left: none;
+ border-top: 1px solid var(--line);
+ padding-left: 0;
+ padding-top: 18px;
+ }
+
+ .system-grid {
display: grid;
- grid-template-columns: repeat(2, 1fr) !important;
- }
-
- .gallery-grid {
- display: grid;
- grid-template-columns: 1fr 1fr !important;
- }
-
- .scene-large {
- grid-column: 1 / -1;
- grid-row: auto;
- min-height: 320px;
- }
-
- .hero-stage {
- min-height: 500px;
- width: 100%;
+ grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
- .section {
- padding: 64px 0;
+ body::after {
+ inset: 14px;
}
- .topbar {
- margin-top: 14px;
+ .page-shell {
+ width: min(100% - 24px, 1320px);
}
.nav-links {
display: none;
}
- .metric-grid,
- .gallery-grid {
- grid-template-columns: 1fr !important;
+ .hero {
+ padding-top: 20px;
}
.hero-copy h1 {
- font-size: clamp(2.7rem, 14vw, 4.2rem);
+ font-size: clamp(2.6rem, 13vw, 4.4rem);
}
- .hero-stage {
- min-height: 460px;
- padding: 18px;
+ .section {
+ padding: 54px 0;
}
- .stage-core {
- width: 12rem;
- height: 12rem;
+ .work-item {
+ grid-template-columns: 40px 1fr;
+ padding: 16px;
}
- .stage-core h2 {
- font-size: 3.7rem;
- }
-
- .floating-card {
- min-width: 140px;
- padding: 14px;
- }
-
- .floating-card strong {
- font-size: 2rem;
- }
-
- .manifesto {
+ .stage-card,
+ .closing-panel {
padding: 24px;
}
-
- .footer {
- padding-bottom: 30px;
- }
}