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
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -1,13 +0,0 @@
|
|||
# MaruBuri source record
|
||||
|
||||
Downloaded 2026-09-12 from the official NAVER Hangeul static host. The files are retained unchanged: no conversion or subsetting was performed.
|
||||
|
||||
| File | Official URL | HTTP content type | Size | SHA-256 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `MaruBuri-Regular.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2 | `font/woff2` | 433776 bytes | `4CF1341CF2F23FB3E263712DFDE1D8F25EEDCC328B696A2E5A2C8ADD55E5C17B` |
|
||||
| `MaruBuri-SemiBold.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2 | `font/woff2` | 466108 bytes | `7AEF4862FA3219B0A7DEB6746E27116A38C4069F4424EB51EDF103B29795F5C2` |
|
||||
|
||||
- Official stylesheet checked: https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css
|
||||
- Official NAVER license page saved verbatim as `LICENSE.html`: https://help.naver.com/service/11029/contents/18088?lang=ko&osType=PC
|
||||
- `LICENSE.html` SHA-256: `8538F7921744D5E040F603BC301465EFBD038F1054D0754B7508DE3286452EC3`
|
||||
- The saved official page includes the NAVER copyright notice and the SIL Open Font License 1.1 text for MaruBuri.
|
||||
|
|
@ -1,17 +1,80 @@
|
|||
# 마테리아 스튜디오 — 디자인 결정 기록
|
||||
# design.md — 마테리아 스튜디오
|
||||
|
||||
## 관찰과 방향
|
||||
## 진행 상태
|
||||
|
||||
- 관찰: 기존 hero는 텍스트와 장식 프레임의 비중이 커서 공간 사진이 건축 포트폴리오의 첫 증거가 되지 못했다.
|
||||
- 원리 적용 범위: 사진은 공간의 빛·재료를 먼저 보이고 제목과 짧은 설명은 같은 시작선에서 범위를 설명한다. 프로젝트 목록은 대표 사례 하나와 보조 사례 둘을 구분하며, 물성은 같은 항목 위계로 비교한다.
|
||||
- 결정: hero를 5:7 사진 우세로, 대표 프로젝트를 큰 카드로 조정하고 캡션을 사진의 정렬선에 맞췄다. 브론즈·따뜻한 종이 토큰과 Day/Night, 24개 상세 갤러리·라이트박스·legacy 경로를 유지한다.
|
||||
- 기각 조건: 사진 크롭이 공간의 주피사체를 잃거나 Day/Night에서 캡션·필터·상태 대비가 약해지면 크롭과 표면 조합을 다시 조정한다.
|
||||
- 2026-10-06 재작업(전체·리디자인 경로, 방향 선택은 plan.md 배정으로 위임). 0 현행 감사 → 1 레퍼런스 → 2 방향(카드 3장, A 채택) → 3 토큰 → 4 구현(레이아웃 → 재질 → hover) → 5 검증(게이트 42/0/0, 실렌더 감사 18/0, E2E 34/34) → 6 이 문서. 완료.
|
||||
|
||||
## 토큰과 검증
|
||||
## 브리프
|
||||
|
||||
- 타입: 로컬 `MaruBuri` 400·600은 제목·물성명, Pretendard는 본문, 모노는 메타데이터 역할을 유지한다.
|
||||
- 색: `--surface #f5f3ef`, 브론즈 `--accent #76583d`, 나이트 토큰의 대비를 유지한다.
|
||||
- 구도: hero 5:7, 사진 7:5, 대표 프로젝트는 넓은 화면에서 2행을 차지하며 860px 이하는 한 열이다.
|
||||
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
|
||||
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
- 무엇을: 인테리어 스튜디오 소개 한 장(`index.html`) + 한남 듀플렉스 24개 공간 상세(`projects/hannam-duplex/`) + 옛 주소 리다이렉트(`hannam-duplex.html`).
|
||||
- 누구에게: 펜트하우스·갤러리 공사를 맡길 사람. 작업 세 곳과 마감재를 보고 상담 항목을 정리해 신청 폼까지 간다.
|
||||
- 제약: 정적 HTML/CSS, 기존 사진 자산 26장만 사용(새 이미지 없음), 폰트는 OFL 공개 배포본(jsdelivr), 낮/밤 토글(`#btnAmbianceDay/Night`)·프로젝트 모달·갤러리 라이트박스·옛 주소 유지, 기본 언어 ko-KR(대화 언어). 배정(plan.md): 전면 이미지 히어로 · 표제부에 녹인 차례 · 다음 행동 하나 푸터(상담 폼) · 이롭게 바탕/Wanted Sans · #e8e0d4 · 95° 올리브 · 8px · 모션 없음 · 종이 결 · 흘림.
|
||||
|
||||
## 미확정
|
||||
|
||||
- 상호·프로젝트명·면적·마감재·시공 기준 수치는 기존 쇼케이스 예시값이다(가상 브랜드, 푸터 고지 한 줄).
|
||||
- 성북동 레지던스 카드 사진(`hannam-08-terrace.webp`)은 한남 프로젝트 테라스 사진이다 — 기존 자산 그대로. 실제 사진이 생기면 교체한다.
|
||||
- 방향 카드 선택은 위임이었다(아래 방향 절).
|
||||
|
||||
## 레퍼런스
|
||||
|
||||
| 슬롯 | 출처(실측 2026-10-06, 텍스트 페처) | 가져온 원리 |
|
||||
|---|---|---|
|
||||
| R1 구조 | Studio Ashby https://www.studioashby.com | 첫 화면이 표제 없는 전폭 프로젝트 사진, 내비는 Projects/About/Contact 셋, 올리브(#645E26) 색면의 소개 문단, 푸터는 링크 한 줄 → 사진이 먼저, 글은 작게 |
|
||||
| R1′ 같은 시장 | 백에이어소시에이츠(100A) https://100a.kr | 머리에 전화·메일·주소 사실을 바로 둔다, 첫 화면은 프로젝트 목록 → 머리·히어로에 사실 목록(차례)을 두는 근거 |
|
||||
| R2 톤 | Axel Vervoordt https://www.axel-vervoordt.com | h1을 작게(`o-title-small`), 첫 화면이 전시 목록 → 작은 표제 + 목록이 첫 화면 |
|
||||
| R3 디테일 | Studio Ashby 서체 페어 Allrounder Antiqua(세리프 표제) + Matter(고딕 본문), 이미지 `sizes` 1440 상한 | 부리 표제 + 고딕 본문, 사진은 1440 상한 |
|
||||
| 미검증 | normcph.com(455), labotory.com(연결 실패), designsul.com·jeonglee.co.kr(연결 실패) | — |
|
||||
|
||||
## 방향
|
||||
|
||||
지문: 전면 이미지(공간 사진 풀블리드, 표제판 좌하단) · 이롭게 바탕 / Wanted Sans · 밝음·웜 모래 #e8e0d4(밤 #1b1814) · 95° 올리브 #43632c(밤 #a9c47a) · 8px · 흐름 "사진+표제판(차례) → 작업 3점(대표 1점 왼쪽 흘림, 2점 격자) → 마감재(접사 오른쪽 흘림 + 4항목) → 절차 4단계(글, 큰 번호) → 푸터=상담 폼" · 내비 = 표제판 안 차례(작업·마감재·절차·상담), 머리는 비고정 워드마크+낮/밤 · 푸터 = 다음 행동 하나(폼) · 이미지 흘림(한쪽 끝), 390은 세로 원본으로 교체 · 모션 없음(hover·focus 색 전환 160ms만)
|
||||
|
||||
- 컨셉: 공사를 맡길 사람이 거실 사진 한 장과 네 줄 문장으로 이 스튜디오가 무엇을(일조 측정, 석재·오크) 하는지 알고, 차례에서 작업·마감재·절차를 골라 읽은 뒤 상담 항목을 정리한다.
|
||||
- 프리셋: editorial 지배. 재질 축만 종이 결(svg-filters R2 변형).
|
||||
- 표현 리스크: 사진 위 표제판. 사진 위 직접 글자는 대비를 보장할 수 없어 불투명 종이판에 올렸다. 검증: 게이트 대비 82요소 AA(낮·밤), 렌더 픽셀 실측 13.98:1(낮)·11.46:1(밤).
|
||||
- 카드(배정 제약 안에서 구조를 달리함):
|
||||
- **A. 사진 한 장, 차례 한 장**(채택) — 사진이 첫 화면, 좌하단 종이판에 네 줄 표제 + 차례 4항목. 흐름 위 지문. 포기: 큰 표제, 첫 화면 버튼.
|
||||
- B. 왼쪽 기둥 차례 — 사진 위 왼쪽에 번호 차례 세로 기둥, 각 장이 전폭 흘림 사진으로 이어지는 긴 책 꼴. 포기: 길이(화면 8개), 390 첫 화면에서 차례가 사진을 밀어낸다.
|
||||
- C. 사진 아래 차례 띠 — 사진 100svh, 표제는 사진 위, 차례는 사진 아래 모래색 띠. 마감재를 작업보다 먼저. 포기: 390에서 차례가 첫 화면 밖.
|
||||
- 고른 이유(위임): 차례가 1440·390 모두 첫 화면 안에 있어야 "표제부에 녹인 차례" 배정이 성립하고, R1 Studio Ashby가 표제 없이 사진으로 열며 100A가 사실 목록을 머리에 두므로 A.
|
||||
- 반사실: 고유 요소 — 한남 거실 사진(트래버틴 벽·훈증 오크), 표제의 한남·청담·트래버틴·훈증 오크·벨기에 리넨, 차례의 작업 세 곳 이름. 경쟁사 치환 시 표제·사진·차례가 모두 깨진다.
|
||||
- 수렴(B-2, muwol-coffee 대비): 섹션 흐름·히어로 글 묶음(라벨 없음/서너 줄/리드 없음/행동 없음+차례)·내비(차례 vs 탭)·푸터(폼 vs 연락처 카드)·이미지(흘림 vs 원형 크롭)·모션(없음 vs 스태거) 6축 전부 다름. 토큰 4축(마루 부리→이롭게 바탕, Pretendard→Wanted Sans, 웜 오프화이트→모래, 2px→8px, 갈색→올리브) 전부 다름.
|
||||
- 보존 자산: 상호, 세 프로젝트 사실과 모달 문구, 마감재 네 항목, 4단계 문구, 폼 항목·id, 24개 갤러리 카드와 라이트박스, `#btnAmbianceDay/Night`·`.site-head`·`#projectModal`·`.gallery-card-action`·`#lightboxDialog`·옛 주소.
|
||||
|
||||
## 토큰과 예산
|
||||
|
||||
- 값은 `styles/tokens.css` 한 곳. 표제 이롭게 바탕(OFL 1.1, iropke/font-iropke-batang README·EULA 확인 2026-10-06, 웹 임베딩 가능) / 본문 Wanted Sans Variable(OFL 1.1, wanteddev/wanted-sans OFL.txt, 유니코드 분할 서브셋, swap). 모노 없음 — 숫자는 `tabular-nums`.
|
||||
- 타입: 히어로 표제 20~26px(본문의 1.4배, 서너 줄), 섹션 제목 22~30px 문장, 절차 번호 40~72px가 가장 큰 글자. 본문 1.7, 표제 1.35~1.55, measure 36em.
|
||||
- 색: 모래 #e8e0d4 / 종이판 #f3ede4 / 잉크 #1f1d18 / 보조 #5a554b(5.6:1) / 올리브 #43632c(5.2:1, 흰 글자 6.9:1). 밤: #1b1814 / #26221c / #ece5d9 / #b3aa9b / #a9c47a(9.1:1). 라이트박스는 전용 토큰으로 낮·밤 모두 어두운 면.
|
||||
- radius 8px 한 값. 모션 `--dur-quick` 160ms 색·테두리 전환만.
|
||||
- 예산(tokens §5 기본선): JS 150KB → 인라인 약 3KB. LCP 2.5s → 로컬 300ms(히어로 `<img fetchpriority=high>`, 세로 원본은 `<picture>`로 390에서만). CLS 0.008. **폰트 100KB 초과**: 이롭게 바탕은 jsdelivr 배포본이 단일 woff 984KB뿐이고 서브셋이 없다(Wanted Sans는 분할 서브셋 17개 약 356KB). 첫 화면 전송 약 1.9MB로 1MB 예산도 넘는다. 배정 서체라 유지하고 초과를 여기 적는다. `font-display: swap`은 배포 CSS에 없어 `main.css`의 자체 `@font-face`로 싣는다. 줄이려면 self-host 서브셋(woff2)이 필요하다 — 이번 범위(공개 링크만) 밖.
|
||||
|
||||
## 이펙트와 폴백
|
||||
|
||||
- 종이 결: `svg.paper`(fixed, pointer-events 없음) 안의 `feTurbulence 0.9 → feDiffuseLighting`을 multiply 0.16(밤 soft-light 0.22)으로 얹는다. 필터를 끄면 바탕은 토큰 색 그대로다(M-A 통과). 렌더 실측: 판 바탕 표준편차 1.7(아주 약함), 글자 대비 13.98:1.
|
||||
- 모션 없음. `prefers-reduced-motion`에서 전환 1ms.
|
||||
|
||||
## 하지 않기로 한 것
|
||||
|
||||
- 고정(sticky) 머리와 `backdrop-filter`: 차례가 히어로 안에 있고 페이지가 화면 5개라 늘 보일 이유가 없다.
|
||||
- 스크롤 리빌·등장 모션·hover 들림(`translateY`): 배정 "없음(hover만)". hover는 색만 바뀐다.
|
||||
- 사진 위 직접 표제와 그라디언트 스크림: 대비를 숫자로 보장할 수 없어 불투명 판.
|
||||
- 큰 표제·eyebrow 알약·버튼 두 개 히어로: 글 묶음은 라벨 없음 / 서너 줄 긴 문장 / 리드 없음 / 행동 없음(차례로 이어진다).
|
||||
- 모노 서체·가운뎃점 메타 문자열(`A · B`): 전부 제거. 섹션 머리의 "작업·마감재·절차·상담" 한 낱말은 차례의 장 표시이며 eyebrow 알약이 아니다(4개, 휴리스틱 2개 초과 — 차례와 같은 목록이라 유지).
|
||||
|
||||
## 검증
|
||||
|
||||
- 자동: html-validate 3파일 0오류 · stylelint 0 · no-hanja PASS · showcase-audit 18/18(320~2560, 3경로) · design-gate(낮·밤 뷰, 320~1920) 충족 42 / 미검증 0 / 실패 0 · archive-showcases-e2e Materia 34/34 · audit.mjs 마테리아 12/12. 실기기·INP 필드값은 미측정(정적 페이지, 입력 핸들러 2개).
|
||||
- 시각 루브릭(약한 축부터, 캡처 `outputs`가 아닌 세션 스크래치 `shots/`): R3 1(시작선 셋 — 판 안쪽·wrap·흘림 글 열, 390 최소 인셋 26px) · R5 1(섹션 간격이 전부 `--space-8`, 극단은 번호 크기 72px뿐) · R6 1(슬롯마다 역할·반복 없음·세로 원본 별도, 그러나 성북동 카드가 한남 사진) · R9 1(390 캡션 칩이 사진 폭 거의 전부) · R10 1(390 첫 화면에 워드마크·사진·표제·차례 두 줄, "상담"은 아래) · R1 2(3초 문장 "한남·청담 펜트하우스를 일조부터 재서 석재·오크로 짓는 스튜디오"; 반례: 브랜드가 머리 워드마크에만) · R2 2(회색조·흐림 순서 사진 → 판 표제 → 차례, 의도와 같음; 반례: 우하단 캡션 칩이 넷째 시선) · R4 2(이롭게 바탕 렌더 확인, 4줄 표제 마지막 줄 3어절, 합성 사체·모노 한글 없음; 반례: 390 표제 6줄) · R7 2(표제에 한남·청담·트래버틴·훈증 오크·리넨, 치환 시 깨짐; 반례: 찾지 못함) · R8 2(고유 요소 3개, muwol 대비 6축·4축 전부 다름; 반례: 전면 이미지 패밀리는 baekje·twentyoz와 공유). 합계 15/20, R1·R8 2점, 0점 없음 — 통과.
|
||||
- 어두운 면 대비 실측: 밤 표제판 글자 11.46:1, 라이트박스 올리브 라벨 #a9c47a/#1f1d18 9.1:1.
|
||||
|
||||
## 피드백 기록 · 보존 목록
|
||||
|
||||
- (없음. 보존 목록은 방향 절의 "보존 자산".)
|
||||
|
||||
## 변경 기록
|
||||
|
||||
- 2026-10-06 · 재작업 전체. 히어로 5:7 분할 → 전면 사진 + 표제판·차례, 상단 바 → 비고정 워드마크, 고지 띠 푸터 → 상담 폼 푸터, 마루 부리/Pretendard/JetBrains Mono → 이롭게 바탕/Wanted Sans, 브론즈 → 올리브, 2px → 8px, 로컬 폰트 파일(900KB)·fonts.css 삭제, `.reveal`류 없음 확인. 2차 페이지 셸·토큰·가운뎃점 문자열 정리, 라이트박스 전용 토큰.
|
||||
- 2026-10-02 · 카피 기준 수정(번역체·과장 제거, 영문 장식 라벨 한국어화, 상세 카드·라이트박스 문구 통일, `#consultation` → `#contact`).
|
||||
- 2026-09 · 이전 결정(5:7 사진 우세 히어로, 브론즈·종이 토큰, Day/Night, 24개 갤러리·라이트박스·legacy 경로). 이번 재작업으로 히어로·토큰은 대체됐고 Day/Night·갤러리·legacy 경로는 유지.
|
||||
|
|
|
|||
|
|
@ -6,9 +6,8 @@
|
|||
<meta http-equiv="refresh" content="0; url=./projects/hannam-duplex/index.html" />
|
||||
<title>한남 듀플렉스 펜트하우스 — 이동 중</title>
|
||||
<link rel="canonical" href="./projects/hannam-duplex/index.html" />
|
||||
<link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F5F3EF'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%23161514' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%239E8062'/%3E%3C/svg%3E" />
|
||||
<link rel="stylesheet" href="./styles/tokens.css" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e8e0d4'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%231f1d18' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%2343632c'/%3E%3C/svg%3E" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
line-height: var(--leading-normal);
|
||||
line-height: var(--leading-body);
|
||||
text-align: center;
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
|
|
|
|||
|
|
@ -3,404 +3,379 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>마테리아 스튜디오 (MATERIA) · 하이엔드 주거 & 상업 공간 인테리어 건축</title>
|
||||
<title>마테리아 스튜디오 — 한남과 청담의 주거, 갤러리 인테리어</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="트래버틴 대리석, 훈증 오크, 벨기에 리넨의 촉각적 물성과 자연광의 궤적을 설계하는 하이엔드 인테리어 건축 아틀리에. 한남·청담 펜트하우스 및 프라이빗 갤러리 비스포크 설계."
|
||||
content="마테리아 스튜디오는 한남과 청담의 펜트하우스와 갤러리를 설계하고 직영 시공합니다. 일조를 먼저 재고 로만 트래버틴, 훈증 오크, 벨기에 리넨 같은 마감재를 정합니다. 작업 세 곳, 마감재 네 가지, 4단계 절차와 상담 항목을 안내합니다."
|
||||
/>
|
||||
<meta property="og:title" content="마테리아 스튜디오 (MATERIA) · 하이엔드 인테리어 건축" />
|
||||
<meta property="og:description" content="빛과 트래버틴이 빚어내는 침묵의 공간 건축. 1:1 비스포크 공간 컨설팅." />
|
||||
<meta property="og:title" content="마테리아 스튜디오 — 한남과 청담의 주거, 갤러리 인테리어" />
|
||||
<meta property="og:description" content="일조를 먼저 재고 석재와 오크 마감을 정하는 인테리어 스튜디오. 작업 세 곳과 마감재 네 가지, 상담 항목." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#f5f3ef" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/materia-interior/assets/hannam-01-living-void.webp" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#e8e0d4" />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
|
||||
<link rel="preload" as="image" href="./assets/hannam-01-living-void.webp" media="(min-width: 701px)" />
|
||||
<link rel="preload" as="image" href="./assets/penthouse-hero.webp" media="(max-width: 700px)" />
|
||||
<!-- 이롭게 바탕(OFL 1.1, iropke/font-iropke-batang README 확인 2026-10-06)은 main.css 의 @font-face 로 싣는다(font-display: swap) -->
|
||||
<!-- Wanted Sans Variable: OFL 1.1(wanteddev/wanted-sans OFL.txt), 유니코드 범위 분할 서브셋, font-display: swap -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/tokens.css" />
|
||||
<link rel="stylesheet" href="./styles/main.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F5F3EF'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%23161514' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%239E8062'/%3E%3C/svg%3E"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e8e0d4'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%231f1d18' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%2343632c'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body data-ambiance="day">
|
||||
<a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
|
||||
|
||||
<!-- 상단 헤더 & 조도 스위처 -->
|
||||
<!-- 종이 결 재질: feTurbulence 높이맵을 조명해 바탕색 위에 곱한다. 필터를 꺼도 바탕은 토큰 색 그대로다 -->
|
||||
<svg class="paper" aria-hidden="true" focusable="false">
|
||||
<filter id="paperGrain" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" result="noise" />
|
||||
<feDiffuseLighting in="noise" surface-scale="1.4" result="lit">
|
||||
<feDistantLight azimuth="45" elevation="62" />
|
||||
</feDiffuseLighting>
|
||||
<feComposite in="lit" in2="SourceAlpha" operator="in" />
|
||||
</filter>
|
||||
<rect width="100%" height="100%" filter="url(#paperGrain)" />
|
||||
</svg>
|
||||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a class="wordmark" href="./index.html">
|
||||
MATERIA
|
||||
</a>
|
||||
|
||||
<nav class="nav" aria-label="메인 메뉴">
|
||||
<a href="./projects/hannam-duplex/index.html" style="color: var(--accent); font-weight: 600;">24개 공간 갤러리</a>
|
||||
<a href="#works">엄선 프로젝트</a>
|
||||
<a href="#materials">물성 아카이브</a>
|
||||
<a href="#process">설계 프로세스</a>
|
||||
<a href="#contact">프라이빗 상담</a>
|
||||
</nav>
|
||||
|
||||
<div class="head-actions">
|
||||
<div class="ambiance-switcher" role="group" aria-label="조도 모드 전환">
|
||||
<button type="button" class="ambiance-btn is-active" id="btnAmbianceDay">
|
||||
Day
|
||||
</button>
|
||||
<button type="button" class="ambiance-btn" id="btnAmbianceNight">
|
||||
Night
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a href="#contact" class="btn">
|
||||
상담 항목 보기
|
||||
</a>
|
||||
<a class="wordmark" href="./index.html">MATERIA</a>
|
||||
<p class="head-note">주거와 갤러리 인테리어 스튜디오, 서울</p>
|
||||
<div class="ambiance-switcher" role="group" aria-label="낮과 밤 조명 보기 전환">
|
||||
<button type="button" class="ambiance-btn is-active" id="btnAmbianceDay" data-theme="day" aria-pressed="true">낮</button>
|
||||
<button type="button" class="ambiance-btn" id="btnAmbianceNight" data-theme="night" aria-pressed="false">밤</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="mainContent">
|
||||
<!-- 히어로 섹션 -->
|
||||
<section class="hero-section" aria-labelledby="heroHeading">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-content">
|
||||
<div class="eyebrow">
|
||||
<span>하이엔드 공간 인테리어</span>
|
||||
</div>
|
||||
<h1 id="heroHeading" class="hero-title">
|
||||
빛과 돌이 빚는<br />
|
||||
침묵의 <span class="italic">공간 건축</span>
|
||||
</h1>
|
||||
<p class="hero-desc">
|
||||
우리는 장식을 덧대지 않습니다. 돌의 거친 결, 훈증 오크의 온기, 리넨을 투과하는 자연광의 궤적을 치밀하게 계산하여 시간이 흘러도 변치 않는 하이엔드 주거와 갤러리 공간을 완성합니다.
|
||||
<!-- 전면 이미지 히어로: 사진 한 장이 첫 화면, 표제판은 좌하단, 차례는 표제판 안 -->
|
||||
<section class="hero" aria-labelledby="heroHeading">
|
||||
<picture class="hero-photo">
|
||||
<source media="(max-width: 700px)" srcset="./assets/penthouse-hero.webp" width="896" height="1195" />
|
||||
<img
|
||||
src="./assets/hannam-01-living-void.webp"
|
||||
alt="한남 펜트하우스 거실. 층고 5.8m 트래버틴 벽과 훈증 오크 수납장, 남향 창으로 드는 오후 빛"
|
||||
width="1376"
|
||||
height="768"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</picture>
|
||||
|
||||
<div class="hero-plate">
|
||||
<h1 id="heroHeading" class="hero-title">
|
||||
마테리아는 한남과 청담의 펜트하우스와 갤러리를 설계합니다. 현장에서 시간대별 일조를 먼저 재고, 빛이 드는 자리에 맞춰 로만 트래버틴과 훈증 오크, 벨기에 리넨을 정합니다.
|
||||
</h1>
|
||||
<nav class="toc" aria-label="차례">
|
||||
<ol class="toc-list">
|
||||
<li class="toc-item">
|
||||
<a class="toc-link" href="#works">
|
||||
<span class="toc-name">작업</span>
|
||||
<span class="toc-desc">한남 펜트하우스, 청담 갤러리, 성북동 주택</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="toc-item">
|
||||
<a class="toc-link" href="#materials">
|
||||
<span class="toc-name">마감재</span>
|
||||
<span class="toc-desc">트래버틴, 훈증 오크, 리넨, 브론즈</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="toc-item">
|
||||
<a class="toc-link" href="#process">
|
||||
<span class="toc-name">절차</span>
|
||||
<span class="toc-desc">일조 진단부터 직영 시공까지 4단계</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="toc-item">
|
||||
<a class="toc-link" href="#contact">
|
||||
<span class="toc-name">상담</span>
|
||||
<span class="toc-desc">상담 전에 정리할 항목과 신청 폼</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p class="hero-caption">한남 펜트하우스 거실, 로만 트래버틴 벽과 훈증 오크 수납장</p>
|
||||
</section>
|
||||
|
||||
<!-- 작업 세 곳: 대표 1점은 왼쪽 끝까지 흘리고, 보조 2점은 오른쪽 열에 쌓는다 -->
|
||||
<section class="works" id="works" aria-labelledby="worksHeading">
|
||||
<div class="wrap section-head">
|
||||
<p class="section-index">작업</p>
|
||||
<h2 id="worksHeading" class="section-title">한남, 청담, 성북동에서 설계하고 시공한 공간 세 곳</h2>
|
||||
</div>
|
||||
|
||||
<article class="work work--lead">
|
||||
<figure class="work-media bleed-left">
|
||||
<img
|
||||
src="./assets/hannam-10-staircase.webp"
|
||||
alt="한남 듀플렉스 펜트하우스의 캔틸레버 오크 계단과 트래버틴 벽"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</figure>
|
||||
<div class="work-body">
|
||||
<h3 class="work-title">한남 듀플렉스 펜트하우스</h3>
|
||||
<dl class="facts">
|
||||
<div class="fact"><dt>용도</dt><dd>주거, 복층</dd></div>
|
||||
<div class="fact"><dt>면적</dt><dd>284㎡</dd></div>
|
||||
<div class="fact"><dt>마감</dt><dd>로만 트래버틴, 훈증 오크</dd></div>
|
||||
</dl>
|
||||
<p class="work-desc">
|
||||
층고 5.8m 복층 거실에 트래버틴 석재 벽과 짙은 훈증 오크 수납장을 함께 썼습니다. 남향 창으로 드는 빛이 석재 벽에 시간대별 음영을 만듭니다. 거실부터 와인 셀러까지 24개 공간을 사진으로 볼 수 있습니다.
|
||||
</p>
|
||||
<div class="hero-ctas">
|
||||
<a href="./projects/hannam-duplex/index.html" class="btn-materia">
|
||||
한남 펜트하우스 24개 공간 감상
|
||||
<span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
<a href="#materials" class="btn-materia" style="background: var(--surface-card); color: var(--ink); border: 1px solid var(--line);">
|
||||
소재와 물성 탐색
|
||||
</a>
|
||||
</div>
|
||||
<a class="btn" href="./projects/hannam-duplex/index.html">24개 공간 사진 보기</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="hero-visual">
|
||||
<figure class="hero-frame">
|
||||
<div class="wrap works-pair">
|
||||
<article class="work work--side">
|
||||
<figure class="work-media">
|
||||
<img
|
||||
src="./assets/penthouse-hero.webp"
|
||||
alt="트래버틴 벽체와 훈증 오크 수납장이 있는 주거 공간 전경"
|
||||
width="1200"
|
||||
height="1600"
|
||||
loading="eager"
|
||||
/>
|
||||
<figcaption class="hero-caption-pill">
|
||||
<span class="hero-caption-name">한남 펜트하우스 레지던스</span>
|
||||
<span class="hero-caption-meta">공간 사진과 물성 조합을 보여 주는 프로젝트 예시</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 엄선 프로젝트 갤러리 (Selected Works) -->
|
||||
<section class="works-section" id="works" aria-labelledby="worksHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="worksHeading" class="section-title">엄선된 하이엔드 공간 아카이브</h2>
|
||||
<p class="section-sub">주거 펜트하우스부터 프라이빗 갤러리까지, 공간의 고유한 결을 살린 마테리아의 대표 프로젝트입니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="works-grid">
|
||||
<!-- 프로젝트 1 -->
|
||||
<article class="work-card">
|
||||
<div class="work-card-media">
|
||||
<img
|
||||
src="./assets/penthouse-hero.webp"
|
||||
alt="한남 듀플렉스 펜트하우스 거실 전경"
|
||||
width="600"
|
||||
height="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="work-card-body">
|
||||
<h3 class="work-card-title">한남 듀플렉스 펜트하우스</h3>
|
||||
<div class="work-card-type">Residential · 284㎡ · 로만 트래버틴 & 훈증 오크</div>
|
||||
<p class="work-card-desc">
|
||||
층고 5.8m의 복층 구조에 거친 트래버틴 석재 벽체와 다크 훈증 오크를 대비시켜 웅장하면서도 고요한 빛의 음영을 연출했습니다.
|
||||
</p>
|
||||
<div class="work-card-actions">
|
||||
<a
|
||||
href="./projects/hannam-duplex/index.html"
|
||||
class="btn-materia"
|
||||
>
|
||||
24개 공간 갤러리 감상 ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 프로젝트 2 -->
|
||||
<article class="work-card">
|
||||
<div class="work-card-media">
|
||||
<img
|
||||
src="./assets/materials-macro.webp"
|
||||
alt="청담 프라이빗 갤러리 마감재 매크로"
|
||||
width="600"
|
||||
height="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="work-card-body">
|
||||
<h3 class="work-card-title">청담 프라이빗 갤러리</h3>
|
||||
<div class="work-card-type">Commercial / Gallery · 195㎡ · 마이크로토핑 & 브론즈</div>
|
||||
<p class="work-card-desc">
|
||||
작품이 온전히 숨 쉴 수 있도록 모든 몰딩을 숨긴 무문선·무걸레받이 디테일과 브러시드 브론즈 프레임으로 정갈함을 극대화했습니다.
|
||||
</p>
|
||||
<div class="work-card-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-materia"
|
||||
onclick="openProjectModal('청담 프라이빗 갤러리', '195㎡ (59평)', '이탈리아 마이크로토핑 바닥재, 브러시드 파티나 브론즈, 무반사 저철분 유리', '색채를 배제한 무채색 베이스 위에 섬세한 텍스처를 레이어드하여 미술품의 몰입도를 극대화한 공간입니다.');"
|
||||
>
|
||||
설계 명세 보기 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 프로젝트 3 -->
|
||||
<article class="work-card">
|
||||
<div class="work-card-media">
|
||||
<img
|
||||
src="./assets/hannam-08-terrace.webp"
|
||||
alt="성북동 포레스트 레지던스 자연석 테라스와 수림 차경"
|
||||
width="600"
|
||||
height="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="work-card-body">
|
||||
<h3 class="work-card-title">성북동 포레스트 레지던스</h3>
|
||||
<div class="work-card-type">Private Residence · 340㎡ · 자연석 화강석 & 벨기에 리넨</div>
|
||||
<p class="work-card-desc">
|
||||
북악산 사계절의 숲 풍경을 차경 기법으로 끌어들이고, 실내에는 자연석 아일랜드와 수공예 패브릭을 배치한 친환경 럭셔리 주거.
|
||||
</p>
|
||||
<div class="work-card-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-materia"
|
||||
onclick="openProjectModal('성북동 포레스트 레지던스', '340㎡ (103평)', '가평 통화강석 아일랜드, 스위스 비트라 가구 빌트인, 천연 회벽 마감', '산자락의 자연광과 계절의 변화를 고스란히 담아내는 차경 설계와 천연 자재의 숨결을 결합했습니다.');"
|
||||
>
|
||||
설계 명세 보기 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 머티리얼 보드 & 촉각성 (Tactile Materiality) -->
|
||||
<section class="material-section" id="materials" aria-labelledby="matHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="matHeading" class="section-title">자연이 빚은 물성과 촉각의 조화</h2>
|
||||
<p class="section-sub">마테리아가 선별한 최상급 건축 마감재는 인위적인 가공을 최소화하여 시간의 깊이를 머금습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="material-grid">
|
||||
<div class="material-frame">
|
||||
<img
|
||||
src="./assets/materials-macro.webp"
|
||||
alt="트래버틴 대리석, 훈증 오크, 벨기에 리넨, 브론즈 머티리얼 플랫레이"
|
||||
width="800"
|
||||
height="600"
|
||||
src="./assets/hannam-21-art-niche.webp"
|
||||
alt="청담 프라이빗 갤러리의 트래버틴 좌대와 작품만 비추는 조명"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="material-specs">
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">로만 트래버틴</span>
|
||||
<span class="mat-desc">이탈리아 티볼리 채석장의 천연 석회암. 무수한 다공성 질감이 빛을 부드럽게 난반사합니다.</span>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">훈증 오크 (Bog Oak)</span>
|
||||
<span class="mat-desc">수백 년간 수중 숙성된 천연 고재의 깊은 탄화 흑색과 치밀한 나이테 결을 그대로 보존합니다.</span>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">벨기에 천연 리넨</span>
|
||||
<span class="mat-desc">플랑드르 지방의 무표백 아마 섬유로 짠 고밀도 원단. 부드럽게 빛을 거르고 통기성을 제공합니다.</span>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">파티나 브론즈</span>
|
||||
<span class="mat-desc">손길이 닿을수록 자연스러운 에이징 산화 피막이 형성되는 수공예 황동 하드웨어입니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4단계 마스터 프로세스 -->
|
||||
<section class="process-section" id="process" aria-labelledby="procHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="procHeading" class="section-title">비스포크 공간 건축 4단계 프로세스</h2>
|
||||
<p class="section-sub">기획부터 완공 인도까지, 총괄 디렉터 1인이 모든 자재와 조도를 책임지고 총괄합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-grid">
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 01</div>
|
||||
<h3>일조 및 공간 진단</h3>
|
||||
<p>현장의 24시간 태양 궤적, 조망 축, 구조 하중을 분석하여 채광의 최적 배치를 기획합니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 02</div>
|
||||
<h3>촉각적 머티리얼 페어링</h3>
|
||||
<p>맞춤형 자재 샘플 보드로 생활 방식과 촉감 선호도를 함께 살펴봅니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 03</div>
|
||||
<h3>3D 광학 시뮬레이션</h3>
|
||||
<p>낮빛과 2700K 조명에서 빛이 퍼지는 모습을 공간 시뮬레이션으로 미리 살펴봅니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 04</div>
|
||||
<h3>장인 직영 디테일 시공</h3>
|
||||
<p>30년 경력의 석재·목공 마스터 장인팀이 밀리미터 단위의 오차 없는 시공을 완성합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 프라이빗 공간 컨설팅 신청 -->
|
||||
<section class="contact-section" id="contact" aria-labelledby="contactHeading">
|
||||
<div class="wrap">
|
||||
<div class="contact-card">
|
||||
<div style="text-align: center; margin-bottom: var(--space-6);">
|
||||
<div class="eyebrow">프라이빗 컨설팅</div>
|
||||
<h2 id="contactHeading" style="font-family: var(--font-serif); font-size: var(--step-2); margin-top: 6px;">
|
||||
프라이빗 공간 상담 항목
|
||||
</h2>
|
||||
<p style="font-size: var(--step-0); color: var(--ink-muted); margin-top: 6px;">
|
||||
공간 유형과 규모, 예산 범위를 정리해 보세요.
|
||||
</figure>
|
||||
<div class="work-body">
|
||||
<h3 class="work-title">청담 프라이빗 갤러리</h3>
|
||||
<dl class="facts">
|
||||
<div class="fact"><dt>용도</dt><dd>갤러리</dd></div>
|
||||
<div class="fact"><dt>면적</dt><dd>195㎡</dd></div>
|
||||
<div class="fact"><dt>마감</dt><dd>마이크로토핑, 브론즈</dd></div>
|
||||
</dl>
|
||||
<p class="work-desc">
|
||||
작품에 시선이 모이도록 몰딩과 걸레받이를 없앤 무몰딩 마감으로 벽을 정리하고, 창과 진열장 프레임은 브러시드 브론즈로 맞췄습니다.
|
||||
</p>
|
||||
</div>
|
||||
<p class="demo-notice" role="note">안내: 이 페이지의 프로젝트와 상담 항목은 공간 연출 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 상담으로 접수되지 않습니다.</p>
|
||||
|
||||
<form id="consultForm" onsubmit="return false;">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="spaceType">공간 유형</label>
|
||||
<select id="spaceType" class="form-select">
|
||||
<option>주거 펜트하우스 / 타운하우스</option>
|
||||
<option>단독주택 신축 / 대수선</option>
|
||||
<option>프라이빗 갤러리 / 플래그십</option>
|
||||
<option>하이엔드 오피스 라운지</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="spaceArea">예상 전용면적 (평형)</label>
|
||||
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientName">성함</label>
|
||||
<input type="text" id="clientName" class="form-input" placeholder="성함" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientPhone">연락처</label>
|
||||
<input type="tel" id="clientPhone" class="form-input" placeholder="연락처" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientBudget">예상 공사 예산 범위</label>
|
||||
<select id="clientBudget" class="form-select">
|
||||
<option>1억 5천만 원 ~ 3억 원</option>
|
||||
<option selected>3억 원 ~ 5억 원</option>
|
||||
<option>5억 원 이상 (풀 하이엔드 비스포크)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientNote">공간에 바라는 철학 및 특별 요청사항</label>
|
||||
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-materia" id="btnSubmitConsult" style="width: 100%; padding: 14px; margin-top: 10px;">
|
||||
입력한 상담 항목 확인
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-line"
|
||||
onclick="openProjectModal('청담 프라이빗 갤러리', '195㎡ (59평)', '이탈리아 마이크로토핑 바닥재, 브러시드 파티나 브론즈, 무반사 저철분 유리', '벽과 바닥은 무채색으로 통일하고 질감만 다르게 써서, 관람객의 시선이 작품에 머물도록 했습니다.');"
|
||||
>
|
||||
설계 내용 보기
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work work--side">
|
||||
<figure class="work-media">
|
||||
<img
|
||||
src="./assets/hannam-08-terrace.webp"
|
||||
alt="성북동 포레스트 레지던스의 자연석 테라스와 숲 조망"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</figure>
|
||||
<div class="work-body">
|
||||
<h3 class="work-title">성북동 포레스트 레지던스</h3>
|
||||
<dl class="facts">
|
||||
<div class="fact"><dt>용도</dt><dd>단독주택</dd></div>
|
||||
<div class="fact"><dt>면적</dt><dd>340㎡</dd></div>
|
||||
<div class="fact"><dt>마감</dt><dd>자연석 화강석, 벨기에 리넨</dd></div>
|
||||
</dl>
|
||||
<p class="work-desc">
|
||||
거실 창 너머로 북악산 숲이 보이도록 배치하고, 주방에는 자연석 아일랜드, 침실에는 리넨 패브릭을 썼습니다.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-line"
|
||||
onclick="openProjectModal('성북동 포레스트 레지던스', '340㎡ (103평)', '가평 통화강석 아일랜드, 스위스 비트라 가구 빌트인, 천연 회벽 마감', '큰 창으로 북악산 숲을 거실 풍경으로 들이고, 실내는 화강석과 회벽 같은 천연 자재로 마감했습니다.');"
|
||||
>
|
||||
설계 내용 보기
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 마감재 네 가지: 접사 사진을 오른쪽 끝까지 흘린다 -->
|
||||
<section class="materials" id="materials" aria-labelledby="matHeading">
|
||||
<div class="materials-grid">
|
||||
<div class="materials-body">
|
||||
<p class="section-index">마감재</p>
|
||||
<h2 id="matHeading" class="section-title">자주 쓰는 마감재 네 가지, 전부 가공을 줄인 천연 소재입니다</h2>
|
||||
<dl class="mat-list">
|
||||
<div class="mat-item">
|
||||
<dt class="mat-name">로만 트래버틴</dt>
|
||||
<dd class="mat-desc">이탈리아 티볼리산 천연 석회암. 표면의 작은 구멍들이 빛을 고르게 흩어 눈부심이 적습니다.</dd>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<dt class="mat-name">훈증 오크</dt>
|
||||
<dd class="mat-desc">수백 년 넘게 물속에 묻혀 있던 참나무 고재. 짙은 흑갈색과 촘촘한 나이테가 특징입니다.</dd>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<dt class="mat-name">벨기에 천연 리넨</dt>
|
||||
<dd class="mat-desc">플랑드르 지방의 무표백 아마로 짠 고밀도 원단. 커튼으로 쓰면 빛을 부드럽게 거르고 바람이 잘 통합니다.</dd>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<dt class="mat-name">파티나 브론즈</dt>
|
||||
<dd class="mat-desc">손이 닿을수록 표면에 산화막이 생겨 색이 깊어지는 수공예 브론즈 손잡이와 하드웨어입니다.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<figure class="materials-media bleed-right">
|
||||
<img
|
||||
src="./assets/materials-macro.webp"
|
||||
alt="트래버틴, 훈증 오크, 벨기에 리넨, 브론즈 샘플을 한 상 위에 놓은 접사"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<figcaption class="materials-caption">샘플 보드. 왼쪽부터 트래버틴, 훈증 오크, 리넨, 브론즈</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 절차 4단계: 글만. 번호가 이 페이지에서 가장 큰 글자다 -->
|
||||
<section class="process" id="process" aria-labelledby="procHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head section-head--inline">
|
||||
<p class="section-index">절차</p>
|
||||
<h2 id="procHeading" class="section-title">일조 진단부터 직영 시공까지 4단계, 디렉터 한 명이 끝까지 맡습니다</h2>
|
||||
</div>
|
||||
<ol class="steps">
|
||||
<li class="step">
|
||||
<span class="step-num" aria-hidden="true">1</span>
|
||||
<h3 class="step-title">일조와 현장 진단</h3>
|
||||
<p class="step-desc">시간대별 해의 위치, 창밖 조망, 구조 하중을 확인해 채광에 맞게 공간을 배치합니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<span class="step-num" aria-hidden="true">2</span>
|
||||
<h3 class="step-title">마감재 선정</h3>
|
||||
<p class="step-desc">실물 샘플 보드를 보며 생활 방식과 원하는 촉감에 맞는 자재를 고릅니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<span class="step-num" aria-hidden="true">3</span>
|
||||
<h3 class="step-title">3D 조명 시뮬레이션</h3>
|
||||
<p class="step-desc">낮 시간 자연광과 2700K 조명에서 공간이 어떻게 보이는지 3D로 미리 확인합니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<span class="step-num" aria-hidden="true">4</span>
|
||||
<h3 class="step-title">직영 시공</h3>
|
||||
<p class="step-desc">경력 30년의 석재와 목공 팀이 직접 시공하고, 마감 오차를 밀리미터 단위로 확인합니다.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 프로젝트 상세 모달 다이얼로그 -->
|
||||
<dialog id="projectModal" class="project-dialog" aria-labelledby="pModalTitle">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem;">
|
||||
<h3 id="pModalTitle" style="font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink);">
|
||||
프로젝트 설계 아카이브
|
||||
</h3>
|
||||
<button type="button" onclick="document.getElementById('projectModal').close();" aria-label="닫기" style="font-size: 18px; font-weight: 700; color: var(--ink-muted);">✕</button>
|
||||
</div>
|
||||
<div style="display: grid; gap: 0.85rem; font-size: var(--step--1); line-height: 1.6;">
|
||||
<div><strong>프로젝트명:</strong> <span id="mProjName" style="color:var(--accent); font-weight:700;"></span></div>
|
||||
<div><strong>공간 면적:</strong> <span id="mProjArea" class="mono"></span></div>
|
||||
<div><strong>주요 마감재:</strong> <span id="mProjMaterials"></span></div>
|
||||
<div style="margin-top: 4px; padding: 12px; background: var(--surface-card); border-radius: var(--radius-sm); border: 1px solid var(--line);">
|
||||
<strong>설계 의도:</strong><br />
|
||||
<span id="mProjNotes" style="color:var(--ink-muted);"></span>
|
||||
<!-- 푸터 = 다음 행동 하나(상담 폼). 고지는 그 안의 한 줄이다 -->
|
||||
<footer class="site-foot" id="contact" aria-labelledby="contactHeading">
|
||||
<div class="wrap foot-grid">
|
||||
<div class="foot-lead">
|
||||
<p class="section-index">상담</p>
|
||||
<h2 id="contactHeading" class="section-title">상담 전에 공간 유형과 면적, 예산 범위를 정리해 주세요</h2>
|
||||
<p class="foot-desc">항목을 적어 두면 첫 상담에서 일조 진단 일정과 마감재 후보까지 바로 이야기할 수 있습니다.</p>
|
||||
<p class="demo-notice" role="note">안내: 이 페이지의 프로젝트와 상담 항목은 공간 연출 예시입니다. 입력 정보는 저장하거나 전송하지 않으며 실제 상담으로 접수되지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1.5rem; text-align: right;">
|
||||
<button type="button" class="btn-materia" style="padding: 6px 20px; font-size: 13px;" onclick="document.getElementById('projectModal').close();">닫기</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- 푸터 (.site-foot SSOT) -->
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>마테리아 스튜디오 · 공간 설계 안내</p>
|
||||
<p class="muted">이 페이지의 프로젝트·상담 항목은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
|
||||
<form class="consult" id="consultForm" onsubmit="return false;">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="spaceType">공간 유형</label>
|
||||
<select id="spaceType" class="form-select">
|
||||
<option>주거 펜트하우스 / 타운하우스</option>
|
||||
<option>단독주택 신축 / 대수선</option>
|
||||
<option>프라이빗 갤러리 / 플래그십</option>
|
||||
<option>하이엔드 오피스 라운지</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="spaceArea">예상 전용면적</label>
|
||||
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientName">성함</label>
|
||||
<input type="text" id="clientName" class="form-input" placeholder="성함" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientPhone">연락처</label>
|
||||
<input type="tel" id="clientPhone" class="form-input" placeholder="연락처" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientBudget">예상 공사 예산 범위</label>
|
||||
<select id="clientBudget" class="form-select">
|
||||
<option>1억 5천만 원 ~ 3억 원</option>
|
||||
<option selected>3억 원 ~ 5억 원</option>
|
||||
<option>5억 원 이상</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientNote">원하는 분위기와 요청 사항</label>
|
||||
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="선호하는 자재, 착공 희망 시기 등을 적어 주세요."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-wide" id="btnSubmitConsult">입력한 상담 항목 확인</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="wrap foot-base">
|
||||
<p class="foot-brand">MATERIA</p>
|
||||
<p class="foot-note">마테리아 스튜디오는 가상 브랜드 쇼케이스입니다. 프로젝트와 상담 항목은 예시입니다.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- 인터랙티브 스크립트 -->
|
||||
<dialog id="projectModal" class="project-dialog" aria-labelledby="pModalTitle">
|
||||
<div class="dialog-head">
|
||||
<h3 id="pModalTitle" class="dialog-title">프로젝트 상세</h3>
|
||||
<button type="button" class="dialog-close" onclick="document.getElementById('projectModal').close();" aria-label="닫기">✕</button>
|
||||
</div>
|
||||
<dl class="dialog-facts">
|
||||
<div class="fact"><dt>프로젝트명</dt><dd id="mProjName"></dd></div>
|
||||
<div class="fact"><dt>공간 면적</dt><dd id="mProjArea"></dd></div>
|
||||
<div class="fact"><dt>주요 마감재</dt><dd id="mProjMaterials"></dd></div>
|
||||
<div class="fact fact--note"><dt>설계 의도</dt><dd id="mProjNotes"></dd></div>
|
||||
</dl>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="btn" onclick="document.getElementById('projectModal').close();">닫기</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// 1. 조도 앰비언스 모드 스위처 (자연광 Day vs 야간 Night)
|
||||
// 낮·밤 조명 보기. 토큰만 바뀌고 레이아웃은 그대로다
|
||||
const btnDay = document.getElementById("btnAmbianceDay");
|
||||
const btnNight = document.getElementById("btnAmbianceNight");
|
||||
|
||||
function setAmbiance(mode) {
|
||||
document.body.setAttribute("data-ambiance", mode);
|
||||
if (mode === "night") {
|
||||
btnNight.classList.add("is-active");
|
||||
btnDay.classList.remove("is-active");
|
||||
} else {
|
||||
btnDay.classList.add("is-active");
|
||||
btnNight.classList.remove("is-active");
|
||||
}
|
||||
const nightOn = mode === "night";
|
||||
btnNight.classList.toggle("is-active", nightOn);
|
||||
btnDay.classList.toggle("is-active", !nightOn);
|
||||
btnNight.setAttribute("aria-pressed", String(nightOn));
|
||||
btnDay.setAttribute("aria-pressed", String(!nightOn));
|
||||
}
|
||||
|
||||
btnDay.addEventListener("click", () => setAmbiance("day"));
|
||||
btnNight.addEventListener("click", () => setAmbiance("night"));
|
||||
|
||||
// 2. 상담 신청 폼
|
||||
// 상담 항목 확인. 저장·전송하지 않는다
|
||||
const btnConsult = document.getElementById("btnSubmitConsult");
|
||||
if (btnConsult) {
|
||||
btnConsult.addEventListener("click", () => {
|
||||
|
|
@ -412,7 +387,6 @@
|
|||
}
|
||||
})();
|
||||
|
||||
// 프로젝트 모달 팝업 함수
|
||||
function openProjectModal(name, area, materials, notes) {
|
||||
document.getElementById("mProjName").textContent = name;
|
||||
document.getElementById("mProjArea").textContent = area;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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
|
|
@ -1,56 +1,60 @@
|
|||
/* ==========================================================================
|
||||
마테리아 스튜디오 (MATERIA Spatial Design) — 디자인 토큰 SSOT
|
||||
프리셋: editorial + quiet-architecture
|
||||
컨셉: 트래버틴과 빛의 건축 — 물성과 침묵이 빚어내는 하이엔드 공간
|
||||
마테리아 스튜디오 — 디자인 토큰 (유일한 정의처)
|
||||
2026-10-06 재작업. 배정값: 밝은 웜 모래 바탕 #e8e0d4 · 95° 올리브 강조 · radius 8px ·
|
||||
이롭게 바탕(표제) / Wanted Sans(본문) · 모션 없음(hover 색 전환만) · 종이 결 재질.
|
||||
다른 CSS 파일에서 --surface 같은 토큰을 다시 정의하지 않는다.
|
||||
========================================================================== */
|
||||
|
||||
: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 — 메인 표제 */
|
||||
/* 타입 스케일 — 표제는 작게(히어로 h1이 본문의 1.4배), 숫자·절차 번호가 가장 큰 글자 */
|
||||
--step--1: 0.875rem; /* 14px 캡션·보조 */
|
||||
--step-0: 1rem; /* 16px 본문 */
|
||||
--step-1: 1.1875rem; /* 19px 항목 제목 */
|
||||
--step-2: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); /* 22~30px 섹션 제목(문장) */
|
||||
--step-3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* 20~26px 히어로 표제(서너 줄 긴 문장) */
|
||||
--step-num: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); /* 절차 번호 */
|
||||
|
||||
--leading-tight: 1.18;
|
||||
--leading-normal: 1.75;
|
||||
--measure: 54ch;
|
||||
--leading-body: 1.7;
|
||||
--leading-head: 1.35;
|
||||
--measure: 36em;
|
||||
|
||||
--font-serif: "MaruBuri", "Noto Serif KR", serif;
|
||||
--font-display: "MaruBuri", "Noto Serif KR", serif;
|
||||
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-display: "Iropke Batang", "Noto Serif KR", "Apple SD Gothic Neo", serif;
|
||||
--font-body: "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||||
--weight-body: 400;
|
||||
--weight-strong: 600;
|
||||
|
||||
/* 웜 트래버틴 스톤 색상 (Day 기본) */
|
||||
--surface: #f5f3ef;
|
||||
--surface-raised: #faf9f6;
|
||||
--surface-card: #ece8e1;
|
||||
--surface-sunken: #e4dfd6;
|
||||
--surface-inverse: #161514;
|
||||
/* 낮 — 웜 모래 */
|
||||
--surface: #e8e0d4;
|
||||
--surface-raised: #f3ede4; /* 종이 판(히어로 표제판·폼) */
|
||||
--surface-sunken: #ddd3c4; /* 입력 바탕·구분 면 */
|
||||
--surface-inverse: #1f1d18;
|
||||
|
||||
--ink: #161514;
|
||||
--ink-muted: #524f4b;
|
||||
--ink-faint: #8c8780;
|
||||
--ink-inverse: #f5f3ef;
|
||||
--ink-inverse-muted: #a39e96;
|
||||
--ink: #1f1d18;
|
||||
--ink-muted: #5a554b;
|
||||
--ink-inverse: #f3ede4;
|
||||
|
||||
--line: #ddd8cf;
|
||||
--line-strong: #bfb8ab;
|
||||
--line-subtle: #eae5dc;
|
||||
--line-inverse: #33312f;
|
||||
--line: #cbc0ae;
|
||||
--line-strong: #9f9482;
|
||||
|
||||
/* 단일 강조색 — 브러시드 브론즈 */
|
||||
--accent: #76583d;
|
||||
--accent-hover: #5f4631;
|
||||
--accent-light: rgba(118, 88, 61, 0.12);
|
||||
--accent-surface: rgba(118, 88, 61, 0.2);
|
||||
--accent-ink: #ffffff;
|
||||
/* 95° 올리브 — 행동·현재 위치·번호에만 */
|
||||
--accent: #43632c;
|
||||
--accent-hover: #35501f;
|
||||
--accent-ink: #f3ede4;
|
||||
--accent-soft: rgba(67, 99, 44, 0.12);
|
||||
|
||||
--radius: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--focus: #43632c;
|
||||
--shadow-plate: 0 1.5rem 3rem rgba(31, 29, 24, 0.18);
|
||||
--scrim: rgba(31, 29, 24, 0.6);
|
||||
|
||||
/* 라이트박스는 낮·밤 모두 어두운 면 위 밝은 글자다(밤에 뒤집히지 않는다) */
|
||||
--lightbox-bg: #1f1d18;
|
||||
--lightbox-ink: #f3ede4;
|
||||
--lightbox-muted: #c9c0b2;
|
||||
--lightbox-line: #4a443b;
|
||||
--lightbox-accent: #a9c47a;
|
||||
|
||||
--radius: 8px;
|
||||
|
||||
/* 간격 — SSOT 표준 */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
|
|
@ -60,37 +64,36 @@
|
|||
--space-7: 6rem;
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
|
||||
--container: clamp(70rem, 62vw, 85rem);
|
||||
--container: 80rem;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--control-block: 2.75rem;
|
||||
--control-pad-inline: 0.875rem;
|
||||
--head-h: 3.75rem;
|
||||
|
||||
/* 모션 */
|
||||
--dur-quick: 180ms;
|
||||
--dur-normal: 420ms;
|
||||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||||
/* 모션은 없다. hover·focus 색 전환 한 값만 둔다 */
|
||||
--dur-quick: 160ms;
|
||||
}
|
||||
|
||||
/* ── 나이트 무드 앰비언스 ── */
|
||||
/* ── 밤 — 어두운 웜 흙 바탕. 올리브는 밝게 올려 4.5:1 이상 ── */
|
||||
body[data-ambiance="night"] {
|
||||
--surface: #141312;
|
||||
--surface-raised: #1c1b19;
|
||||
--surface-card: #22201e;
|
||||
--surface-sunken: #2b2926;
|
||||
--surface-inverse: #f5f3ef;
|
||||
--surface: #1b1814;
|
||||
--surface-raised: #26221c;
|
||||
--surface-sunken: #141210;
|
||||
--surface-inverse: #ece5d9;
|
||||
|
||||
--ink: #f5f3ef;
|
||||
--ink-muted: #a39e96;
|
||||
--ink-faint: #736e67;
|
||||
--ink-inverse: #141312;
|
||||
--ink: #ece5d9;
|
||||
--ink-muted: #b3aa9b;
|
||||
--ink-inverse: #1b1814;
|
||||
|
||||
--line: #2e2b27;
|
||||
--line-strong: #45413c;
|
||||
--line-subtle: #242220;
|
||||
--line: #3b352c;
|
||||
--line-strong: #5c5447;
|
||||
|
||||
--accent: #c4a482;
|
||||
--accent-hover: #dbbe9d;
|
||||
--accent-light: rgba(196, 164, 130, 0.15);
|
||||
--accent-ink: #141312;
|
||||
--accent: #a9c47a;
|
||||
--accent-hover: #c2d898;
|
||||
--accent-ink: #1b1814;
|
||||
--accent-soft: rgba(169, 196, 122, 0.16);
|
||||
|
||||
--focus: #a9c47a;
|
||||
--shadow-plate: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
|
||||
--scrim: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue