260 lines
11 KiB
CSS
260 lines
11 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
|
||
|
||
@import "tailwindcss";
|
||
|
||
/* ─── Design Tokens ───────────────────────────────────────────────── */
|
||
@theme {
|
||
/* Navy ─ 950(darkest) · 900 · 800 · 50(lightest)
|
||
짙은 네이비 계열. 본문 텍스트, 다크 섹션 배경, 그라디언트 끝 */
|
||
--color-navy-950: #021341;
|
||
--color-navy-900: #0A1128;
|
||
--color-navy-800: #1A2B5E;
|
||
--color-navy-50: #F4F6FB;
|
||
|
||
/* Violet ─ 700(deep) · 500(accent)
|
||
퍼플 계열. 그라디언트 시작(700), 활성 상태·아이콘(500) */
|
||
--color-violet-700: #4F1DA1;
|
||
--color-violet-500: #6C5CE7;
|
||
/* Marketing accents (CTA / Process / Hero blobs — shared with DEMO) */
|
||
--color-marketing-cream: #fff3eb;
|
||
--color-marketing-lilac: #e4cfff;
|
||
--color-marketing-ice: #f5f9ff;
|
||
--color-lavender-100: #f3e8ff;
|
||
--color-lavender-200: #e9d4ff;
|
||
--color-lavender-300: #d8b4fe;
|
||
--color-violet-hover: #af90ff;
|
||
/* Hero radial + blob tints */
|
||
--color-hero-wash-start: #e0e7ff;
|
||
--color-hero-wash-mid: #faf5ff;
|
||
--color-hero-wash-end: #fdf2f8;
|
||
--color-marketing-blush: #fbcfe8;
|
||
|
||
/* Neutral ─ 90(darkest) · 80 · 70 · 60 · 40 · 30 · 20 · 10 · 00(white) */
|
||
--color-neutral-90: #151515;
|
||
--color-neutral-80: #303030;
|
||
--color-neutral-70: #606060;
|
||
--color-neutral-60: #808080;
|
||
--color-neutral-40: #DADBDE;
|
||
--color-neutral-30: #EAEBEF;
|
||
--color-neutral-20: #F0F1F4;
|
||
--color-neutral-10: #F7F8FA;
|
||
--color-neutral-00: #FFFFFF;
|
||
|
||
/* Status ─ {critical | warning | good | info} × {bg | text | border | dot}
|
||
파스텔 시맨틱 팔레트. 원색(빨강·초록) 사용 금지 */
|
||
--color-status-critical-bg: #FFF0F0;
|
||
--color-status-critical-text: #7C3A4B;
|
||
--color-status-critical-border: #F5D5DC;
|
||
--color-status-critical-dot: #D4889A;
|
||
|
||
--color-status-warning-bg: #FFF6ED;
|
||
--color-status-warning-text: #7C5C3A;
|
||
--color-status-warning-border: #F5E0C5;
|
||
--color-status-warning-dot: #D4A872;
|
||
|
||
--color-status-good-bg: #F3F0FF;
|
||
--color-status-good-text: #4A3A7C;
|
||
--color-status-good-border: #D5CDF5;
|
||
--color-status-good-dot: #9B8AD4;
|
||
|
||
--color-status-info-bg: #EFF0FF;
|
||
--color-status-info-text: #3A3F7C;
|
||
--color-status-info-border: #C5CBF5;
|
||
--color-status-info-dot: #7A84D4;
|
||
|
||
/* Typography */
|
||
--font-sans: "Pretendard Variable", "Pretendard", ui-sans-serif, system-ui, sans-serif;
|
||
--font-serif: "Playfair Display", ui-serif, Georgia, Cambria, serif;
|
||
--font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||
|
||
/* Animation */
|
||
--animate-blob: blob 7s infinite;
|
||
--animate-blob-large: blob-large 25s infinite ease-in-out;
|
||
--animate-fade-in-up: fade-in-up 0.6s ease-out both;
|
||
--animate-fade-in-left: fade-in-left 0.6s ease-out both;
|
||
--animate-fade-in-right: fade-in-right 0.6s ease-out both;
|
||
--animate-fade-in-scale: fade-in-scale 0.8s ease-out both;
|
||
}
|
||
|
||
/* ─── Keyframes ───────────────────────────────────────────────────── */
|
||
@keyframes blob {
|
||
0% { transform: translate(0, 0) scale(1); }
|
||
33% { transform: translate(30px, -50px) scale(1.1); }
|
||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||
100% { transform: translate(0, 0) scale(1); }
|
||
}
|
||
|
||
@keyframes blob-large {
|
||
0% { transform: translate(0, 0) scale(1); }
|
||
33% { transform: translate(8vw, -8vh) scale(1.1); }
|
||
66% { transform: translate(-8vw, 8vh) scale(0.9); }
|
||
100% { transform: translate(0, 0) scale(1); }
|
||
}
|
||
|
||
/* fade + slide-up: replaces framer-motion entrance (opacity 0→1, y 20→0) */
|
||
@keyframes fade-in-up {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* fade + slide-left/right: whileInView x:-20→0 / x:20→0 */
|
||
@keyframes fade-in-left {
|
||
from { opacity: 0; transform: translateX(-20px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
@keyframes fade-in-right {
|
||
from { opacity: 0; transform: translateX(20px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
@keyframes fade-in-scale {
|
||
from { opacity: 0; transform: scale(0.95); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
/* ─── Animation Delays ────────────────────────────────────────────── */
|
||
/* UI entrance stagger (short) */
|
||
.animation-delay-100 { animation-delay: 0.1s; }
|
||
.animation-delay-200 { animation-delay: 0.2s; }
|
||
.animation-delay-300 { animation-delay: 0.3s; }
|
||
.animation-delay-400 { animation-delay: 0.4s; }
|
||
.animation-delay-500 { animation-delay: 0.5s; }
|
||
|
||
/* Blob float delays (long) */
|
||
.animation-delay-2000 { animation-delay: 2s; }
|
||
.animation-delay-4000 { animation-delay: 4s; }
|
||
.animation-delay-7000 { animation-delay: 7s; }
|
||
.animation-delay-14000 { animation-delay: 14s; }
|
||
|
||
/* ─── Utility Classes ─────────────────────────────────────────────── */
|
||
|
||
/* 라이트 섹션 헤딩 그라디언트 텍스트
|
||
- base의 h2 { color: navy }와 함께 쓸 때 color를 반드시 투명으로 두어야 그라데이션이 보임
|
||
- background 단축 속성은 clip을 리셋할 수 있어 background-image만 사용 */
|
||
.text-gradient {
|
||
color: transparent;
|
||
background-image: linear-gradient(to right, var(--color-navy-900), #3b5998);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/*
|
||
* 그라데이션 제목(h2)과 같은 레이아웃 안의 뱃지·버튼:
|
||
* WebKit 계열에서 -webkit-text-fill-color 가 상속되면 text-* 만으로는 글씨가 비어 보일 수 있음.
|
||
* currentColor 는 해당 요소의 (Tailwind) color 값과 맞춘다.
|
||
*/
|
||
.solid-text-paint {
|
||
-webkit-text-fill-color: currentColor !important;
|
||
/* bg-* 와 같은 요소에 clip:text가 남으면 글리프가 배경으로만 채워져 비어 보일 수 있음 */
|
||
-webkit-background-clip: border-box !important;
|
||
background-clip: border-box !important;
|
||
}
|
||
|
||
/* 반투명 글래스 카드 — 랜딩 섹션 */
|
||
.glass-card {
|
||
@apply bg-white/70 backdrop-blur-xl border border-white/40 rounded-2xl;
|
||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
|
||
}
|
||
|
||
/* 다크 섹션 위 화이트 카드 사선 그림자 */
|
||
.card-shadow { box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.06); }
|
||
.card-shadow:hover { box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.09); }
|
||
|
||
/* 브랜드 그라디언트 Primary 버튼 */
|
||
.btn-primary {
|
||
@apply cursor-pointer bg-gradient-to-r from-violet-700 to-navy-950 text-white rounded-full font-medium transition-all;
|
||
}
|
||
|
||
/* ─── Typography Scale ────────────────────────────────────────────── */
|
||
/* Display */
|
||
.display-72 { font-family: var(--font-serif); font-size: 72px; font-weight: 700; line-height: 1.1; letter-spacing: -1.44px; }
|
||
.display-48 { font-family: var(--font-serif); font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.96px; }
|
||
.display-36 { font-family: var(--font-serif); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.72px; }
|
||
|
||
/* Headline */
|
||
.headline-30 { font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.6px; }
|
||
.headline-24 { font-family: var(--font-serif); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.48px; }
|
||
.headline-20 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.4px; }
|
||
|
||
/* Title */
|
||
.title-20 { font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.4px; }
|
||
.title-18 { font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.36px; }
|
||
.title-18-semibold { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.36px; }
|
||
.title-16 { font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.32px; }
|
||
.title-14 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -0.28px; }
|
||
|
||
/* Body */
|
||
.body-20 { font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 1.6; letter-spacing: -0.4px; }
|
||
.body-20-medium { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; }
|
||
.body-18 { font-family: var(--font-sans); font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: -0.36px; }
|
||
.body-16 { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px; }
|
||
.body-16-medium { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.32px; }
|
||
.body-14 { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px; }
|
||
.body-14-medium { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -0.28px; }
|
||
|
||
/* Label */
|
||
.label-12 { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.24px; }
|
||
.label-12-semibold { font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: -0.24px; }
|
||
|
||
/* Responsive body: 18px → 20px at md (text-lg / text-xl) */
|
||
.body-18-md-20 {
|
||
font-family: var(--font-sans);
|
||
font-weight: 400;
|
||
line-height: 1.625;
|
||
letter-spacing: -0.36px;
|
||
font-size: 1.125rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.body-18-md-20 {
|
||
font-size: 1.25rem;
|
||
letter-spacing: -0.4px;
|
||
}
|
||
}
|
||
|
||
/* Responsive sans title: 18px → 20px at md (module card titles 등) */
|
||
.title-18-md-20 {
|
||
font-family: var(--font-sans);
|
||
font-weight: 700;
|
||
line-height: 1.4;
|
||
letter-spacing: -0.36px;
|
||
font-size: 1.125rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.title-18-md-20 {
|
||
font-size: 1.25rem;
|
||
letter-spacing: -0.4px;
|
||
}
|
||
}
|
||
|
||
/* Responsive list body: 14px → 16px at md */
|
||
.body-14-md-16 {
|
||
font-family: var(--font-sans);
|
||
font-weight: 400;
|
||
line-height: 1.625;
|
||
letter-spacing: -0.28px;
|
||
font-size: 0.875rem;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.body-14-md-16 {
|
||
font-size: 1rem;
|
||
letter-spacing: -0.32px;
|
||
}
|
||
}
|
||
|
||
/* ─── Base ────────────────────────────────────────────────────────── */
|
||
@layer base {
|
||
html, body {
|
||
@apply font-sans text-neutral-80 bg-neutral-10 antialiased;
|
||
font-style: normal;
|
||
line-height: normal;
|
||
min-height: 100dvh;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
@apply font-serif text-navy-900;
|
||
}
|
||
}
|