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.
82 lines
3.3 KiB
CSS
82 lines
3.3 KiB
CSS
/* ==========================================================================
|
|
무월 (MUWOL) — 디자인 토큰. 토큰은 이 파일 한 곳에만 둔다(05 Q-25).
|
|
컨셉 한 문장: 손님이 이번 로스팅 원두의 이름과 볶은 날을 첫 화면에서 읽고,
|
|
탭에서 산미·바디와 가격을 확인한다.
|
|
레퍼런스: R1 coffeecollective.dk(원두 하나가 첫 화면), sey.coffee·momos.co.kr(연락처·영업시간 푸터)
|
|
R2 37signals.com(타이포 단독, 단색 바탕, 한 웨이트)
|
|
R3 heartroasters.com(상품 위 role=tablist)
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* 타입 스케일 — 표제(Gothic A1 900)는 본문의 최대 6.25배. 한 줄 큰 낱말이 첫 화면의 주인이다 */
|
|
--step--1: 0.8125rem; /* 13px — 캡션·주석. 한글 하한 */
|
|
--step-0: 1.0625rem; /* 17px — 본문. Gowun Dodum은 같은 px에서 작게 보여 1px 올린다 */
|
|
--step-1: 1.25rem; /* 20px — 소제목·탭 */
|
|
--step-2: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); /* 24~32px — 패널 표제 */
|
|
--step-3: clamp(2rem, 0.6rem + 4.4vw, 4.25rem); /* 32~68px — 로스팅 날짜 줄 */
|
|
--step-4: clamp(3.25rem, 0.5rem + 6.6vw, 6.25rem); /* 52~100px — h1. 1440에서 "에티오피아 구지 우라가" 한 줄 */
|
|
|
|
--leading-tight: 1.1; /* h1·날짜 줄. 두 줄이 되는 390에서 받침·초성이 닿는지 실측(5단계) */
|
|
--leading-heading: 1.3;
|
|
--leading-normal: 1.7;
|
|
--measure: 36em;
|
|
|
|
--font-display: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
|
--font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
|
--weight-display: 900;
|
|
--weight-body: 400;
|
|
|
|
/* 색 — 어두운 갈색 바탕 하나 + 자두 강조 하나. 강조 hue는 similarity.mjs 기준(CIELAB LCh) 330°.
|
|
대비 실측(5단계에서 재검): ink/surface 14.97, muted/surface 7.24, faint/surface 6.46,
|
|
accent/surface 7.24, ink-on-accent 7.24, muted/raised 6.46 */
|
|
--surface: #1f1713;
|
|
--surface-raised: #2a211c;
|
|
--surface-sunken: #180f0c;
|
|
--ink: #f3ebe4;
|
|
--ink-muted: #b3a399;
|
|
--ink-faint: #a89a90;
|
|
|
|
--line: #3d322b;
|
|
--line-strong: #5a4b42;
|
|
|
|
--accent: #d390ca;
|
|
--accent-hover: #e4a0db;
|
|
--accent-ink: #1f1713;
|
|
|
|
/* placeholder 표식 — 사용자만 아는 값(주소·영업시간·전화)의 자리. 점선 밑줄 하나로 통일 */
|
|
--ph-line: 1px dashed var(--line-strong);
|
|
|
|
--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(4rem, 2.5rem + 5vw, 8rem);
|
|
|
|
--radius: 2px;
|
|
|
|
--container: 1120px;
|
|
--pad-inline: clamp(1.25rem, 0.75rem + 2.5vw, 4rem);
|
|
--photo: clamp(11rem, 8rem + 12vw, 19rem); /* 원형 크롭 지름 */
|
|
|
|
/* 모션 — 등장 스태거(로드 1회)와 마퀴(앰비언트 루프). 감소 모션에서는 둘 다 0 */
|
|
--dur-quick: 160ms;
|
|
--dur-normal: 420ms;
|
|
--dur-rise: 620ms;
|
|
--stagger: 90ms;
|
|
--rise-shift: 0.6em;
|
|
--marquee-dur: 26s;
|
|
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--dur-normal: 0ms;
|
|
--dur-rise: 0ms;
|
|
--stagger: 0ms;
|
|
--rise-shift: 0;
|
|
--marquee-dur: 0s;
|
|
}
|
|
}
|