b4f9bcfc6b
Based on Variant ZIO Complete Website design (screenshot1-13): - tokens.css: color palette (#003366, #005A8C, #00A0C8), Pretendard font, 4px grid - global.css: section-label-v, section-title-v, v-card, v-stats-section, btn-v-* - Home.jsx: SVG icons for Business cards, Variant-style section labels, dark navy KPI section - Common.css: page-hero improved (navy gradient), section labels cyan, sub-nav refined Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
1.3 KiB
CSS
51 lines
1.3 KiB
CSS
/* ── zio Variant 디자인 토큰 ── */
|
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
|
|
|
:root {
|
|
/* Variant 색상 팔레트 */
|
|
--v-navy-900: #001a33;
|
|
--v-navy-800: #002752;
|
|
--v-navy-700: #003366;
|
|
--v-navy-600: #004080;
|
|
--v-navy-500: #005A8C;
|
|
--v-cyan-500: #00A0C8;
|
|
--v-cyan-400: #29B8D8;
|
|
--v-cyan-100: #E8F7FB;
|
|
--v-blue-100: #E8F0F8;
|
|
--v-blue-200: #C5D8EF;
|
|
|
|
/* 뉴트럴 */
|
|
--v-gray-50: #F8FAFC;
|
|
--v-gray-100: #F1F5F9;
|
|
--v-gray-200: #E2E8F0;
|
|
--v-gray-400: #94A3B8;
|
|
--v-gray-600: #475569;
|
|
--v-gray-800: #1E293B;
|
|
--v-gray-900: #0F172A;
|
|
|
|
/* 섹션 라벨 */
|
|
--v-label-color: var(--v-cyan-500);
|
|
--v-label-size: 12px;
|
|
--v-label-weight: 700;
|
|
--v-label-spacing: 0.1em;
|
|
|
|
/* 간격 */
|
|
--v-section-py: 96px;
|
|
--v-section-py-sm: 64px;
|
|
|
|
/* 반경 */
|
|
--v-radius-sm: 8px;
|
|
--v-radius-md: 12px;
|
|
--v-radius-lg: 16px;
|
|
--v-radius-xl: 24px;
|
|
--v-radius-full: 9999px;
|
|
|
|
/* 그림자 */
|
|
--v-shadow-sm: 0 1px 3px rgba(0,51,102,.08), 0 1px 2px rgba(0,51,102,.06);
|
|
--v-shadow-md: 0 4px 12px rgba(0,51,102,.10), 0 2px 6px rgba(0,51,102,.06);
|
|
--v-shadow-lg: 0 10px 30px rgba(0,51,102,.12), 0 4px 10px rgba(0,51,102,.06);
|
|
|
|
/* 전환 */
|
|
--v-ease: 240ms cubic-bezier(.4,0,.2,1);
|
|
}
|