feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite

This commit is contained in:
2026-07-30 20:15:40 +09:00
parent d833252217
commit 36a4cd851e
20 changed files with 1266 additions and 105 deletions
+72 -7
View File
@@ -2,6 +2,27 @@
@tailwind components;
@tailwind utilities;
/* ==================================================================
OFFLINE GEIST FONT STACK (@font-face)
================================================================== */
@font-face {
font-family: 'Geist';
src: url('/fonts/geist/Geist-Variable.woff2') format('woff2-variations'),
url('/fonts/geist/Geist-Variable.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('/fonts/geist/GeistMono-Variable.woff2') format('woff2-variations'),
url('/fonts/geist/GeistMono-Variable.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ==================================================================
EDITORIAL DESIGN SYSTEM — global tokens & type
CUSTOMIZATION HOOK: design tokens are mirrored from tailwind.config.ts
@@ -9,18 +30,62 @@
================================================================== */
:root {
color-scheme: light;
--ink: #0a0a0a;
--ivory: #f5f1e8;
--paper: #ece6d6;
--line: #d8d1c0;
--vermillion: #d9342b;
--cobalt: #1b3a8a;
/* Offline System & CSS Font Variables */
--font-geist: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--font-display: 'Fraunces', Georgia, Cambria, 'Times New Roman', Times, serif;
--font-serif-ko: 'Noto Serif KR', 'Nanum Myeongjo', Batang, Georgia, serif;
--font-sans: 'Geist', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--ink-rgb: 10, 10, 10;
--ink-soft-rgb: 38, 36, 32;
--ink-mute-rgb: 107, 101, 91;
--ivory-rgb: 245, 241, 232;
--paper-rgb: 236, 230, 214;
--line-rgb: 216, 209, 192;
--vermillion-rgb: 217, 52, 43;
--vermillion-dark-rgb: 168, 35, 28;
--cobalt-rgb: 27, 58, 138;
--cobalt-dark-rgb: 18, 40, 99;
--ink: rgb(var(--ink-rgb));
--ink-soft: rgb(var(--ink-soft-rgb));
--ink-mute: rgb(var(--ink-mute-rgb));
--ivory: rgb(var(--ivory-rgb));
--paper: rgb(var(--paper-rgb));
--line: rgb(var(--line-rgb));
--vermillion: rgb(var(--vermillion-rgb));
--vermillion-dark: rgb(var(--vermillion-dark-rgb));
--cobalt: rgb(var(--cobalt-rgb));
--cobalt-dark: rgb(var(--cobalt-dark-rgb));
--grain-color: rgba(10, 10, 10, 0.022);
/* CUSTOMIZATION HOOK — MOTION: global reveal timing */
--reveal-duration: 600ms;
--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark,
html[data-theme="dark"] {
color-scheme: dark;
--ink-rgb: 245, 241, 232;
--ink-soft-rgb: 216, 209, 192;
--ink-mute-rgb: 160, 153, 142;
--ivory-rgb: 18, 18, 18;
--paper-rgb: 30, 28, 26;
--line-rgb: 51, 48, 43;
--vermillion-rgb: 235, 75, 66;
--vermillion-dark-rgb: 255, 107, 97;
--cobalt-rgb: 77, 119, 255;
--cobalt-dark-rgb: 112, 148, 255;
--grain-color: rgba(245, 241, 232, 0.03);
}
html {
scroll-behavior: smooth;
}
@@ -29,7 +94,7 @@ body {
@apply bg-ivory text-ink font-sans antialiased;
/* Subtle paper grain — pure CSS, no asset. */
background-image: radial-gradient(
rgba(10, 10, 10, 0.022) 1px,
var(--grain-color) 1px,
transparent 1px
);
background-size: 4px 4px;