feat: revamp UI/UX of homepage & portal, clean warnings, and update ROADMAP_WBS
TaxBaik CI/CD / build-and-deploy (push) Successful in 54s
TaxBaik CI/CD / build-and-deploy (push) Successful in 54s
This commit is contained in:
@@ -746,3 +746,162 @@ img {
|
||||
.faq-answer ul li {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
/* ===== 프리미엄 고도화 & 마이크로 인터랙션 (2026-06-30) ===== */
|
||||
|
||||
/* 영어/숫자용 폰트 클래스 */
|
||||
.font-numeric, .font-heading-en {
|
||||
font-family: 'Outfit', 'Inter', 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
/* 히어로 섹션 프리미엄 개편 (메쉬 그라데이션 및 CSS 애니메이션) */
|
||||
.hero-section {
|
||||
background: radial-gradient(circle at 10% 20%, rgba(46, 92, 78, 1) 0%, rgba(31, 58, 48, 1) 44%, rgba(13, 30, 26, 1) 100%) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(200, 157, 110, 0.25) 0%, rgba(200, 157, 110, 0) 70%);
|
||||
border-radius: 50%;
|
||||
animation: floatAnimation 8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20%;
|
||||
left: -10%;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(232, 228, 216, 0.15) 0%, rgba(232, 228, 216, 0) 70%);
|
||||
border-radius: 50%;
|
||||
animation: floatAnimation2 12s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes floatAnimation {
|
||||
0% { transform: translateY(0px) scale(1); }
|
||||
50% { transform: translateY(-30px) scale(1.05); }
|
||||
100% { transform: translateY(0px) scale(1); }
|
||||
}
|
||||
|
||||
@keyframes floatAnimation2 {
|
||||
0% { transform: translateX(0px) rotate(0deg); }
|
||||
50% { transform: translateX(20px) translateY(15px) rotate(10deg); }
|
||||
100% { transform: translateX(0px) rotate(0deg); }
|
||||
}
|
||||
|
||||
/* 신뢰도 스트립 카드 리뉴얼 */
|
||||
.trust-strip {
|
||||
background-color: var(--color-bg-alt);
|
||||
padding: 3rem 0;
|
||||
margin-top: -1.5rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.trust-item {
|
||||
background: white;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem 1.5rem;
|
||||
box-shadow: 0 10px 30px rgba(61, 40, 23, 0.05);
|
||||
border: 1px solid rgba(200, 157, 110, 0.15);
|
||||
transition: all var(--transition-normal);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.trust-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(61, 40, 23, 0.1);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.trust-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.trust-item:hover .trust-icon {
|
||||
transform: scale(1.15) rotate(5deg);
|
||||
}
|
||||
|
||||
/* 서비스 카드 고도화 */
|
||||
.service-card {
|
||||
border: 1px solid rgba(217, 211, 196, 0.6) !important;
|
||||
box-shadow: 0 10px 25px rgba(61, 40, 23, 0.03) !important;
|
||||
transition: all var(--transition-normal) !important;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-8px) !important;
|
||||
box-shadow: 0 20px 40px rgba(61, 40, 23, 0.1) !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.service-card--featured {
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
|
||||
border-left: 4px solid var(--color-primary) !important;
|
||||
}
|
||||
|
||||
/* 글래스모피즘 포털 클래스 (Glassmorphism Portal Classes) */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
backdrop-filter: blur(12px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4) !important;
|
||||
box-shadow: 0 8px 32px 0 rgba(61, 40, 23, 0.05) !important;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
box-shadow: 0 8px 32px 0 rgba(61, 40, 23, 0.08) !important;
|
||||
}
|
||||
|
||||
.portal-welcome-strip {
|
||||
background: linear-gradient(135deg, var(--color-secondary-dark) 0%, #152A22 100%);
|
||||
border-radius: var(--radius-lg);
|
||||
color: white;
|
||||
padding: 2.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* 타임라인 컴포넌트 뷰티화 */
|
||||
.timeline-item-modern {
|
||||
border-left: 2px solid rgba(200, 157, 110, 0.4);
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.timeline-item-modern::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
left: -7px;
|
||||
top: 6px;
|
||||
box-shadow: 0 0 0 4px rgba(200, 157, 110, 0.25);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.timeline-item-modern:hover::after {
|
||||
background: var(--color-secondary);
|
||||
box-shadow: 0 0 0 6px rgba(46, 92, 78, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user