feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
This commit is contained in:
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -1,39 +1,46 @@
|
|||
/* ==========================================================================
|
||||
비색의 침묵 — 디자인 토큰
|
||||
프리셋: editorial-archival
|
||||
컨셉 한 문장: 암실의 세 개의 방 — 사진이 어두울수록 유약이 가까워진다.
|
||||
레퍼런스: 방향 앵커는 dogfood-celadon(국립중앙박물관 등 전시 계열). 그 파일의
|
||||
6축 수치는 audit-references.md 에서 날조로 판명 — 토큰은 브리프에서
|
||||
다시 정했다. 박물관 암실의 실제 조건(어두운 벽, 스포트라이트)에서 유래.
|
||||
하지 않은 것: 포스터형 그라디언트 배경, 관람객 수 지표, 전시 인트로 영상
|
||||
자리. 이유: 암실의 권위는 어둠의 면적에서 나온다.
|
||||
비색, 1,280°C — 디자인 토큰 (2026-10-06 재작업)
|
||||
컨셉: 관람객이 유약 접사를 화면 가득 보고, 전시실 두 곳의 차례를 그 자리에서
|
||||
읽은 뒤 기간·시간을 확인한다. 섹션 하나가 암실의 벽 하나다.
|
||||
배정(outputs/rework-2026-10-06/plan.md): Song Myung / Noto Sans KR ·
|
||||
청록빛 먹 #0f1a18 · 167° 청록 · radius 4px · scroll-driven · feTurbulence · 듀오톤.
|
||||
값은 여기 한 곳에만 둔다. 다른 CSS 파일은 var()만 쓴다.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* 타입 — 최대(58px) ÷ 본문(16px) ≈ 3.6배 */
|
||||
--step--1: 0.8125rem; /* 13px */
|
||||
--step-0: 1rem; /* 16px */
|
||||
--step-1: 1.25rem; /* 20px */
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 28px */
|
||||
--step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);/* 58px */
|
||||
/* 타입 — 본문 16px, 표제는 한 줄 큰 낱말. 1440에서 표제 ÷ 본문 ≈ 7.5배 */
|
||||
--step--1: 0.8125rem; /* 13px — 캡션·보조. 한글 하한(typography §6-5) */
|
||||
--step-0: 1rem; /* 16px */
|
||||
--step-1: 1.1875rem; /* 19px — 리드 */
|
||||
--step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); /* 24→36px — 섹션 제목 문장 */
|
||||
--step-3: clamp(2.75rem, 1rem + 7.5vw, 7.5rem); /* 44→120px — h1 한 줄 큰 낱말 */
|
||||
--step-numeral: clamp(4rem, 2rem + 9vw, 9rem); /* 전시실 번호 */
|
||||
|
||||
--leading-tight: 1.3;
|
||||
--leading-normal: 1.85;
|
||||
--leading-tight: 1.15; /* 한 줄 표제·숫자 */
|
||||
--leading-heading: 1.3;
|
||||
--leading-body: 1.7;
|
||||
|
||||
--font-display: "MaruBuri", serif;
|
||||
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-display: "Song Myung", "Apple SD Gothic Neo", serif;
|
||||
--font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||||
--weight-body: 400;
|
||||
--weight-strong: 500;
|
||||
|
||||
/* 색 — 암실. 배경은 순흑이 아니라 석재 회색(벽), 강조는 비색 그 자체. */
|
||||
--surface: #121514;
|
||||
--surface-raised: #191d1c;
|
||||
--ink: #eceae2; /* 백색이 아니라 골동지의 밝기 */
|
||||
--ink-muted: #a7a69b;
|
||||
--ink-faint: #878982;
|
||||
--line: #2b302e;
|
||||
--accent: #8fbcaa; /* 비색 — 텍스트용으로 밝힘. 배경 채움 금지 */
|
||||
--accent-dim: #80ac99;
|
||||
--ink-bright: #ffffff; /* CTA hover */
|
||||
/* 색 — 청록빛 먹. 조명 밖의 전시실 벽. 강조는 유약 색 하나(167°). */
|
||||
--surface: #0f1a18;
|
||||
--surface-raised: #15231f;
|
||||
--surface-rgb: 15 26 24;
|
||||
--ink: #e8ece9;
|
||||
--ink-muted: #aab6b0; /* #0f1a18 위 8.9:1 */
|
||||
--ink-faint: #8a9892; /* #0f1a18 위 5.6:1 — 캡션 */
|
||||
--line: #243632;
|
||||
--accent: #84c3a9; /* OKLCH 167° (similarity.mjs 기준). 차례 번호·링크 밑줄·포커스에만 */
|
||||
--accent-ink: #0b1513; /* 강조 면 위 글자 */
|
||||
|
||||
/* 듀오톤 램프 — index.html의 #duotone 필터가 같은 값을 쓴다 */
|
||||
--duo-shadow: var(--surface);
|
||||
--duo-high: #cfe3da;
|
||||
|
||||
/* 간격 — 8px 리듬 */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
|
|
@ -41,17 +48,21 @@
|
|||
--space-5: 2.5rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 6rem;
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
--space-8: clamp(5rem, 3rem + 8vw, 11rem); /* 벽 사이 — 의도된 극단 */
|
||||
|
||||
--radius: 2px;
|
||||
--radius: 4px;
|
||||
|
||||
/* 읽는 폭과 유물 판은 분리한다. 2560px에서도 문장이 늘어지지 않고,
|
||||
빙렬 이미지만 전시 벽처럼 넓어진다. */
|
||||
--container: 1200px;
|
||||
--container-wide: 1600px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4.5rem);
|
||||
--measure: 34em; /* 한글 본문 34자 안팎 */
|
||||
--container: 1280px;
|
||||
--pad-inline: clamp(1.25rem, 0.5rem + 3vw, 4rem);
|
||||
|
||||
--dur-quick: 160ms;
|
||||
--dur-normal: 480ms;
|
||||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||||
|
||||
/* 히어로 접사의 스크롤 확대·이동 끝값 */
|
||||
--hero-scale-to: 1.14;
|
||||
--hero-shift-to: -5%;
|
||||
|
||||
/* placeholder 표식 — 사용자만 아는 값(장소·문의) */
|
||||
--placeholder-line: 1px dashed var(--ink-faint);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue