kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: 홈페이지 테마를 네이비로 개편

Browse Source
This commit is contained in:
김재현
2026-06-30 18:18:44 +09:00
parent 62ea632a50
commit 2d352787f9
4 changed files with 110 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/wwwroot/css/site.css
+91 -98
View File
@@ -1,18 +1,22 @@
/* TaxBaik — 워밍-프로페셔널 디자인 시스템 */
/* TaxBaik — Navy Blue 디자인 시스템 */
:root {
/* 워밍-프로페셔널 팔레트 */
--color-primary: #C89D6E; /* 따뜻한 골드/브론즈 */
--color-primary-dark: #A67C52; /* 진한 브론즈 */
--color-secondary: #2E5C4E; /* 따뜻한 초록 */
--color-secondary-dark: #1F3A30; /* 어두운 초록 */
--color-accent: #E8E4D8; /* 따뜻한 베이지 */
--color-accent-dark: #D9D3C4; /* 더 진한 베이지 */
--color-bg: #F9F7F3; /* 따뜻한 화이트 */
--color-bg-alt: #EFE9DD; /* 대체 배경 */
--color-text: #3D2817; /* 따뜻한 갈색 */
--color-text-light: #6B5D4F; /* 밝은 갈색 */
--color-border: #D9D3C4; /* 경계선 */
/* Navy Blue 팔레트 */
--color-primary: #1B4F8A; /* 네이비 */
--color-primary-dark: #133970; /* 진한 네이비 */
--color-primary-light: #2E5FA3; /* 밝은 네이비 */
--color-secondary: #2E5FA3; /* 보조 (밝은 네이비) */
--color-secondary-dark: #1B4F8A; /* 보조 진한 */
--color-accent: #E8F1F8; /* 연한 블루 배경 */
--color-accent-dark: #D8E2EE; /* 더 진한 연블루 */
--color-bg: #F7F9FC; /* 차가운 화이트 */
--color-bg-alt: #EAF1F8; /* 대체 배경 */
--color-text: #1A1A2E; /* 본문 텍스트 */
--color-text-light: #5A6A7A; /* 보조 텍스트 */
--color-border: #D8E2EE; /* 경계선 */
--color-cta: #E05A2B; /* 오렌지 CTA */
--color-cta-dark: #D45A1F; /* 진한 오렌지 */
--color-gold: #C9A227; /* 골드 액센트 */
--color-success: #2E7D32;
--color-warning: #F57C00;
--color-danger: #C62828;
@@ -30,10 +34,10 @@
--radius-lg: 12px;
--radius-xl: 16px;
--shadow-sm: 0 1px 3px rgba(61, 40, 23, 0.08);
--shadow-md: 0 4px 12px rgba(61, 40, 23, 0.12);
--shadow-lg: 0 8px 24px rgba(61, 40, 23, 0.15);
--shadow-xl: 0 12px 48px rgba(61, 40, 23, 0.18);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -52,10 +56,9 @@ html {
body {
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.8;
font-size: clamp(0.9rem, 2.5vw, 1rem);
letter-spacing: 0.3px;
background-color: #fff;
line-height: 1.75;
font-size: clamp(0.875rem, 2.5vw, 1rem);
}
/* ===== 타이포그래피 ===== */
@@ -64,12 +67,11 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
color: var(--color-text);
margin-bottom: var(--spacing-lg);
letter-spacing: -0.5px;
}
h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 4vw, 2rem); }
h1 { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }
@@ -77,17 +79,17 @@ h6 { font-size: 1rem; }
p {
margin-bottom: var(--spacing-md);
color: var(--color-text-light);
line-height: 1.85;
line-height: 1.8;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: all var(--transition-fast);
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-secondary);
color: var(--color-primary-dark);
text-decoration: none;
}
@@ -95,12 +97,11 @@ a:hover {
.btn {
border-radius: var(--radius-md);
font-weight: 600;
transition: all var(--transition-normal);
transition: all var(--transition-fast);
cursor: pointer;
border: none;
padding: 0.75rem 2rem;
font-size: 1rem;
letter-spacing: 0.3px;
display: inline-block;
text-align: center;
text-decoration: none;
@@ -111,27 +112,29 @@ a:hover {
}
.btn-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, #8B5E3C 100%);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: white;
box-shadow: 0 4px 12px rgba(27, 79, 138, 0.25);
}
.btn-warning {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
background-color: var(--color-cta);
border-color: var(--color-cta);
color: white;
box-shadow: var(--shadow-md);
}
.btn-warning:hover {
background: linear-gradient(135deg, var(--color-secondary-dark) 0%, #0D1E1A 100%);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
background-color: var(--color-cta-dark);
border-color: var(--color-cta-dark);
color: white;
box-shadow: 0 4px 12px rgba(224, 90, 43, 0.25);
}
.btn-outline-primary {
@@ -158,7 +161,7 @@ a:hover {
/* ===== 카드 ===== */
.card {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
background: white;
@@ -166,7 +169,7 @@ a:hover {
}
.card:hover {
transform: translateY(-6px);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
@@ -176,8 +179,8 @@ a:hover {
}
.card-title {
font-weight: 700;
color: var(--color-text);
font-weight: 600;
color: var(--color-primary);
margin-bottom: var(--spacing-md);
font-size: 1.25rem;
}
@@ -189,39 +192,28 @@ a:hover {
/* ===== 히어로 섹션 ===== */
.hero-section {
padding: clamp(3rem, 20vh, 6rem) 0;
background: linear-gradient(135deg, var(--color-secondary) 0%, #1F3A30 100%);
padding: clamp(2rem, 15vh, 5rem) 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white;
position: relative;
overflow: hidden;
border-bottom: 4px solid var(--color-primary);
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: rgba(200, 157, 110, 0.1);
border-radius: 50%;
}
.hero-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
top: 0;
right: 0;
width: 500px;
height: 500px;
background: rgba(232, 228, 216, 0.05);
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
transform: translate(30%, -30%);
}
.hero-section h1 {
font-size: clamp(2rem, 8vw, 3.5rem);
font-weight: 800;
font-size: clamp(1.75rem, 6vw, 3rem);
font-weight: 700;
margin-bottom: var(--spacing-lg);
position: relative;
z-index: 1;
@@ -243,12 +235,12 @@ a:hover {
}
.bg-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
background-color: var(--color-primary) !important;
}
.section-title {
font-size: clamp(1.75rem, 5vw, 2.75rem);
font-weight: 800;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--spacing-xl);
text-align: center;
@@ -264,14 +256,14 @@ a:hover {
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
background: var(--color-primary);
margin: var(--spacing-md) auto 0;
border-radius: 2px;
}
/* ===== 휴스 스트립 (신뢰도) ===== */
/* ===== 신뢰도 스트립 ===== */
.trust-strip {
background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-accent) 100%);
background-color: var(--color-accent);
padding: var(--spacing-3xl) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
@@ -305,11 +297,10 @@ a:hover {
font-size: 0.85rem;
font-weight: 600;
display: inline-block;
letter-spacing: 0.2px;
}
.bg-primary-badge {
background-color: rgba(200, 157, 110, 0.15);
background-color: rgba(27, 79, 138, 0.1);
color: var(--color-primary);
}
@@ -326,7 +317,7 @@ a:hover {
.form-control:focus, .form-select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(200, 157, 110, 0.1);
box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.1);
outline: none;
}
@@ -340,31 +331,28 @@ a:hover {
border-top: 2px solid var(--color-primary);
padding: var(--spacing-md);
z-index: 1000;
box-shadow: 0 -4px 12px rgba(61, 40, 23, 0.1);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}
.btn-kakao-mobile {
display: block;
width: 100%;
padding: 0.85rem;
background: linear-gradient(135deg, #FFE812 0%, #FDD835 100%);
background: #FFE812;
color: #000;
text-decoration: none;
border-radius: var(--radius-md);
font-weight: 700;
font-weight: 600;
text-align: center;
border: none;
cursor: pointer;
font-size: 0.95rem;
transition: all var(--transition-fast);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
letter-spacing: 0.3px;
transition: background var(--transition-fast);
}
.btn-kakao-mobile:hover {
background: linear-gradient(135deg, #FDD835 0%, #FBC02D 100%);
background: #FDD835;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.with-mobile-cta {
@@ -379,24 +367,26 @@ body.with-mobile-cta {
}
.navbar-brand {
font-weight: 800;
font-weight: 700;
color: var(--color-primary) !important;
font-size: 1.35rem;
letter-spacing: -0.5px;
font-size: 1.25rem;
}
.nav-link {
color: var(--color-text) !important;
font-weight: 600;
transition: all var(--transition-fast);
font-weight: 500;
transition: color var(--transition-fast);
margin: 0 var(--spacing-sm);
letter-spacing: 0.2px;
}
.nav-link:hover {
color: var(--color-primary) !important;
}
.nav-link.active {
color: var(--color-cta) !important;
}
/* ===== 반응형 ===== */
@media (max-width: 767.98px) {
h1 { font-size: 1.75rem; }
@@ -484,6 +474,10 @@ body.with-mobile-cta {
}
/* ===== 일반 유틸리티 ===== */
.text-primary {
color: var(--color-primary) !important;
}
.text-muted {
color: var(--color-text-light) !important;
}
@@ -522,7 +516,7 @@ img {
.service-card .card-title {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--color-text);
color: var(--color-primary);
}
.service-card ul li {
@@ -538,20 +532,20 @@ img {
.blog-placeholder {
height: 180px;
background: linear-gradient(135deg, rgba(200, 157, 110, 0.1) 0%, rgba(46, 92, 78, 0.1) 100%);
background: rgba(27, 79, 138, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(200, 157, 110, 0.3);
color: rgba(27, 79, 138, 0.3);
}
.blog-card:hover .blog-placeholder {
background: linear-gradient(135deg, rgba(200, 157, 110, 0.2) 0%, rgba(46, 92, 78, 0.2) 100%);
background: rgba(27, 79, 138, 0.14);
}
.bg-primary-badge {
background-color: rgba(200, 157, 110, 0.15) !important;
background-color: rgba(27, 79, 138, 0.1) !important;
color: var(--color-primary) !important;
}
@@ -581,7 +575,7 @@ img {
/* ===== 시즌 Hero ===== */
.hero-section--seasonal {
background: linear-gradient(135deg, #1F3A30 0%, #2E5C4E 60%, #3D7A68 100%);
background: linear-gradient(135deg, #133970 0%, #1B4F8A 60%, #2E5FA3 100%);
}
.bg-danger-badge {
background-color: rgba(198, 40, 40, 0.85) !important;
@@ -599,9 +593,8 @@ img {
height: 220px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.08);
background: rgba(255,255,255,0.1);
color: white;
backdrop-filter: blur(4px);
}
.deadline-label {
font-size: 0.85rem;
@@ -649,7 +642,7 @@ img {
}
.seasonal-blog-tag {
display: inline-block;
background: linear-gradient(135deg, #C62828 0%, #B71C1C 100%);
background: var(--color-cta);
color: white;
font-size: 0.82rem;
font-weight: 700;
@@ -723,7 +716,7 @@ img {
padding: 1.1rem 1.5rem;
}
.faq-question:not(.collapsed) {
color: var(--color-secondary);
color: var(--color-primary);
background: white;
box-shadow: none;
}
@@ -731,10 +724,10 @@ img {
filter: none;
}
.faq-question:focus {
box-shadow: 0 0 0 3px rgba(200, 157, 110, 0.2);
box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.2);
}
.faq-answer {
background: #fdfcfa;
background: #F7F9FC;
color: var(--color-text-light);
line-height: 1.85;
padding: 1rem 1.5rem 1.25rem;