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.
81 lines
3.3 KiB
CSS
81 lines
3.3 KiB
CSS
/* ==========================================================================
|
|
궤도 우주공학 — 디자인 토큰 (2026-10-06 재작업)
|
|
컨셉 한 문장: 발사체 통합 엔지니어가 ORBIT-75의 단면도와 사양을 한 화면에서
|
|
읽고, 값마다 붙은 측정 조건으로 자기 발사체에 맞는지 판단한다.
|
|
배정(plan.md): 표제 + 전폭 무대(도면 파노라마) · 측면 색인 · 다열 색인 푸터 ·
|
|
Orbit / Noto Sans KR · 어두운 청 #081018 · 200° 시안 · radius 2px ·
|
|
scroll-driven 도면 선 그리기 · svg-glass 패널
|
|
레퍼런스: R1 이노스페이스 한빛-나노(어두운 바탕, 단위 붙은 사양 행, 전폭 궤도 도해),
|
|
R2 Rocket Lab Electron(제품명 한 낱말 표제 + 전폭 무대, 다열 푸터),
|
|
R3 developer.chrome.com 문서(오른쪽 측면 색인, aria-current)
|
|
하지 않은 것: 모노 서체(JetBrains Mono — 하우스 룩), 구리 강조(59° — 다른 쇼케이스와
|
|
30° 구간 충돌), 스크롤 리빌, 고정 상단 바, 지표 배너·3D 렌더·카운트다운.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* 타입 — 표제(Orbit) 최대 ≈ 104px ÷ 본문 16px ≈ 6.5배. 극단은 표제 한 축에만 둔다 */
|
|
--step--1: 0.8125rem;
|
|
--step-0: 1rem;
|
|
--step-1: 1.125rem;
|
|
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
|
|
--step-display: clamp(2.5rem, 1rem + 6vw, 6.5rem);
|
|
|
|
--leading-tight: 1.1;
|
|
--leading-heading: 1.3;
|
|
--leading-normal: 1.7;
|
|
|
|
/* Orbit은 Google Fonts 한글 슬라이스를 가진다(2026-10-06 css2 응답에서 U+AC00~D7A3 범위 확인).
|
|
한글·라틴·숫자 모두 Orbit으로 조판하고, 웨이트는 400 하나뿐이다 */
|
|
--font-display: "Orbit", "Noto Sans KR", sans-serif;
|
|
--font-body: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
|
|
|
--weight-body: 400;
|
|
--weight-strong: 500;
|
|
|
|
--measure: 36em;
|
|
|
|
/* 색 — 야간 시험장의 남흑 바탕(유지), 강조는 200° 시안(계기 눈금·냉각 유로).
|
|
대비는 #081018 위 실측: ink 16.2 · muted 8.7 · faint 6.2 · accent 8.9 · accent-stroke 6.2 */
|
|
--surface: #081018;
|
|
--surface-raised: #0e1823;
|
|
--ink: #e6edf3;
|
|
--ink-muted: #a3b1be;
|
|
--ink-faint: #8494a3;
|
|
--ink-on-glass: #c3ced8; /* 유리 패널·모눈 위 캡션. 모눈 선 위에서도 4.5:1 이상 */
|
|
--line: #1c2a38;
|
|
--line-strong: #2b3b4c;
|
|
--accent: #45bcf7;
|
|
--accent-stroke: #189bdc;
|
|
--accent-glow: rgb(24 155 220 / 0.22);
|
|
|
|
/* 유리 패널(svg-glass §1·§3) */
|
|
--glass-fill: rgb(14 24 35 / 0.58);
|
|
--glass-rim: linear-gradient(
|
|
100deg,
|
|
rgb(255 255 255 / 0.28) 0%,
|
|
rgb(255 255 255 / 0.08) 26%,
|
|
rgb(255 255 255 / 0.05) 58%,
|
|
rgb(255 255 255 / 0.22) 100%
|
|
);
|
|
--glass-blur: 14px;
|
|
--glass-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.9);
|
|
|
|
--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: 2px;
|
|
|
|
--container: 1240px;
|
|
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);
|
|
--rail-w: 11rem;
|
|
|
|
--dur-quick: 160ms;
|
|
--dur-normal: 420ms;
|
|
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
|
}
|