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:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -1,15 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
162
apps/site/public/work/cheongon-care/styles/protocol.css
Normal file
162
apps/site/public/work/cheongon-care/styles/protocol.css
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
/* ==========================================================================
|
||||
청온 케어 — 2차 페이지(작업 절차) 전용 스타일. 공통 셸과 토큰은 main.css·tokens.css 가 맡는다.
|
||||
========================================================================== */
|
||||
|
||||
.proto-intro {
|
||||
padding-block: var(--space-5) var(--space-7);
|
||||
}
|
||||
|
||||
.crumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.crumb a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: var(--control-block);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.25em;
|
||||
}
|
||||
|
||||
.crumb a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.crumb-sep {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.crumb [aria-current="page"] {
|
||||
color: var(--ink);
|
||||
font-weight: var(--weight-strong);
|
||||
}
|
||||
|
||||
.proto-facts {
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
.proto-intro .demo-notice {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.proto-record {
|
||||
padding-block: var(--space-7);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.proto-record-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proto-record-grid .gear-cutout img {
|
||||
aspect-ratio: 16 / 10;
|
||||
object-position: 55% 45%;
|
||||
mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
|
||||
}
|
||||
|
||||
.proto-lead {
|
||||
margin-top: var(--space-3);
|
||||
color: var(--ink-muted);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
.compare {
|
||||
margin-top: var(--space-4);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface-raised);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.compare-cell {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.compare-cell + .compare-cell {
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.compare dt {
|
||||
font-size: var(--step--1);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.compare-val {
|
||||
margin-top: var(--space-1);
|
||||
font-size: var(--step-2);
|
||||
font-weight: var(--weight-strong);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.compare-val.before {
|
||||
color: var(--ink-muted);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.compare-val.after {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.compare-sub {
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.proto-cta {
|
||||
padding-block: 0 var(--space-7);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: var(--space-5);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.card .btn-primary {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.calc-submit-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 60em) {
|
||||
.proto-record-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.proto-record-grid .gear-cutout {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 37.5em) {
|
||||
.compare {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.compare-cell + .compare-cell {
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +1,69 @@
|
|||
/* ==========================================================================
|
||||
청온 케어 (CHEONG-ON CARE) — 디자인 토큰 SSOT
|
||||
프리셋: ledger-console + swiss-minimal
|
||||
컨셉: 현장 검수 절차와 정직한 정찰제 — 공간의 상태를 기록하는 케어
|
||||
단일 강조색: 에메랄드 틸 (#0D9488)
|
||||
청온 케어 — 디자인 토큰 (유일한 정의 지점)
|
||||
방향: 도구가 주인인 견적 페이지. 밝은 쿨 바탕 위에 흰 작업 패널, 청록(187°) 하나만 상태·행동에 쓴다.
|
||||
서체는 Wanted Sans 하나로 표제·본문·숫자를 다 맡긴다(모노 없음, 숫자는 tabular-nums).
|
||||
radius 8px 한 값. 모션은 폼 상태 전환(색·테두리)뿐이다.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* 타이포그래피 스케일 */
|
||||
--step--1: 0.8125rem; /* 13px — 캡션·태그 */
|
||||
--step-0: 1rem; /* 16px — 본문 */
|
||||
--step-1: 1.1875rem; /* 19px — 소제목 */
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); /* 30px — 섹션 헤딩 */
|
||||
--step-3: clamp(2.25rem, 1.5rem + 3vw, 3.8rem); /* 60px — 메인 디스플레이 */
|
||||
/* ── 타입 스케일 (16px 기준, 비율 1.2) ── */
|
||||
--step--1: 0.8125rem; /* 13px — 보조 기록·캡션 */
|
||||
--step-0: 1rem; /* 16px — 본문·입력 */
|
||||
--step-1: 1.1875rem; /* 19px — 소제목·요약 행 */
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22~28px — h1(작게)·섹션 제목 */
|
||||
--step-3: clamp(2rem, 1.3rem + 1.8vw, 2.75rem); /* 32~44px — 합계 금액 한 곳(1,297,500원 10자가 합계 열에 한 줄로 들어가는 상한) */
|
||||
|
||||
--leading-tight: 1.2;
|
||||
--leading-tight: 1.3;
|
||||
--leading-normal: 1.7;
|
||||
--measure: 58ch;
|
||||
--measure: 36em;
|
||||
|
||||
--font-serif: "MaruBuri", "Noto Serif KR", serif;
|
||||
--font-display: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-strong: 700;
|
||||
|
||||
/* 색상 — 클린 퓨어 화이트 & 딥 슬레이트 + 에메랄드 틸 1강조색 */
|
||||
--surface: #f8faf9;
|
||||
--font-body: "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||||
--font-display: var(--font-body);
|
||||
|
||||
/* ── 색 — 밝은 쿨 바탕(#eef3f6) + 흰 패널 + 청록 187° ── */
|
||||
--surface: #eef3f6;
|
||||
--surface-raised: #ffffff;
|
||||
--surface-card: #f0f4f2;
|
||||
--surface-subtle: #e6ede9;
|
||||
--surface-sunken: #e2e9e5;
|
||||
--surface-inverse: #0f172a;
|
||||
--surface-card: #e1eaef;
|
||||
--surface-sunken: #d8e3e9;
|
||||
--surface-inverse: #15252e;
|
||||
|
||||
--ink: #0f172a;
|
||||
--ink-muted: #475569;
|
||||
--ink-faint: #94a3b8;
|
||||
--ink-inverse: #f8faf9;
|
||||
--ink-inverse-muted: #cbd5e1;
|
||||
--ink: #112027;
|
||||
--ink-muted: #4b616c;
|
||||
--ink-faint: #586e79; /* 흰 바탕 5.4:1, 쿨 바탕 4.8:1 — 보조 글자도 AA */
|
||||
--ink-inverse: #eef3f6;
|
||||
--ink-inverse-muted: #b2c0c7;
|
||||
|
||||
--line: #e2e8e5;
|
||||
--line-strong: #cbd5e1;
|
||||
--line-subtle: #edf2ef;
|
||||
--line-inverse: #334155;
|
||||
--line: #ced9de;
|
||||
--line-strong: #b2c0c7;
|
||||
|
||||
/* 단일 강조색 (에메랄드 틸) */
|
||||
--accent: #0f766e;
|
||||
--accent-hover: #115e59;
|
||||
--accent-light: #f0fdfa;
|
||||
--accent-surface: #ccfbf1;
|
||||
--accent: #156a75; /* 바탕 위 5.6:1, 흰 글자 6.3:1 */
|
||||
--accent-hover: #0f535c;
|
||||
--accent-light: #e5f3f5;
|
||||
--accent-surface: #cde6ea;
|
||||
--accent-ink: #ffffff;
|
||||
|
||||
--radius: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--placeholder-ink: #4b616c;
|
||||
|
||||
/* 간격 — SSOT 표준 */
|
||||
/* 상태색 — 운영 화면 접수 상태 알약에만 쓴다(브랜드 강조와 분리) */
|
||||
--status-new-bg: #fdf0d5;
|
||||
--status-new-ink: #7a4b08;
|
||||
--status-progress-bg: #cde6ea;
|
||||
--status-progress-ink: #0f535c;
|
||||
--status-done-bg: #dde7f6;
|
||||
--status-done-ink: #27467f;
|
||||
|
||||
--scrim: rgba(21, 37, 46, 0.55);
|
||||
--shadow-panel: 0 1px 2px rgba(21, 37, 46, 0.06), 0 12px 32px -16px rgba(21, 37, 46, 0.18);
|
||||
--shadow-bar: 0 -8px 24px -12px rgba(21, 37, 46, 0.28);
|
||||
--head-bg: rgba(238, 243, 246, 0.96);
|
||||
|
||||
--radius: 8px;
|
||||
|
||||
/* ── 간격 ── */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
|
|
@ -62,14 +73,17 @@
|
|||
--space-7: 6rem;
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
|
||||
--container: clamp(70rem, 62vw, 85rem);
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--container: 78rem;
|
||||
--pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
|
||||
--control-block: 2.75rem;
|
||||
--control-pad-inline: 0.875rem;
|
||||
--action-bar-height: 4.25rem;
|
||||
|
||||
/* 모션 */
|
||||
--dur-quick: 180ms;
|
||||
--dur-normal: 420ms;
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--safe-left: env(safe-area-inset-left, 0px);
|
||||
--safe-right: env(safe-area-inset-right, 0px);
|
||||
|
||||
/* ── 모션 — 폼 상태 전환만 ── */
|
||||
--dur-quick: 160ms;
|
||||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue