feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user