feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
Yun Chan
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@import "./tokens.css";
|
||||
@import "./tokens.css?v=20260912all";
|
||||
|
||||
/* ==========================================================================
|
||||
마테리아 스튜디오 (MATERIA Spatial Design) — 메인 스타일시트 SSOT
|
||||
|
|
@ -23,6 +23,10 @@ html {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(dialog[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
line-height: var(--leading-normal);
|
||||
|
|
@ -31,6 +35,30 @@ body {
|
|||
transition: background-color var(--dur-normal);
|
||||
}
|
||||
|
||||
/* 프로젝트 명세는 페이지의 일부가 아니라 독립된 읽기 표면이다.
|
||||
전역 reset의 margin:0이 dialog UA 중앙 배치를 지우므로 위치를 컴포넌트가 직접 소유한다. */
|
||||
.project-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
box-sizing: border-box;
|
||||
width: min(38rem, calc(100dvw - (var(--space-4) * 2)));
|
||||
max-height: min(36rem, calc(100dvh - (var(--space-4) * 2)));
|
||||
margin: auto;
|
||||
padding: var(--space-5);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
color: var(--ink);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 2rem 5rem rgba(22, 21, 20, 0.26);
|
||||
}
|
||||
|
||||
.project-dialog::backdrop {
|
||||
background: rgba(22, 21, 20, 0.58);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -217,7 +245,7 @@ body[data-ambiance="night"] .site-header {
|
|||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-muted);
|
||||
transition: all var(--dur-quick);
|
||||
transition: background-color var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +256,7 @@ body[data-ambiance="night"] .site-header {
|
|||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ── 버튼 시스템 & 더블 베젤 ── */
|
||||
/* ── 버튼 시스템 ── */
|
||||
.btn-materia {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -256,22 +284,6 @@ body[data-ambiance="night"] .site-header {
|
|||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 더블 베젤 프레임 (Double-Bezel) */
|
||||
.bezel-outer,
|
||||
.frame.double-bezel {
|
||||
background: rgba(158, 128, 98, 0.06);
|
||||
border: 1px solid var(--line);
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.bezel-inner {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-subtle);
|
||||
border-radius: calc(var(--radius-md) - 4px);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* ── 히어로 섹션 ── */
|
||||
.hero-section {
|
||||
padding-block: var(--space-6) var(--space-7);
|
||||
|
|
@ -280,7 +292,7 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -302,7 +314,7 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
.hero-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--step-3);
|
||||
font-size: clamp(2.5rem, 2rem + 2.25vw, 4.25rem);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.01em;
|
||||
|
|
@ -315,13 +327,18 @@ body[data-ambiance="night"] .site-header {
|
|||
.hero-desc {
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
max-width: var(--measure);
|
||||
max-width: 34rem;
|
||||
line-height: var(--leading-normal);
|
||||
margin-bottom: var(--space-5);
|
||||
text-wrap: pretty;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.hero-frame { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.06); }
|
||||
.hero-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; transition: transform var(--dur-normal); }
|
||||
.hero-caption-pill { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; }
|
||||
.hero-caption-name { color: var(--ink); font-family: var(--font-serif); font-weight: 700; }
|
||||
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -333,20 +350,6 @@ body[data-ambiance="night"] .site-header {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.hero-frame {
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.hero-frame img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
transition: transform var(--dur-normal);
|
||||
}
|
||||
|
||||
.hero-spec-tag {
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
|
|
@ -406,7 +409,7 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
.works-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr));
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
|
|
@ -433,6 +436,8 @@ body[data-ambiance="night"] .site-header {
|
|||
background: var(--surface-sunken);
|
||||
position: relative;
|
||||
}
|
||||
.work-card:first-child { grid-row: span 2; }
|
||||
.work-card:first-child .work-card-media { aspect-ratio: 4 / 3; }
|
||||
|
||||
.work-card-media img {
|
||||
width: 100%;
|
||||
|
|
@ -516,9 +521,9 @@ body[data-ambiance="night"] .site-header {
|
|||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(9rem, .7fr) minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.mat-item-name {
|
||||
|
|
@ -642,7 +647,8 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
/* ── 반응형 미디어 쿼리 ── */
|
||||
@media (max-width: 860px) {
|
||||
.nav-links {
|
||||
.nav-links,
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
.hero-grid, .works-grid, .material-grid {
|
||||
|
|
@ -652,6 +658,7 @@ body[data-ambiance="night"] .site-header {
|
|||
.process-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.work-card:first-child { grid-row: auto; }
|
||||
.brand-han {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -681,3 +688,57 @@ body[data-ambiance="night"] .site-head { background: rgba(20, 19, 18, 0.94); }
|
|||
.head-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
|
||||
.site-foot { border-top: 1px solid var(--line); padding-block: var(--space-6); background: var(--surface); font-size: var(--step--1); color: var(--ink-muted); }
|
||||
.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
|
||||
|
||||
/* 석재 표면의 조용한 리듬을 유지하면서도 포커스와 조작 여백을 분명히 한다. */
|
||||
:where(a, button, input, select, textarea):focus-visible {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn-materia,
|
||||
.head-actions .btn,
|
||||
.ambiance-btn,
|
||||
.form-select,
|
||||
.form-input,
|
||||
.form-textarea {
|
||||
min-height: var(--control-block);
|
||||
padding-inline: var(--control-pad-inline);
|
||||
}
|
||||
|
||||
.demo-notice {
|
||||
max-width: 58ch;
|
||||
margin: 0 auto var(--space-5);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-left: 3px solid var(--accent);
|
||||
background: var(--accent-light);
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--step--1);
|
||||
line-height: 1.55;
|
||||
text-align: left;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.nav { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.nav { display: none; }
|
||||
.head-actions > .btn { display: none; }
|
||||
.hero-title { font-size: clamp(1.65rem, 7.8vw, 2.15rem); }
|
||||
.hero-ctas { align-items: stretch; }
|
||||
.hero-ctas > .btn-materia { width: 100%; }
|
||||
.contact-card { padding: var(--space-4); }
|
||||
.contact-card form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
|
||||
.hero-caption-pill { align-items: flex-start; flex-direction: column; }
|
||||
.mat-item { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 1ms !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue