/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 * Hallmark · genre: editorial (light) · macrostructure: Marquee Hero (v3 "paper & probe") · theme: custom * custom vibe: "따뜻한 종이, 점묘로 찍힌 탐사선" · paper oklch(96.5% 0.007 90) · ink oklch(23% 0.016 260) · accent amber 58 * axes vs prev(quiet-panel dark): paper dark→light · display sans→serif (Fraunces/Noto Serif KR) · accent unchanged hue * nav: N9 edge-aligned minimal + lang toggle · footer: Ft2 inline single line * enrichment: NASA Voyager glb (public domain) → three.js + Bayer dither post — 점묘가 오브젝트 자체 * motion: slow probe rotation + pointer tilt · hero mask entrance · reveal-once — reduced-motion: static pose * i18n: EN default · KO toggle (localStorage, swap) * fonts: Fraunces + Noto Serif KR (display role) · IBM Plex Sans KR (body) — 2 roles * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) * responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30) */ /* ── base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* cursor: 블렌드 반전 원 — JS 팔로워(.cursor)가 그린다; fine-pointer에서만 네이티브 커서 숨김 */ html.has-cursor, html.has-cursor * { cursor: none !important; } .cursor { position: fixed; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 1.5px solid #fff; mix-blend-mode: difference; pointer-events: none; z-index: var(--z-cursor); translate: -50% -50%; scale: 1; transition: scale var(--dur-short) var(--ease-out); will-change: transform; } .cursor.is-link { scale: 1.9; } .cursor.is-hidden { scale: 0; } html { overflow-x: clip; scroll-behavior: smooth; } body { overflow-x: clip; margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 500; margin: 0; word-break: keep-all; overflow-wrap: anywhere; min-width: 0; } p, li { word-break: keep-all; } p { margin: 0; } a { color: var(--color-ink); } b { font-weight: 700; } em { font-style: normal; } .skip { position: absolute; left: var(--space-md); top: -3rem; z-index: var(--z-nav); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); transition: top var(--dur-micro) var(--ease-out); } .skip:focus-visible { top: var(--space-md); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } ::selection { background: var(--color-accent); color: var(--color-accent-ink); } /* ── nav · N9 minimal + language ──────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--page-gutter) var(--space-xl); pointer-events: none; background: linear-gradient(to bottom, var(--color-paper) 45%, transparent); } .nav__mark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; pointer-events: auto; } .nav__dot { color: var(--color-accent); } .nav__right { display: flex; align-items: center; gap: var(--space-sm); pointer-events: auto; } .lang { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); background: none; border: 0; cursor: pointer; padding: var(--space-xs) var(--space-sm); min-height: 2.25rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); } .lang:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); } .lang:active { translate: 0 1px; } .nav__cta { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-decoration: none; white-space: nowrap; background: transparent; border: 1px solid var(--color-rule-strong); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); min-height: 2.25rem; display: inline-flex; align-items: center; line-height: 1; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .nav__cta:hover { background: var(--color-paper-2); border-color: var(--color-muted); } .nav__cta:active { translate: 0 1px; } /* ── sticky pins: 텍스트가 따라오는 동안 점들이 길게 비행한다 ── */ .pin { position: sticky; top: 0; min-height: 100dvh; display: grid; align-content: center; } /* ── hero · type behind the probe ─────────────────── */ .hero { position: relative; height: 660dvh; overflow: clip; } .hero__pin { padding: var(--space-2xl) 0; } .hero__display { position: relative; z-index: 1; padding: 0 var(--page-gutter); font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.015em; max-width: 100%; } .hero__mask { display: block; overflow: clip; overflow-clip-margin: 1.2em; padding-block: 0.06em; } .hero__line { display: block; } .hero__melt { display: inline; } .hero__display .hero__mask:last-child .hero__line { text-align: right; padding-right: 4vw; } .hero__dot { color: var(--color-accent); } /* the particle object rides fixed above the page, below the nav */ .stage3d { position: fixed; inset: 0; z-index: 2; pointer-events: none; } .stage3d canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--ease-out); } .stage3d.is-ready canvas { opacity: 1; } .hero__meta { position: relative; z-index: 1; padding: 0 var(--page-gutter); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-neutral); font-weight: 500; } .hero__caption { position: absolute; z-index: 3; right: var(--page-gutter); bottom: var(--space-3xl); max-width: 34ch; font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); text-align: right; } .hero__caption b { font-family: var(--font-display); font-weight: 600; } @media (max-width: 40rem) { .hero { height: 480dvh; } .hero__caption { position: static; margin-top: var(--space-xl); text-align: left; padding: 0 var(--page-gutter); } .hero__display .hero__mask:last-child .hero__line { text-align: left; padding-right: 0; } } /* ── editorial lede ───────────────────────────────── */ .intro { padding: var(--space-3xl) var(--page-gutter); border-top: var(--rule-hair) solid var(--color-rule); } .intro__lede { max-width: var(--measure); font-size: var(--text-md); line-height: 1.8; color: var(--color-muted); } .intro__refusal { display: block; margin-top: var(--space-md); color: var(--color-ink); font-weight: 500; } /* ── section heads ────────────────────────────────── */ .sect { padding-bottom: var(--space-lg); } .head-hang { padding: var(--space-3xl) var(--page-gutter) var(--space-lg); } .head-hang h2 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; } .head-hang h2::before { content: ""; display: inline-block; width: 0.3em; height: 0.3em; background: var(--color-accent); border-radius: 2px; margin-inline-end: 0.5ch; vertical-align: 0.08em; } /* ── field scenes · 오브젝트가 좌우로 오가는 한 화면 장면들 ── */ .scene { height: 580dvh; border-top: var(--rule-hair) solid var(--color-rule); } .scene .pin { padding: var(--space-3xl) var(--page-gutter); } .scene__text { max-width: 30rem; } .scene__text::before { content: ""; display: block; width: 7rem; height: 3px; border-radius: 2px; margin-bottom: var(--space-lg); background: linear-gradient(to right, var(--color-accent) calc(var(--p, 0) * 100%), var(--color-rule) calc(var(--p, 0) * 100%)); } .scene__tags { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-neutral); letter-spacing: 0.04em; } .scene--flip .scene__text { margin-inline-start: auto; } .scene__title { font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -0.01em; } .scene__desc { margin-top: var(--space-md); color: var(--color-neutral); font-size: var(--text-md); line-height: 1.7; max-width: 36ch; } @media (max-width: 40rem) { .scene { height: 420dvh; } .scene--flip .scene__text { margin-inline-start: 0; } } .outro { height: 120dvh; } /* ── work · numbered selected work ────────────────── */ .works { list-style: none; margin: 0; padding: 0 var(--page-gutter); } .works__row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; padding: var(--space-xl) 0; border-top: var(--rule-hair) solid var(--color-rule); max-width: 58rem; } .works__row:last-of-type { border-bottom: var(--rule-hair) solid var(--color-rule); } .works__tag { display: block; margin-top: 0.4rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral); } .works__n { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-rule-strong); font-variant-numeric: tabular-nums; } .works__title { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.01em; } .works__desc { margin-top: var(--space-xs); color: var(--color-neutral); font-size: var(--text-base); max-width: 52ch; } .works__note { padding: var(--space-md) var(--page-gutter) 0; font-size: var(--text-sm); color: var(--color-neutral); } /* ── now · statement feature ──────────────────────── */ max-width: 18ch; } .making__status { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); display: flex; align-items: center; gap: var(--space-xs); } .making__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); display: inline-block; flex: none; } /* ── kiosk demo · 고정된 무대에서 텍스트만 교체된다 ── */ .demo { height: 1600dvh; border-top: var(--rule-hair) solid var(--color-rule); } .demo__pin { position: sticky; top: 0; height: 100dvh; display: grid; align-content: center; grid-template-rows: auto auto; padding: var(--space-3xl) var(--page-gutter); } .demo__head h2 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; } .demo__head h2::before { content: ""; display: inline-block; width: 0.3em; height: 0.3em; background: var(--color-accent); border-radius: 2px; margin-inline-end: 0.5ch; vertical-align: 0.08em; } /* 모든 단계를 같은 칸에 겹쳐두고 활성 단계만 보인다 — 레이아웃이 흔들리지 않는다 */ .demo__stack { display: grid; margin-top: var(--space-xl); max-width: 34rem; } .demo__step { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); } .demo__step.is-on { opacity: 1; transform: none; pointer-events: auto; } .demo__statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.015em; } .demo__title { font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 500; letter-spacing: -0.01em; } .demo__desc { margin-top: var(--space-lg); color: var(--color-neutral); font-size: var(--text-md); line-height: 1.7; max-width: 38ch; } .demo__tag { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-neutral); letter-spacing: 0.04em; } .demo__status { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); display: flex; align-items: center; gap: var(--space-xs); } /* 진행 레일 — 지금 몇 번째 장면인지 */ .demo__rail { display: flex; gap: var(--space-xs); margin-top: var(--space-2xl); } .demo__dot { width: 1.75rem; height: 3px; border-radius: 2px; background: var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); } .demo__dot.is-on { background: var(--color-accent); } @media (max-width: 40rem) { .demo { height: 1250dvh; } .demo__stack { max-width: none; } } /* ── finale · 대각선 타이포 사이에 실물 오브젝트 ── */ .finale { position: relative; padding: 22dvh var(--page-gutter) var(--space-2xl); display: grid; align-content: start; } .finale__a, .finale__b { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.0; letter-spacing: -0.02em; position: relative; z-index: 2; } .finale__a { text-align: right; margin-inline-start: auto; } .finale__b { text-align: left; margin-inline-end: auto; margin-top: 17dvh; } .finale__contact { margin-top: var(--space-3xl) !important; } .finale__object { position: absolute; z-index: 1; pointer-events: none; left: 55%; top: 42%; translate: -50% -50%; width: min(24rem, 46vw); aspect-ratio: 1 / 0.86; } .finale__object canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--ease-out); } .finale__object.is-ready canvas { opacity: 1; } .finale__contact { position: relative; z-index: 2; margin-top: var(--space-3xl); display: flex; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; } .contact__mail { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: var(--text-mail); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.07em; text-decoration-color: var(--color-rule-strong); overflow-wrap: anywhere; transition: text-decoration-color var(--dur-micro) var(--ease-out), text-decoration-thickness var(--dur-micro) var(--ease-out); } .contact__mail:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; } .contact__mail:active { translate: 0 1px; } .contact__arrow { color: var(--color-accent-deep); } .copy { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); background: transparent; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); cursor: pointer; white-space: nowrap; min-height: 2.25rem; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .copy:hover { border-color: var(--color-muted); color: var(--color-ink); background: var(--color-paper-2); } .copy:active { transform: translateY(1px); } .copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .copy[data-state="copied"] { color: var(--color-accent-deep); border-color: var(--color-accent-deep); } .copy:disabled { opacity: 0.55; cursor: not-allowed; } @media (max-width: 40rem) { .finale { padding-top: 17dvh; } .finale__b { margin-top: 18dvh; } .finale__object { left: 50%; width: 72%; top: 46%; } } /* ── works · 가로 스크롤 (데스크톱) ── */ @media (min-width: 40rem) { #work { height: auto; } .works__pin { overflow: clip; } .works__track { display: flex; align-items: center; gap: var(--space-3xl); padding-inline: var(--page-gutter); will-change: transform; width: max-content; } .works { display: flex !important; gap: var(--space-3xl); padding: 0 !important; } .works__row { display: block; min-width: 34vw; max-width: 30rem; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xl); } .works__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); } .works__n { font-size: var(--text-2xl); color: var(--color-rule-strong); display: block; } .works__tag { margin-top: 0; } } /* ── 멜트 타이포 (피날레) ── */ .finale__a, .finale__b { filter: url(#melt); } .finale__a .drip, .finale__b .drip, .hero__melt .drip { display: inline-block; will-change: transform; } /* 단어 래퍼는 흐름에 남겨 단어 사이 공백을 보존한다 */ .dripword { display: inline-block; white-space: nowrap; } /* ── 디더 밴드 · 실사를 인쇄망점으로 ── */ .band { padding: var(--space-3xl) var(--page-gutter) 0; max-width: 46rem; } .band img { display: block; width: 100%; height: auto; image-rendering: pixelated; } .band__cap { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); } .band--half { max-width: 58rem; } /* ── footer · Ft2 inline single line ──────────────── */ .foot { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-xl) var(--page-gutter) calc(var(--space-xl) + env(safe-area-inset-bottom)); } .foot__line { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); font-size: var(--text-xs); color: var(--color-neutral); } .foot__mark { font-family: var(--font-display); color: var(--color-muted); font-weight: 600; } .foot a { color: var(--color-neutral); text-underline-offset: 2px; white-space: nowrap; } .foot a:hover { color: var(--color-ink); } .foot__credit { margin-inline-start: auto; } /* ── reveal-once ──────────────────────────────────── */ body.js .reveal { opacity: 0; transform: translateY(10px); } body.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } /* ── reduced motion ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; } body.js .reveal { opacity: 1; transform: none; } }