8e3cdb0d3b
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.
72 lines
3.5 KiB
CSS
72 lines
3.5 KiB
CSS
/* ==========================================================================
|
||
오버톤 사운드랩 — 디자인 토큰 (2026-10-06 재작업)
|
||
컨셉 한 문장: 전시 기획자가 파형·설치 사진·측정 수치 조각이 겹친 첫 화면에서
|
||
"이 연구소는 잔향을 재고 스피커를 놓는 곳"임을 읽고 작업 네 건을 확인한다.
|
||
레퍼런스: R1 boxoftoysaudio.com(실측 1440: 상단 내비 없음, 하단 도크만. 푸터 워드마크
|
||
1400×270px 전폭, 그 위 20px 열 행 + 1px 괘선) — 내비 없음·워드마크 푸터
|
||
R2 davidrudnick.org(실측 1440: 검정 바탕, 452×452 큰 조각 2 + 287px 폭 작은 조각
|
||
여러 장이 격자에서 벗어나 크기 차를 두고 놓임) — 어두운 콜라주의 조각 크기 차
|
||
R3 carstennicolai.de(기존: 아카이브 역연도 목록) — 작업 목록의 순서
|
||
하지 않은 것: 스크롤 리빌, 모노 서체, 앰버, 상단 바, 재질 필터, 사진 반복.
|
||
========================================================================== */
|
||
|
||
:root {
|
||
/* 서체 — 표제 Black Han Sans(OFL, Google Fonts), 본문 Gothic A1(OFL, Google Fonts).
|
||
숫자는 모노 대신 본문 서체 + tabular-nums 로 정렬한다(typography §6-5). */
|
||
--font-display: "Black Han Sans", "Gothic A1", sans-serif;
|
||
--font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||
--weight-body: 400;
|
||
--weight-strong: 700;
|
||
|
||
/* 타입 스케일 — 본문 16px, 보조 13px 하한(한글 조판 정본) */
|
||
--step--1: 0.8125rem;
|
||
--step-0: 1rem;
|
||
--step-1: 1.125rem;
|
||
--step-2: 1.375rem;
|
||
--step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); /* 섹션 제목 */
|
||
--step-hero: clamp(1.6rem, 0.9rem + 4.9vw, 5.75rem); /* 두 줄 문장 표제: 320=26px, 390=33px, 1440=85px */
|
||
--step-manifesto: clamp(2.25rem, 1.25rem + 4.4vw, 5.5rem); /* 작업 방식 한 문장 */
|
||
--step-wordmark: clamp(2.5rem, 14.2vw, 13.5rem); /* 푸터 워드마크(폭 6.05em): 390=55px, 1440=204px, 1920 이상 216px */
|
||
--step-figure: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); /* 콜라주 수치 조각 */
|
||
|
||
--leading-tight: 1.15;
|
||
--leading-heading: 1.3;
|
||
--leading-body: 1.7;
|
||
--measure: 36em;
|
||
|
||
/* 색 — 어두운 스튜디오 바닥(#12100e 유지)과 345° 로즈 신호 */
|
||
--surface: #12100e;
|
||
--surface-rgb: 18 16 14;
|
||
--surface-raised: #1c1816;
|
||
--surface-sunken: #0c0b0a;
|
||
--ink: #f4eee7; /* 대비 17.6:1 */
|
||
--ink-muted: #bcb1a5; /* 대비 9.0:1 */
|
||
--ink-faint: #93897c; /* 대비 5.5:1 — 13px 보조 글자의 하한 */
|
||
--line: #3a332d;
|
||
--line-strong: #55493f;
|
||
--accent: #ef587e; /* 345° 로즈(LCH 10°). #12100e 위 5.8:1 — 연도·선·파형·수치 면 */
|
||
--accent-rgb: 239 88 126;
|
||
--accent-deep: #8f2a47; /* 듀오톤 중간 톤 */
|
||
--accent-on: #12100e; /* 로즈 면 위 글자 */
|
||
|
||
/* 간격 */
|
||
--space-1: 0.25rem;
|
||
--space-2: 0.5rem;
|
||
--space-3: 1rem;
|
||
--space-4: 1.5rem;
|
||
--space-5: 2.5rem;
|
||
--space-6: 4rem;
|
||
--space-7: 6rem;
|
||
--space-8: clamp(4.5rem, 3rem + 6vw, 8.5rem);
|
||
|
||
--radius: 0; /* 조각은 종이처럼 각지다 — 모서리 없음 */
|
||
--border: 1px;
|
||
|
||
--container: 84rem;
|
||
--pad-inline: clamp(1.25rem, 0.75rem + 2.4vw, 3.5rem);
|
||
|
||
/* 모션 — 캔버스(요청 애니메이션)와 마퀴만. 등장 리빌은 없다 */
|
||
--dur-quick: 160ms;
|
||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||
--marquee-duration: 48s;
|
||
}
|