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
15
apps/site/public/work/cheongon-care/styles/fonts.css
Normal file
15
apps/site/public/work/cheongon-care/styles/fonts.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "./tokens.css";
|
||||
@import "./tokens.css?v=20260912all";
|
||||
|
||||
/* ==========================================================================
|
||||
청온 케어 (CHEONG-ON CARE) — 메인 스타일시트 SSOT
|
||||
|
|
@ -193,7 +193,7 @@ button {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: all var(--dur-quick);
|
||||
transition: background-color var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ button {
|
|||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||||
gap: var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -351,41 +351,20 @@ button {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.bezel-outer {
|
||||
background: rgba(15, 118, 110, 0.05);
|
||||
border: 1px solid var(--line);
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.hero-frame {
|
||||
border-radius: calc(var(--radius-md) - 4px);
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.08);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hero-frame img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
aspect-ratio: 5/4;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-stat-floating {
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
left: 16px;
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 14px;
|
||||
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.hero-frame figcaption { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; }
|
||||
|
||||
/* ── 투명 정찰제 실시간 견적 산정 섹션 ── */
|
||||
.calculator-section {
|
||||
|
|
@ -393,10 +372,10 @@ button {
|
|||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
text-align: center;
|
||||
max-width: 680px;
|
||||
margin-inline: auto;
|
||||
.calc-section .section-head {
|
||||
text-align: left;
|
||||
max-width: 48rem;
|
||||
margin-inline: 0;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
|
|
@ -463,7 +442,7 @@ button {
|
|||
font-weight: 600;
|
||||
font-size: var(--step--1);
|
||||
text-align: center;
|
||||
transition: all var(--dur-quick);
|
||||
transition: background-color var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick);
|
||||
white-space: normal;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
|
@ -513,7 +492,7 @@ button {
|
|||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--dur-quick);
|
||||
transition: background-color var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick);
|
||||
}
|
||||
|
||||
.addon-label:has(input:checked) {
|
||||
|
|
@ -850,7 +829,7 @@ button {
|
|||
font-weight: 600;
|
||||
background: var(--surface);
|
||||
cursor: pointer;
|
||||
transition: all var(--dur-quick);
|
||||
transition: border-color var(--dur-quick), color var(--dur-quick);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
|
|
@ -864,10 +843,13 @@ button {
|
|||
inset: 0;
|
||||
margin: auto;
|
||||
width: min(90vw, 560px);
|
||||
max-height: calc(100dvh - (var(--space-4) * 2));
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-5);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -923,3 +905,75 @@ button {
|
|||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
html:has(dialog[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 접근성·초광폭 프리플라이트: 컨트롤의 독립성과 실제 표면 여백을 같은 토큰으로 유지한다. */
|
||||
:where(a, button, input, select, textarea):focus-visible {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-outline,
|
||||
.calc-submit,
|
||||
.type-btn,
|
||||
.addon-label,
|
||||
.action-btn,
|
||||
.filter-tab,
|
||||
.mode-btn,
|
||||
.head-actions .btn,
|
||||
input:not([type="checkbox"]),
|
||||
select,
|
||||
textarea {
|
||||
min-height: var(--control-block);
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-outline,
|
||||
.calc-submit,
|
||||
.type-btn,
|
||||
.addon-label,
|
||||
.action-btn,
|
||||
.filter-tab,
|
||||
.mode-btn,
|
||||
.head-actions .btn {
|
||||
padding-inline: var(--control-pad-inline);
|
||||
}
|
||||
|
||||
.form-label + input,
|
||||
.form-label + select,
|
||||
.form-label + textarea {
|
||||
padding-inline: var(--control-pad-inline);
|
||||
}
|
||||
|
||||
.demo-notice {
|
||||
max-width: 58ch;
|
||||
margin-top: var(--space-4);
|
||||
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;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.head-actions .client-only-btn { display: none; }
|
||||
.hero-ctas { align-items: stretch; }
|
||||
.hero-ctas .btn-primary { width: 100%; }
|
||||
.hero-title { font-size: clamp(1.65rem, 7.8vw, 2.15rem); }
|
||||
.hero-trust { align-items: flex-start; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 1ms !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* ==========================================================================
|
||||
청온 케어 (CHEONG-ON CARE) — 디자인 토큰 SSOT
|
||||
프리셋: ledger-console + swiss-minimal
|
||||
컨셉: 임상 수준의 위생 프로토콜과 정직한 정찰제 — 공간의 숨결을 되돌리는 케어
|
||||
컨셉: 현장 검수 절차와 정직한 정찰제 — 공간의 상태를 기록하는 케어
|
||||
단일 강조색: 에메랄드 틸 (#0D9488)
|
||||
========================================================================== */
|
||||
|
||||
|
|
@ -42,8 +42,8 @@
|
|||
--line-inverse: #334155;
|
||||
|
||||
/* 단일 강조색 (에메랄드 틸) */
|
||||
--accent: #0d9488;
|
||||
--accent-hover: #0f766e;
|
||||
--accent: #0f766e;
|
||||
--accent-hover: #115e59;
|
||||
--accent-light: #f0fdfa;
|
||||
--accent-surface: #ccfbf1;
|
||||
--accent-ink: #ffffff;
|
||||
|
|
@ -63,8 +63,10 @@
|
|||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
|
||||
--container: 1120px;
|
||||
--container: clamp(70rem, 62vw, 85rem);
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--control-block: 2.75rem;
|
||||
--control-pad-inline: 0.875rem;
|
||||
|
||||
/* 모션 */
|
||||
--dur-quick: 180ms;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue