/* ========== 全局主题变量（与原有融合） ========== */
:root {
--primary-color: #946325;
--secondary-color: #451b0c;
--accent-color: #e60013;
--patriotic-red: #d62828;
--patriotic-gold: #ffd166;
--text-dark: #333333;
--text-medium: #666666;
--text-light: #999999;
--bg-light: #f8f6f2;
--white-color: #ffffff;
--bg-white: #ffffff;
--border-color: #e0d9cf;
--shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.1);
--shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.15);
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--border-radius: 10px;
}
/* ========== 优化版Banner区域 - 明亮通透 + 微动背景 ========== */
.banner-container {
position: relative;
width: 100%;
height:850px;
max-height: 850px;
overflow: hidden;
margin-top:90px;
box-shadow: none;
}
.banner-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
will-change: transform, opacity;
overflow: hidden;
}
/* 背景图片微动效果 - 轻微缩放 + 缓慢漂移，增加生动感 */
/* 背景微动：active 时缓慢放大，增加生动感 */
.banner-slide::after {
content: '';
position: absolute; inset: 0;
background: inherit;
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 8s ease;
z-index: 0;
}
.banner-slide.active::after { transform: scale(1.08); }
.banner-slide::before { display: none; }
/* 背景图片资源 */
.banner-slide-1 { background-image: url('../images/banner01.jpg'); }
.banner-slide-2 { background-image: url('../images/banner02.jpg'); }
.banner-slide-3 { background-image: url('../images/banner03.jpg'); }
.banner-slide-4 { background-image: url('../images/banner04.jpg'); }
.banner-slide-5 { background-image: url('../images/banner05.jpg'); }
/* 内容容器 - 取消背景，完全透明，文字悬浮 */
.banner-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width:90%;
max-width: 1300px;
z-index: 3;
padding:20px 30px;
pointer-events: none;
}
/* 主标题 - 金红渐变 + 精致描边边框 + 立体阴影 */
.banner-title {
font-size: 4.5rem;
font-weight:800;
margin-bottom:30px;
letter-spacing: 1px;
line-height: 1.5;
color: #fff;                    /* 主标题颜色 */
-webkit-text-stroke:0px #fff;   /* 金色描边，3px宽度 */
text-stroke: 5px #fff;           /* 标准属性兼容 */
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* 增强可读性的阴影 */
background: none;                   /* 移除原有渐变背景 */
-webkit-background-clip: unset;
background-clip: unset;
position: relative;
opacity: 0;
transform: translateY(40px) scale(0.96);
transition: opacity 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
/* 副标题 - 暖白光泽，衬线装饰 */
.banner-subtitle {
font-size: 2.4rem;
font-weight: 600;
margin-bottom: 0;
letter-spacing: 2px;
color: #fff;
position: relative;
opacity: 0;
transform: translateY(35px);
transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
display: inline-block;
padding: 8px 25px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* 增强可读性的阴影 */
border-radius: 50px;
}
/* 顺序动画: 图片稳定后 主标题 → 副标题 */
.banner-slide.active .banner-title {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 0.3s;
}
.banner-slide.active .banner-subtitle {
opacity: 1;
transform: translateY(0);
transition-delay: 0.95s;
}
/* 指示器 (精致圆点) */
.banner-indicators {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 20;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.indicator.active {
background: var(--patriotic-gold);
width: 28px;
border-radius: 12px;
background: linear-gradient(90deg, #FFD966, #FFB347);
box-shadow: 0 0 12px rgba(255, 200, 70, 0.9);
}
.indicator:hover {
transform: scale(1.25);
background: #FFE5A3;
}
/* ========== 修复下方模块按钮/图切换背景不兼容问题 ========== */
/* 图片新闻轮播按钮优化 */
.yangjia-news-module .carousel-btn {
background: rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(8px);
border:0px solid rgba(255, 215, 0, 0.5);
color: #FFE6B3 !important;
transition: all 0.3s ease;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.2rem;
}
.yangjia-news-module .carousel-btn:hover {
background: var(--patriotic-red) !important;
color: white !important;
transform: scale(1.05);
border-color: var(--patriotic-gold);
}
/* 预订按钮、服务卡片统一风格 */
.booking-btn {
background: linear-gradient(135deg, var(--primary-color), #b57a3a);
border: none;
color: white;
padding: 12px 28px;
border-radius: 50px;
font-weight: 600;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.booking-btn:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, #b57a3a, var(--primary-color));
box-shadow: 0 10px 20px rgba(148, 99, 37, 0.3);
color: white;
}
.service-item {
background: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius);
transition: all 0.3s ease;
box-shadow: var(--shadow-light);
border: 1px solid rgba(148, 99, 37, 0.2);
}
.service-item:hover {
transform: translateY(-5px);
background: white;
box-shadow: var(--shadow-medium);
border-color: var(--primary-color);
}
.service-icon {
color: var(--primary-color);
}
/* 新闻列表文字背景优化 */
.news-item {
border-left:0px solid var(--primary-color);
transition: all 0.2s;
}
.news-item:hover {
background: #fffaf2;
transform: translateX(5px);
}
/* 时间卡片优化 */
.time-card {
background: linear-gradient(145deg, #fef7e8, #fff4e0);
border-radius: 20px;
box-shadow: 0 5px 12px rgba(0,0,0,0.05);
transition: all 0.2s;
}
.time-value {
color: var(--primary-color);
font-weight: 800;
}
/* 右侧服务区整体微调 */
.service-section {
background: rgba(255, 253, 245, 0.96);
border-radius: 28px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(2px);
}
/* 响应式优化 */
@media (max-width: 1200px) {
.banner-title { font-size: 3.2rem; letter-spacing: 2px; }
.banner-subtitle { font-size: 1.7rem; }
}
@media (max-width: 768px) {
.banner-container {
height: 70vh;
max-height: 550px;
margin-top: 70px;
}
.banner-title { font-size: 1.9rem; letter-spacing: 1px; -webkit-text-stroke: 0.5px rgba(255, 215, 0, 0.4);}
.banner-subtitle { font-size: 1rem; padding: 4px 18px; }
.banner-content { padding: 10px 16px; top: 50%; }
.banner-indicators { gap: 12px; bottom: 15px; padding: 6px 16px; }
.indicator.active { width: 20px; }
}
@media (max-width: 480px) {
.banner-title { font-size: 1.5rem; }
.banner-subtitle { font-size: 0.85rem; letter-spacing: 0; }
}