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/Pages/Index.cshtml
+8 -8
View File
@@ -81,7 +81,7 @@ else
<span class="badge bg-primary-badge mb-3">경험 있는 세무사의 맞춤 전략</span>
<h1 class="mb-3">
세금과 자산<br/>
<span style="color: #E8E4D8;">한 번에 해결하는</span>
<span style="color: #FFD54F;">한 번에 해결하는</span>
</h1>
<p class="fs-5 mb-4" style="line-height: 1.8; opacity: 0.95;">
사업자 세무, 부동산 거래, 가족자산 관리를 위한<br/>
@@ -229,7 +229,7 @@ else
</section>
<!-- 상담 프로세스 -->
<section class="py-5" style="background: #F9F7F3;">
<section class="py-5" style="background: #F7F9FC;">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title">상담 과정</h2>
@@ -237,28 +237,28 @@ else
<div class="row align-items-center">
<div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
📞
</div>
<h4>1단계: 무료 상담</h4>
<p class="text-muted small">상황 파악 및<br/>현재 문제점 확인</p>
</div>
<div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
📋
</div>
<h4>2단계: 세무진단</h4>
<p class="text-muted small">자료 분석 및<br/>최적 방안 도출</p>
</div>
<div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
💡
</div>
<h4>3단계: 맞춤제안</h4>
<p class="text-muted small">절세 전략 및<br/>실행 계획 제시</p>
</div>
<div class="col-md-3 text-center">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
✅
</div>
<h4>4단계: 실행지원</h4>
@@ -355,7 +355,7 @@ else
<!-- 자주 묻는 질문 (DB 연동) -->
@if (Model.ActiveFaqs.Count > 0)
{
<section class="py-5" style="background: #F9F7F3;">
<section class="py-5" style="background: #F7F9FC;">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title">자주 묻는 질문</h2>
@@ -392,7 +392,7 @@ else
}
<!-- 최종 CTA -->
<section class="py-5" style="background: linear-gradient(135deg, #2E5C4E 0%, #1F3A30 100%); color: white;">
<section class="py-5" style="background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); color: white;">
<div class="container text-center">
@if (season != null)
{
TaxBaik.Web/Pages/_Layout.cshtml
+1 -1
View File
@@ -25,7 +25,7 @@
<!-- <meta name="google-site-verification" content="구글_서치콘솔_토큰_입력" /> -->
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#C89D6E" />
<meta name="theme-color" content="#1B4F8A" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
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;
TaxBaik.Web/wwwroot/maintenance.html
+10 -10
View File
@@ -8,8 +8,8 @@
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
body {
background: #F9F7F3;
color: #3D2817;
background: #F7F9FC;
color: #1A1A2E;
display: flex;
align-items: center;
justify-content: center;
@@ -23,12 +23,12 @@
background: #fff;
border-radius: 16px;
padding: 3rem 2.5rem;
box-shadow: 0 8px 32px rgba(61,40,23,.10);
box-shadow: 0 8px 32px rgba(0,0,0,.10);
}
.icon { font-size: 3.5rem; margin-bottom: 1.25rem; }
.badge {
display: inline-block;
background: #C89D6E;
background: #1B4F8A;
color: #fff;
font-size: 0.78rem;
font-weight: 700;
@@ -37,13 +37,13 @@
border-radius: 20px;
margin-bottom: 1.5rem;
}
h1 { font-size: 1.6rem; color: #2E5C4E; font-weight: 800; margin-bottom: 1rem; line-height: 1.35; }
p { color: #6B5D4F; line-height: 1.85; font-size: 0.95rem; }
.divider { border: none; border-top: 1px solid #EFE9DD; margin: 1.75rem 0; }
h1 { font-size: 1.6rem; color: #1B4F8A; font-weight: 800; margin-bottom: 1rem; line-height: 1.35; }
p { color: #5A6A7A; line-height: 1.85; font-size: 0.95rem; }
.divider { border: none; border-top: 1px solid #D8E2EE; margin: 1.75rem 0; }
.kakao-btn {
display: inline-block;
background: #FEE500;
color: #3D2817;
color: #1A1A2E;
text-decoration: none;
font-weight: 700;
padding: 0.65rem 1.5rem;
@@ -51,8 +51,8 @@
font-size: 0.95rem;
margin-top: 0.5rem;
}
.timer { font-size: 0.78rem; color: #A09080; margin-top: 1.5rem; }
.footer { font-size: 0.75rem; color: #C0ADA0; margin-top: 2rem; }
.timer { font-size: 0.78rem; color: #8A99A8; margin-top: 1.5rem; }
.footer { font-size: 0.75rem; color: #A8B5C2; margin-top: 2rem; }
</style>
</head>
<body>