/* 重置和基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', 'SimSun', serif;
background: linear-gradient(180deg, #f8f4e6 0%, #f2e8d4 50%, #eee2d0 100%);
background-attachment: fixed;
min-height: 100vh;
overflow-x: hidden;
color: #6a5f54;
position: relative;
font-size: 18px;
}
/* 响应式媒体内容 */
img,
video,
iframe {
max-width: 100%;
height: auto;
}
/* 确保容器在小屏幕上正常工作 */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
}
/* 防止iframe滚动影响主页面 */
.chat-iframe-container {
contain: layout style paint;
}
.chat-iframe-container iframe {
contain: layout style paint size;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 90px 20px 0;
}
/* 开始学习之旅板块样式 */
.start-journey-section {
padding: 60px 0 80px;
background: linear-gradient(135deg,
rgba(200, 149, 109, 0.1) 0%,
rgba(248, 244, 230, 0.8) 50%,
rgba(200, 149, 109, 0.1) 100%);
position: relative;
overflow: hidden;
text-align: center;
}
.start-journey-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to bottom, transparent, rgba(248, 244, 230, 0.8));
pointer-events: none;
}
.start-journey-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 100px 100px;
animation: sparkle 10s infinite linear;
z-index: -1;
}
@keyframes sparkle {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-100px) translateY(-100px); }
}
.journey-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.welcome-message {
position: relative;
}
.welcome-message h2 {
font-size: 3.5rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 25px;
background: linear-gradient(45deg, #8b7a68, #c8956d, #8b7a68);
background-size: 200% 200%;
animation: titleGradient 4s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
@keyframes titleGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.journey-subtitle {
font-size: 1.4rem;
line-height: 1.6;
color: #6a5f54;
margin-bottom: 40px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.pulse-button {
background: linear-gradient(135deg, #c8956d, #8b7a68);
border: none;
color: white;
font-size: 1.3rem;
font-weight: 700;
padding: 18px 40px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(200, 149, 109, 0.3);
position: relative;
overflow: hidden;
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 8px 25px rgba(200, 149, 109, 0.3);
transform: scale(1);
}
50% {
box-shadow: 0 12px 35px rgba(200, 149, 109, 0.5);
transform: scale(1.02);
}
}
.pulse-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.pulse-button:hover::before {
left: 100%;
}
.pulse-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(200, 149, 109, 0.4);
background: linear-gradient(135deg, #d4a374, #9a8773);
animation: none;
}
.pulse-button:active {
transform: translateY(-1px) scale(1.02);
}
/* 响应式设计 */
@media (max-width: 768px) {
.start-journey-section {
padding: 40px 0 60px;
}
.welcome-message h2 {
font-size: 2.5rem;
}
.journey-subtitle {
font-size: 1.2rem;
margin-bottom: 30px;
}
.pulse-button {
font-size: 1.1rem;
padding: 15px 30px;
}
}
/* 导航栏样式 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(248, 244, 230, 0.95);
backdrop-filter: blur(15px);
z-index: 1000;
border-bottom: 1px solid rgba(139, 122, 104, 0.2);
box-shadow: 0 2px 20px rgba(139, 122, 104, 0.1);
transition: all 0.3s ease;
}
.navbar.scrolled {
background: rgba(248, 244, 230, 0.98);
border-bottom-color: rgba(139, 122, 104, 0.3);
box-shadow: 0 4px 30px rgba(139, 122, 104, 0.15);
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2rem;
font-weight: 700;
color: #8b7a68;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-logo .logo-icon {
height: 50px;
width: auto;
object-fit: contain;
}
.nav-logo:hover {
transform: scale(1.05);
color: #c8956d;
}
.logo-text {
font-family: 'Arial', 'Helvetica', sans-serif !important;
font-weight: 600;
}
.nav-menu {
display: flex;
align-items: center;
gap: 18px;
position: relative;
justify-content: center;
flex: 1;
margin: 0 20px;
flex-wrap: nowrap;
overflow: visible;
}
.nav-link {
text-decoration: none;
color: #6a5f54;
font-weight: 600;
font-size: 17px;
padding: 10px 16px;
border-radius: 25px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
white-space: nowrap;
flex-shrink: 0;
}
/* 为中文导航链接提供更清晰的显示 */
.nav-link[data-zh] {
font-size: 20px;
font-weight: 700;
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
}
/* 为法语导航链接提供清晰的显示 */
.nav-link[data-fr] {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.3px;
}
/* 法语版本被选中状态不加粗 */
.nav-link.active[data-fr] {
font-weight: 600;
}
.nav-link:hover {
color: #8b7a68;
}
.nav-link.active {
color: #8b7a68;
font-weight: 700;
}
.nav-link.active::before {
display: none;
}
.nav-indicator {
position: absolute;
bottom: -5px;
height: 3px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
border-radius: 2px;
transition: all 0.3s ease;
opacity: 0;
}
.nav-actions {
display: flex;
align-items: center;
gap: 15px;
}
.lang-btn {
background: rgba(139, 122, 104, 0.8);
border: 2px solid rgba(139, 122, 104, 0.9);
color: white;
padding: 6px 14px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
font-weight: 600;
box-shadow: 0 2px 10px rgba(139, 122, 104, 0.2);
min-width: 50px;
text-align: center;
font-size: 12px;
}
.lang-btn:hover {
background: rgba(139, 122, 104, 0.9);
border-color: rgba(139, 122, 104, 1);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(139, 122, 104, 0.3);
}
.login-btn {
background: #8b7a68;
border: none;
color: white;
padding: 8px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 15px rgba(139, 122, 104, 0.3);
position: relative;
overflow: hidden;
}
.login-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.login-btn:hover::before {
left: 100%;
}
.login-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 20px rgba(139, 122, 104, 0.4);
background: #9a8773;
}
.login-btn:active {
transform: translateY(0) scale(1.02);
}
.login-icon {
font-size: 16px;
animation: rocket-float 2s ease-in-out infinite;
}
@keyframes rocket-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes rocket-launch {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(5deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.mobile-menu-btn {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 5px;
gap: 3px;
}
.mobile-menu-btn span {
width: 25px;
height: 3px;
background: #8b7a68;
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-btn:hover span {
background: #c8956d;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* 移动端响应式 */
@media (max-width: 768px) {
.nav-container {
padding: 0 15px;
height: 50px;
max-width: 100%;
}
.nav-logo {
font-size: 1rem;
flex-shrink: 0;
}
.nav-logo .logo-icon {
height: 40px;
width: auto;
}
/* 确保所有内容区域适应小屏幕 */
.container {
padding: 70px 15px 0;
max-width: 100%;
}
/* 主要内容区域间距调整 */
.hero,
.interactive-section,
.start-journey-section {
padding: 40px 0 60px;
}
/* 文字大小调整 */
.glitch-text {
font-size: 2.2rem;
line-height: 1.2;
}
.subtitle {
font-size: 1.1rem;
margin-bottom: 25px;
}
/* 按钮适应 */
.pulse-button {
font-size: 1rem;
padding: 18px 35px;
margin: 10px auto;
}
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(248, 244, 230, 0.98);
flex-direction: column;
gap: 8px;
padding: 25px 20px;
box-shadow: 0 4px 20px rgba(139, 122, 104, 0.2);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
margin: 0;
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-actions {
gap: 8px;
}
.login-btn {
padding: 6px 12px;
font-size: 12px;
gap: 4px;
}
.login-btn .login-text {
display: none;
}
.login-icon {
font-size: 14px;
}
.nav-link {
padding: 15px 25px;
width: 100%;
text-align: center;
border-radius: 15px;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
}
/* 移动端中文导航文字样式 */
.nav-link[data-zh] {
font-size: 19px;
font-weight: 700;
}
/* 移动端法语导航文字样式 */
.nav-link[data-fr] {
font-size: 17px;
font-weight: 600;
}
.mobile-menu-btn {
display: flex;
}
.nav-indicator {
display: none;
}
}
/* AI对话演示区域 */
.chat-demo-section {
padding: 60px 0 80px;
background: linear-gradient(135deg,
rgba(248, 244, 230, 0.4) 0%,
rgba(240, 232, 217, 0.6) 100%);
position: relative;
}
.chat-demo-section::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(200, 149, 109, 0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: pulse-soft 4s ease-in-out infinite;
}
@keyframes pulse-soft {
0%, 100% {
transform: translateX(-50%) scale(1);
opacity: 0.3;
}
50% {
transform: translateX(-50%) scale(1.2);
opacity: 0.6;
}
}
.chat-demo-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.chat-demo-layout {
display: flex;
align-items: center;
gap: 40px;
min-height: 800px;
}
.chat-demo-sidebar {
flex: 0 0 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 800px;
position: relative;
}
.vertical-title {
writing-mode: vertical-rl;
text-orientation: upright;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.vertical-title h3 {
font-size: 2.5rem;
font-weight: 700;
color: #8b7a68;
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
letter-spacing: 0.2em;
line-height: 1.3;
margin: 0;
transition: all 0.3s ease;
}
.vertical-description {
writing-mode: vertical-rl;
text-orientation: upright;
transition: all 0.3s ease;
}
.vertical-description p {
font-size: 1.2rem;
color: #6a5f54;
opacity: 0.8;
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
letter-spacing: 0.1em;
line-height: 1.4;
margin: 0;
transition: all 0.3s ease;
}
/* 法语版本的特殊样式 - AI对话窗口左侧横向排版 */
.lang-fr .chat-demo-layout {
flex-direction: row;
gap: 30px;
align-items: stretch;
}
.lang-fr .chat-demo-sidebar {
flex: 0 0 320px;
width: 320px;
height: 800px;
padding: 30px 25px;
background: linear-gradient(180deg,
rgba(248, 244, 230, 0.6) 0%,
rgba(235, 226, 210, 0.8) 50%,
rgba(248, 244, 230, 0.6) 100%);
border-radius: 20px;
margin: 0;
box-shadow:
0 15px 35px rgba(139, 122, 104, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
.lang-fr .vertical-title {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
margin-bottom: 25px;
margin-right: 0;
width: 100%;
}
.lang-fr .vertical-title h3 {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3;
color: #8b7a68;
text-shadow: 2px 2px 8px rgba(139, 122, 104, 0.1);
margin: 0 0 20px 0;
text-align: left;
/* 单词从左往右排列 */
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.lang-fr .vertical-description {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
width: 100%;
}
.lang-fr .vertical-description p {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 1rem;
letter-spacing: 0.01em;
line-height: 1.4;
color: #6a5f54;
opacity: 0.95;
margin: 0;
font-weight: 400;
text-align: left;
/* 单词从左往右排列 */
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* 单词列样式 - 横向排列 */
.word-column {
display: inline-block;
padding: 6px 12px;
margin: 3px;
background: linear-gradient(135deg, rgba(248, 244, 230, 0.6), rgba(235, 226, 210, 0.4));
border-radius: 12px;
border-bottom: 2px solid rgba(139, 122, 104, 0.3);
transition: all 0.3s ease;
position: relative;
box-shadow: 0 2px 6px rgba(139, 122, 104, 0.08);
}
.word-column:hover {
background: linear-gradient(135deg, rgba(248, 244, 230, 0.8), rgba(235, 226, 210, 0.6));
border-bottom-color: rgba(139, 122, 104, 0.6);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(139, 122, 104, 0.15);
}
/* 标题中的单词列样式 */
.vertical-title .word-column {
font-size: 1.6rem;
font-weight: 700;
padding: 8px 16px;
margin: 4px;
background: linear-gradient(135deg, rgba(248, 244, 230, 0.7), rgba(235, 226, 210, 0.5));
border-bottom: 3px solid rgba(139, 122, 104, 0.4);
box-shadow: 0 3px 8px rgba(139, 122, 104, 0.1);
}
.vertical-title .word-column:hover {
background: linear-gradient(135deg, rgba(248, 244, 230, 0.9), rgba(235, 226, 210, 0.7));
border-bottom-color: rgba(139, 122, 104, 0.7);
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(139, 122, 104, 0.2);
}
/* 用户评价板块样式 */
.testimonials-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(248, 244, 230, 0.3) 0%,
rgba(235, 226, 210, 0.4) 50%,
rgba(248, 244, 230, 0.3) 100%);
position: relative;
}
.testimonials-section::after {
content: '✦ ✧ ✦';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
color: rgba(139, 122, 104, 0.3);
font-size: 1.5rem;
letter-spacing: 1rem;
text-shadow: 0 0 15px rgba(139, 122, 104, 0.2);
pointer-events: none;
animation: gentle-glow 3s ease-in-out infinite;
}
.testimonials-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 简单文字好评样式 */
.simple-testimonials {
margin-bottom: 60px;
}
.simple-testimonial {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 16px;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
position: relative;
overflow: hidden;
}
.simple-testimonial::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
rgba(200, 149, 109, 0.6) 0%,
rgba(139, 122, 104, 0.8) 50%,
rgba(200, 149, 109, 0.6) 100%);
}
.testimonial-stars {
font-size: 1.2rem;
margin-bottom: 15px;
text-align: center;
}
.testimonial-text {
font-size: 1.1rem;
line-height: 1.6;
color: #6a5f54;
font-style: italic;
text-align: center;
margin-bottom: 20px;
}
.testimonial-author {
text-align: center;
font-weight: 600;
color: #8b7a68;
font-size: 1rem;
}
/* 专业好评样式 */
.professional-testimonials {
margin-top: 80px;
}
.professional-title {
text-align: center;
font-size: 2.2rem;
color: #8b7a68;
margin-bottom: 50px;
font-weight: 700;
position: relative;
}
.professional-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg,
rgba(200, 149, 109, 0.6) 0%,
rgba(139, 122, 104, 0.8) 50%,
rgba(200, 149, 109, 0.6) 100%);
border-radius: 2px;
}
.professional-testimonial {
display: flex;
gap: 25px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
padding: 35px;
border-radius: 20px;
margin-bottom: 40px;
box-shadow: 0 12px 35px rgba(139, 122, 104, 0.12);
border: 1px solid rgba(200, 149, 109, 0.25);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.professional-testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(139, 122, 104, 0.18);
}
.professional-testimonial::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg,
rgba(200, 149, 109, 0.8) 0%,
rgba(139, 122, 104, 0.9) 50%,
rgba(200, 149, 109, 0.8) 100%);
}
.testimonial-avatar {
flex-shrink: 0;
}
.testimonial-avatar img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(139, 122, 104, 0.2);
box-shadow: 0 4px 12px rgba(139, 122, 104, 0.1);
}
.testimonial-content {
flex: 1;
}
.testimonial-header {
margin-bottom: 20px;
}
.author-name {
font-size: 1.4rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 5px;
}
.author-title {
font-size: 1rem;
color: #6a5f54;
opacity: 0.9;
margin-bottom: 10px;
font-style: italic;
}
.professional-testimonial .testimonial-stars {
text-align: left;
margin: 0;
}
.professional-testimonial .testimonial-text {
font-size: 1.05rem;
text-align: left;
font-style: normal;
line-height: 1.7;
color: #6a5f54;
}
.chat-iframe-container {
position: relative;
flex: 1;
height: 800px;
border-radius: 20px;
overflow: hidden;
isolation: isolate;
box-shadow:
0 20px 40px rgba(139, 122, 104, 0.2),
inset 0 0 0 8px rgba(248, 244, 230, 0.9),
inset 0 0 0 12px rgba(139, 122, 104, 0.3),
inset 0 0 0 16px rgba(248, 244, 230, 0.9);
border: 4px solid rgba(139, 122, 104, 0.4);
background: linear-gradient(45deg,
rgba(248, 244, 230, 0.95) 0%,
rgba(240, 230, 210, 0.95) 50%,
rgba(232, 221, 199, 0.95) 100%);
}
.chat-iframe-container iframe {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
width: calc(100% - 32px);
height: calc(100% - 32px);
border: none;
border-radius: 12px;
transform: scale(1);
transform-origin: center center;
overflow: hidden;
pointer-events: auto;
}
.iframe-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(248, 244, 230, 0.95);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.iframe-overlay:hover {
background: rgba(248, 244, 230, 0.85);
transform: scale(1.02);
}
.overlay-content {
text-align: center;
}
.play-icon {
font-size: 4rem;
color: #8b7a68;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.iframe-overlay:hover .play-icon {
transform: scale(1.2);
color: #c8956d;
}
.iframe-overlay p {
font-size: 1.3rem;
font-weight: 600;
color: #8b7a68;
margin: 0;
}
/* 英雄区域 */
.hero {
text-align: center;
padding: 60px 0 60px;
position: relative;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to bottom, transparent, rgba(248, 244, 230, 0.6));
pointer-events: none;
}
.logo {
margin-bottom: 30px;
}
.site-title {
font-size: 4rem;
font-weight: 900;
position: relative;
margin-bottom: 10px;
background: linear-gradient(45deg, #ffeb3b, #ff9800, #e91e63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite;
}
.tagline {
font-size: 1.4rem;
opacity: 0.9;
font-weight: 300;
margin-bottom: 30px;
}
@keyframes titleGlow {
0%, 100% {
filter: drop-shadow(0 0 10px rgba(255, 235, 59, 0.5));
}
50% {
filter: drop-shadow(0 0 20px rgba(255, 152, 0, 0.8));
}
}
.company-info {
margin-top: 20px;
opacity: 0.8;
font-size: 1.1rem;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch-text::before {
animation: glitch-1 0.5s infinite;
color: #ff0040;
z-index: -1;
}
.glitch-text::after {
animation: glitch-2 0.5s infinite;
color: #00ff40;
z-index: -2;
}
@keyframes glitch {
0%, 74%, 76%, 100% {
transform: translate(0);
}
75% {
transform: translate(-2px, 2px);
}
}
@keyframes glitch-1 {
0%, 74%, 76%, 100% {
transform: translate(0);
}
75% {
transform: translate(2px, -2px);
}
}
@keyframes glitch-2 {
0%, 74%, 76%, 100% {
transform: translate(0);
}
75% {
transform: translate(-2px, -2px);
}
}
.subtitle {
font-size: 1.7rem;
opacity: 0;
animation: fadeInUp 1s ease-out 0.5s forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 字卡展示区域 */
.word-cards-section {
padding: 40px 0;
position: relative;
background: linear-gradient(135deg,
rgba(235, 226, 210, 0.3) 0%,
rgba(248, 244, 230, 0.5) 100%);
}
.word-cards-section::after {
content: '';
position: absolute;
bottom: -30px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(139, 122, 104, 0.1) 20%,
rgba(200, 149, 109, 0.2) 50%,
rgba(139, 122, 104, 0.1) 80%,
transparent 100%);
pointer-events: none;
}
.word-cards-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
height: 700px;
overflow: hidden;
perspective: 1500px;
}
.word-cards-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.word-card {
position: absolute;
top: 50%;
left: 50%;
width: 650px;
height: 650px;
transform: translate(-50%, -50%);
background: transparent;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.word-card.active {
z-index: 3;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.word-card.next {
z-index: 2;
transform: translate(-45%, -50%) scale(0.95) rotateY(-5deg);
opacity: 0.7;
}
.word-card.prev {
z-index: 2;
transform: translate(-55%, -50%) scale(0.95) rotateY(5deg);
opacity: 0.7;
}
.word-card:not(.active):not(.next):not(.prev) {
z-index: 1;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
}
.card-image {
width: 100%;
height: 85%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: linear-gradient(135deg, rgba(248, 244, 230, 0.1), rgba(240, 230, 210, 0.1));
}
.card-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
border: 3px solid rgba(255, 255, 255, 0.9);
}
.word-card:hover .card-image img {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.15);
}
.card-content {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
text-align: center;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 12px 24px;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 0.8);
min-width: 280px;
}
.chinese-char {
font-size: 1.8rem;
font-weight: 600;
color: #8b7a68;
margin-bottom: 8px;
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
text-shadow: 0 1px 3px rgba(139, 122, 104, 0.1);
}
.description {
font-size: 1.3rem;
color: #6a5f54;
line-height: 1.4;
margin: 0;
opacity: 0.85;
}
.cards-navigation {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: rgba(180, 147, 111, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot.active {
background: #8b7a68;
transform: scale(1.3);
}
.nav-dot:hover {
background: rgba(139, 122, 104, 0.6);
transform: scale(1.1);
}
/* 字卡响应式设计 */
@media (max-width: 768px) {
.word-cards-container {
height: 500px;
padding: 0 15px;
}
.word-card {
width: 480px;
height: 480px;
}
.chinese-char {
font-size: 1.3rem;
}
.card-content {
padding: 10px 20px;
min-width: 220px;
}
.description {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.word-cards-container {
height: 420px;
}
.word-card {
width: 380px;
height: 380px;
}
.chinese-char {
font-size: 1.1rem;
}
.card-content {
padding: 8px 16px;
min-width: 180px;
}
.description {
font-size: 0.9rem;
}
}
/* 特色功能区域 */
.features-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(240, 232, 217, 0.4) 0%,
rgba(235, 226, 210, 0.6) 100%);
position: relative;
}
.features-section::after {
content: '✦';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
color: rgba(200, 149, 109, 0.3);
font-size: 2rem;
text-shadow: 0 0 20px rgba(200, 149, 109, 0.2);
pointer-events: none;
animation: gentle-glow 3s ease-in-out infinite;
}
@keyframes gentle-glow {
0%, 100% {
opacity: 0.3;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 0.6;
transform: translateX(-50%) scale(1.1);
}
}
.section-title {
text-align: center;
font-size: 3.5rem;
margin-bottom: 50px;
font-weight: 700;
}
/* 卡片区域 */
.cards-section {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
padding: 0;
max-width: 1200px;
margin: 0 auto;
}
.card {
height: 240px;
perspective: 1000px;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flip-card:hover .card-inner {
transform: rotateY(180deg);
}
.card.animate-in {
opacity: 1;
transform: translateY(0);
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-style: preserve-3d;
cursor: pointer;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card.active-card {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(200, 149, 109, 0.3);
}
.card.active-card .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.card-front {
background: linear-gradient(45deg, #ff9800, #ffc107);
}
.card-back {
background: linear-gradient(45deg, #e91e63, #9c27b0);
transform: rotateY(180deg);
}
.card h3 {
font-size: 2.2rem;
margin-bottom: 10px;
color: #8b7a68;
}
.card p {
font-size: 1.2rem;
line-height: 1.5;
color: #6a5f54;
}
.card-back p {
font-size: 1.3rem;
line-height: 1.5;
text-align: left;
color: #5a4f44;
}
.floating {
animation: float 6s ease-in-out infinite;
}
.floating:nth-child(2) {
animation-delay: -2s;
}
.floating:nth-child(3) {
animation-delay: -4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* 详情滑出式窗口样式 */
.feature-detail-slide {
position: relative;
width: 100%;
max-height: 0;
overflow: hidden;
background: linear-gradient(135deg, #f8f4e6 0%, #f2e8d4 100%);
border-radius: 0 0 20px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
margin-top: 30px;
opacity: 0;
transform: translateY(-10px);
}
.feature-detail-slide.show {
max-height: 500px;
opacity: 1;
transform: translateY(0);
transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.6s ease 0.2s,
transform 0.6s ease 0.2s;
}
.detail-slide-content {
padding: 0;
position: relative;
height: 500px;
overflow: hidden;
}
/* 详情内容溶解过渡效果 */
.detail-slide-wrapper {
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.detail-slide-wrapper.fade-in {
transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.detail-slide-wrapper.fade-out {
opacity: 0;
transform: translateY(10px);
}
.detail-slide-wrapper.fade-in {
opacity: 1;
transform: translateY(0);
}
.detail-slide-wrapper {
display: flex;
height: 100%;
overflow: hidden;
}
.detail-slide-image {
flex: 1;
position: relative;
background: linear-gradient(135deg, rgba(200, 149, 109, 0.05) 0%, rgba(248, 244, 230, 0.15) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px 20px 50px 20px;
overflow: visible;
min-height: 500px;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(200, 149, 109, 0.02) 0%, rgba(248, 244, 230, 0.05) 100%);
pointer-events: none;
}
.overlay-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(200, 149, 109, 0.1) 1px, transparent 1px),
radial-gradient(circle at 80% 50%, rgba(200, 149, 109, 0.1) 1px, transparent 1px);
background-size: 60px 60px, 60px 60px;
background-position: 0 0, 30px 30px;
opacity: 0.3;
}
.slide-image {
max-width: 100%;
max-height: 100%;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
transition: transform 0.4s ease;
position: relative;
z-index: 2;
}
.slide-image:hover {
transform: scale(1.05);
}
/* 图片轮播样式 */
.image-carousel {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 10;
}
.carousel-container {
flex: 1;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.8);
min-height: 400px;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scale(0.95);
transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
}
.carousel-item.active {
opacity: 1;
transform: scale(1);
}
.carousel-item .slide-image {
width: 100%;
height: 85%;
object-fit: contain;
border-radius: 15px;
background: rgba(248, 244, 230, 0.3);
}
.image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15%;
padding: 8px 15px;
background: linear-gradient(135deg, rgba(139, 122, 104, 0.85) 0%, rgba(106, 95, 84, 0.9) 100%);
border-radius: 0 0 15px 15px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.image-caption p {
font-size: 1.1rem;
line-height: 1.3;
color: #f8f4e6;
text-align: center;
margin: 0;
font-weight: 600;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* 侧边导航按钮样式 - 简洁箭头设计 */
.carousel-btn.side-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: none;
background: none;
color: rgba(139, 122, 104, 0.8);
font-size: 24px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 20;
text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
}
.carousel-btn.prev-btn {
left: -40px;
}
.carousel-btn.next-btn {
right: -40px;
display: none;
}
.carousel-btn.side-btn:hover {
transform: translateY(-50%) scale(1.3);
color: rgba(200, 149, 109, 1);
text-shadow: 0 3px 12px rgba(255, 255, 255, 1);
}
.carousel-btn.side-btn:active {
transform: translateY(-50%) scale(1.1);
}
/* 底部导航点样式 */
.carousel-dots-only {
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 8px 15px;
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 20;
}
.carousel-dot {
width: 10px;
height: 10px;
border: none;
background: rgba(200, 149, 109, 0.3);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-dot.active {
background: #c8956d;
transform: scale(1.3);
box-shadow: 0 0 10px rgba(200, 149, 109, 0.5);
}
.carousel-dot:hover {
background: rgba(200, 149, 109, 0.6);
transform: scale(1.2);
}
.detail-slide-text {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 244, 230, 0.4) 100%);
position: relative;
overflow-y: auto;
}
.slide-header {
margin-bottom: 25px;
position: relative;
}
.slide-header h3 {
font-size: 2.2rem;
color: #8b7a68;
font-weight: 700;
line-height: 1.3;
margin-bottom: 10px;
}
.title-decoration {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #c8956d, #ff9800);
border-radius: 2px;
position: relative;
margin-bottom: 15px;
}
.title-decoration::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: #c8956d;
border-radius: 50%;
opacity: 0.6;
}
.slide-description {
font-size: 1.2rem;
line-height: 1.7;
color: #6a5f54;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(200, 149, 109, 0.15);
text-align: justify;
}
.slide-features h4 {
font-size: 1.4rem;
color: #8b7a68;
margin-bottom: 15px;
font-weight: 600;
}
.slide-features-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.slide-features-list li {
margin-bottom: 12px;
padding-left: 25px;
position: relative;
font-size: 1.1rem;
line-height: 1.6;
color: #5a4f44;
transition: all 0.3s ease;
}
.slide-features-list li:hover {
color: #8b7a68;
transform: translateX(5px);
}
.slide-features-list li::before {
content: '✦';
position: absolute;
left: 0;
top: 2px;
color: #c8956d;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.slide-features-list li:hover::before {
color: #ff9800;
transform: rotate(45deg) scale(1.2);
}
/* 平板响应式设计 */
@media (max-width: 1024px) {
.nav-container {
max-width: 100%;
padding: 0 20px;
}
.nav-menu {
gap: 8px;
margin: 0 15px;
}
.nav-link {
padding: 8px 12px;
font-size: 15px;
}
.nav-link[data-zh] {
font-size: 16px;
}
.nav-link[data-fr] {
font-size: 15px;
letter-spacing: -0.2px;
}
.cards-section {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.feature-detail-slide.show {
max-height: 450px;
}
.detail-slide-content {
height: 450px;
}
.detail-slide-wrapper {
flex-direction: column;
}
.detail-slide-image,
.detail-slide-text {
flex: none;
}
.detail-slide-image {
height: 40%;
padding: 15px 15px 45px 15px;
}
.carousel-item .slide-image {
height: 80%;
}
.image-caption {
height: 20%;
padding: 6px 12px;
}
.image-caption p {
font-size: 1rem;
line-height: 1.2;
}
.detail-slide-text {
height: 60%;
padding: 20px 30px;
}
.slide-header h3 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.cards-section {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 20px;
}
.card {
height: 220px;
}
.feature-detail-slide.show {
max-height: 600px;
}
.detail-slide-content {
height: 600px;
}
.detail-slide-wrapper {
flex-direction: column;
}
.detail-slide-image {
height: 35%;
padding: 10px 10px 40px 10px;
}
.carousel-dots-only {
bottom: -30px;
padding: 6px 12px;
}
.carousel-btn.side-btn {
width: 28px;
height: 28px;
font-size: 20px;
}
.carousel-btn.prev-btn {
left: -35px;
}
.carousel-btn.next-btn {
right: -35px;
display: none;
}
.carousel-btn.side-btn {
width: 25px;
height: 25px;
font-size: 18px;
}
.carousel-btn.prev-btn {
left: -30px;
}
.carousel-btn.next-btn {
right: -30px;
display: none;
}
.carousel-dot {
width: 8px;
height: 8px;
}
.carousel-item .slide-image {
height: 75%;
}
.image-caption {
height: 25%;
padding: 5px 10px;
}
.image-caption p {
font-size: 0.95rem;
line-height: 1.2;
}
.detail-slide-text {
height: 65%;
padding: 20px;
overflow-y: auto;
}
.slide-header h3 {
font-size: 1.6rem;
}
.slide-description {
font-size: 1.1rem;
}
.slide-features-list li {
font-size: 1rem;
}
}
/* 交互区域 */
.interactive-section {
text-align: center;
padding: 100px 0;
position: relative;
}
.welcome-message {
max-width: 600px;
margin: 0 auto;
}
.welcome-message h2 {
font-size: 4.2rem;
margin-bottom: 40px;
font-weight: 800;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.pulse-button {
background: linear-gradient(45deg, #ff5722, #ff9800);
border: none;
padding: 20px 40px;
font-size: 1.3rem;
color: white;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
font-weight: 600;
box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4);
}
.pulse-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
z-index: -1;
}
.pulse-button:hover::before {
left: 100%;
}
.pulse-button:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.pulse-button:active {
transform: scale(0.98);
}
/* 底部 */
.footer {
padding: 80px 0 40px;
text-align: center;
}
.footer-content p {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.9;
}
.wave-text {
font-size: 2.8rem;
font-weight: bold;
letter-spacing: 0.15em;
color: #8b7a68;
text-shadow: 2px 2px 4px rgba(139, 122, 104, 0.2);
}
.wave-text span {
display: inline-block;
animation: elegantWave 4s ease-in-out infinite;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.8;
}
.wave-text:hover span {
animation-play-state: paused;
transform: translateY(-10px) scale(1.08);
color: #a68b5b;
opacity: 1;
text-shadow: 3px 3px 6px rgba(139, 122, 104, 0.3);
}
@keyframes elegantWave {
0%, 70%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
35% {
transform: translateY(-12px) rotate(2deg);
opacity: 1;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.glitch-text {
font-size: 2.5rem;
}
.cards-section {
grid-template-columns: 1fr;
gap: 20px;
}
.card {
height: 180px;
}
.container {
padding: 0 15px;
}
.hero {
padding: 60px 0;
}
.interactive-section {
padding: 60px 0;
}
.wave-text {
font-size: 1.5rem;
}
/* 对话演示区域移动端优化 */
.chat-demo-section {
padding: 40px 0 60px;
}
.chat-demo-container {
max-width: 100%;
padding: 0 15px;
}
.chat-demo-layout {
flex-direction: column;
gap: 20px;
min-height: auto;
}
.chat-demo-sidebar {
flex: none;
height: auto;
text-align: center;
margin-bottom: 20px;
}
.vertical-title,
.vertical-description {
writing-mode: horizontal-tb;
text-orientation: mixed;
}
.vertical-title h3 {
font-size: 1.8rem;
margin-bottom: 10px;
}
.vertical-description p {
font-size: 1rem;
margin-bottom: 0;
}
/* 平板法语版本样式 */
.lang-fr .chat-demo-layout {
flex-direction: column;
gap: 20px;
}
.lang-fr .chat-demo-sidebar {
flex: none;
width: 100%;
height: auto;
padding: 20px 25px;
text-align: center;
}
.lang-fr .vertical-title {
margin-bottom: 15px;
text-align: center;
}
.lang-fr .vertical-title h3 {
font-size: 2rem;
text-align: center;
}
.lang-fr .vertical-description p {
font-size: 1.1rem;
line-height: 1.4;
text-align: center;
}
/* 平板端单词列样式 */
.word-column {
padding: 3px 6px;
margin: 1px 0;
font-size: 0.95rem;
}
.vertical-title .word-column {
font-size: 1.5rem;
padding: 4px 8px;
margin: 2px 0;
}
.chat-iframe-container {
height: 600px;
margin: 0;
box-shadow:
0 15px 30px rgba(139, 122, 104, 0.2),
inset 0 0 0 6px rgba(248, 244, 230, 0.9),
inset 0 0 0 9px rgba(139, 122, 104, 0.3),
inset 0 0 0 12px rgba(248, 244, 230, 0.9);
}
.chat-iframe-container iframe {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
width: calc(100% - 32px);
height: calc(100% - 32px);
border: none;
border-radius: 12px;
transform-origin: center bottom; /* 关键修改：变换原点设为底部中心 */
overflow: hidden;
pointer-events: auto;
}
.play-icon {
font-size: 3rem;
}
.iframe-overlay p {
font-size: 1.1rem;
}
}
/* 小屏幕移动设备优化 */
@media (max-width: 480px) {
.nav-container {
padding: 0 10px;
height: 45px;
}
.nav-logo {
font-size: 0.9rem;
}
.nav-logo .logo-icon {
height: 35px;
}
/* 主要内容区域 */
.container {
padding: 65px 10px 0;
}
.hero,
.interactive-section,
.start-journey-section {
padding: 30px 0 50px;
}
.glitch-text {
font-size: 1.8rem;
line-height: 1.1;
}
.subtitle {
font-size: 1rem;
margin-bottom: 20px;
}
.card h3 {
font-size: 1.3rem;
}
.card p {
font-size: 0.95rem;
}
.pulse-button {
font-size: 0.9rem;
padding: 15px 30px;
}
/* 确保内容不溢出 */
body {
overflow-x: hidden;
}
* {
max-width: 100%;
box-sizing: border-box;
}
/* 小屏幕对话演示区域 */
.chat-demo-section {
padding: 30px 0 50px;
}
.vertical-title h3 {
font-size: 1.5rem;
}
.vertical-description p {
font-size: 0.9rem;
}
/* 手机法语版本样式 */
.lang-fr .chat-demo-layout {
flex-direction: column;
gap: 15px;
}
.lang-fr .chat-demo-sidebar {
flex: none;
width: 100%;
height: auto;
padding: 15px 20px;
margin: 0 0 15px;
text-align: center;
}
.lang-fr .vertical-title {
margin-bottom: 12px;
text-align: center;
}
.lang-fr .vertical-title h3 {
font-size: 1.6rem;
line-height: 1.1;
text-align: center;
}
.lang-fr .vertical-description p {
font-size: 0.95rem;
line-height: 1.3;
text-align: center;
}
/* 手机端单词列样式 */
.word-column {
padding: 2px 5px;
margin: 1px 0;
font-size: 0.85rem;
border-radius: 6px;
}
.vertical-title .word-column {
font-size: 1.3rem;
padding: 3px 6px;
margin: 1px 0;
}
.chat-iframe-container {
height: 500px;
margin: 0;
box-shadow:
0 10px 25px rgba(139, 122, 104, 0.2),
inset 0 0 0 4px rgba(248, 244, 230, 0.9),
inset 0 0 0 7px rgba(139, 122, 104, 0.3),
inset 0 0 0 10px rgba(248, 244, 230, 0.9);
}
/* 手机端用户评价样式 */
.testimonials-section {
padding: 60px 0;
}
.simple-testimonial {
padding: 20px;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 1rem;
line-height: 1.5;
}
.professional-testimonial {
flex-direction: column;
gap: 20px;
padding: 25px;
text-align: center;
}
.testimonial-avatar img {
width: 60px;
height: 60px;
}
.author-name {
font-size: 1.2rem;
}
.author-title {
font-size: 0.9rem;
}
.professional-testimonial .testimonial-text {
font-size: 1rem;
text-align: center;
}
.professional-title {
font-size: 1.8rem;
margin-bottom: 30px;
}
.chat-iframe-container iframe {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
transform: scale(1);
transform-origin: center center;
border-radius: 8px;
border: none;
overflow: hidden;
pointer-events: auto;
}
.play-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
.iframe-overlay p {
font-size: 1rem;
}
}
/* 中文字体样式 */
h1, h2, h3, .site-title, .section-title {
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
}
/* 中文内容使用楷书字体 */
[data-zh] {
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
}
/* 法语内容使用正常字体 */
[data-fr] {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* 根据HTML lang属性动态应用字体 */
html[lang="zh-CN"] [data-zh] {
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
}
html[lang="fr-FR"] [data-fr] {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* 法语模式下的字体和大小调整 */
html[lang="fr-FR"] [data-fr] {
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
/* 法语模式下主标题稍小一些，因为法语单词较长 */
html[lang="fr-FR"] .site-title[data-fr] {
font-size: 6.5rem !important;
line-height: 1.1;
}
/* 法语模式下章节标题 */
html[lang="fr-FR"] .section-title[data-fr] {
font-size: 2.8rem !important;
line-height: 1.2;
}
/* 法语模式下欢迎消息标题 */
html[lang="fr-FR"] .welcome-message h2[data-fr] {
font-size: 3.2rem !important;
line-height: 1.3;
}
/* 法语模式下卡片标题 */
html[lang="fr-FR"] .card h3[data-fr] {
font-size: 1.8rem !important;
}
/* 法语模式下特色功能标题 */
html[lang="fr-FR"] .feature-info h3[data-fr] {
font-size: 1.6rem !important;
}
/* 法语模式下一般文本稍小 */
html[lang="fr-FR"] .tagline[data-fr] {
font-size: 1.2rem !important;
}
html[lang="fr-FR"] .subtitle[data-fr] {
font-size: 1.4rem !important;
}
html[lang="fr-FR"] .description[data-fr] {
font-size: 1.1rem !important;
}
html[lang="fr-FR"] .card p[data-fr] {
font-size: 1rem !important;
}
html[lang="fr-FR"] .card-back p[data-fr] {
font-size: 1.1rem !important;
}
html[lang="fr-FR"] .feature-info p[data-fr] {
font-size: 1rem !important;
}
html[lang="fr-FR"] .footer-content p[data-fr] {
font-size: 1.1rem !important;
}
/* 额外的视觉效果 */
.fade-in {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.fade-in.animate-in {
opacity: 1;
}
/* 滚动条样式 - 与主页面搭配 */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: rgba(248, 244, 230, 0.3);
border-radius: 10px;
border: 1px solid rgba(139, 122, 104, 0.1);
}
::-webkit-scrollbar-thumb {
background: #c8956d;
border-radius: 10px;
border: 2px solid rgba(248, 244, 230, 0.5);
box-shadow: 0 2px 8px rgba(139, 122, 104, 0.15);
}
::-webkit-scrollbar-thumb:hover {
background: #b8936f;
border-color: rgba(248, 244, 230, 0.8);
box-shadow: 0 4px 12px rgba(139, 122, 104, 0.25);
}
::-webkit-scrollbar-corner {
background: rgba(248, 244, 230, 0.3);
}
/* 移除背景动画 */
/* 炫酷按钮效果升级 */
.pulse-button {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
background-size: 300% 300%;
animation: buttonGradient 3s ease infinite;
border: none;
padding: 25px 50px;
font-size: 1.4rem;
color: white;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
font-weight: 700;
box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
text-transform: uppercase;
letter-spacing: 2px;
}
@keyframes buttonGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.pulse-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.5s;
z-index: -1;
}
.pulse-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.pulse-button:hover::before {
left: 100%;
}
.pulse-button:hover::after {
width: 300px;
height: 300px;
}
.pulse-button:hover {
transform: scale(1.1) rotateZ(2deg);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.pulse-button:active {
transform: scale(0.95) rotateZ(-1deg);
}
/* 标题增强效果 */
.site-title {
font-size: 4rem;
font-weight: 900;
position: relative;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
background-size: 400% 400%;
animation: titleGradient 5s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.5));
}
@keyframes titleGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 卡片悬浮发光效果升级 */
.card {
height: 240px;
perspective: 1000px;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
}
.card::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: rgba(180, 147, 111, 0.3);
border-radius: 16px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover::before {
opacity: 1;
}
/* 肃静的淡入效果 */
.typewriter {
opacity: 0;
animation: gentleFadeIn 2.5s ease-out 0.8s forwards;
}
@keyframes gentleFadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 按钮波纹效果 */
@keyframes ripple {
to {
transform: scale(2);
opacity: 0;
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
/* 增强的卡片悬停效果 */
.card:hover {
transform: translateY(-10px) scale(1.02) !important;
filter: brightness(1.1);
}
/* 标题悬停发光效果 */
.site-title:hover {
animation: titlePulse 0.5s ease-in-out;
}
@keyframes titlePulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* 优化的波浪文字延迟效果 */
.wave-text span:nth-child(1) { animation-delay: 0s; }
.wave-text span:nth-child(2) { animation-delay: 0.15s; }
.wave-text span:nth-child(3) { animation-delay: 0.3s; }
.wave-text span:nth-child(4) { animation-delay: 0.45s; }
.wave-text span:nth-child(5) { animation-delay: 0.6s; }
.wave-text span:nth-child(6) { animation-delay: 0.75s; }
.wave-text span:nth-child(7) { animation-delay: 0.9s; }
.wave-text span:nth-child(8) { animation-delay: 1.05s; }
.wave-text span:nth-child(9) { animation-delay: 1.2s; }
.wave-text span:nth-child(10) { animation-delay: 1.35s; }
.wave-text span:nth-child(11) { animation-delay: 1.5s; }
.wave-text span:nth-child(12) { animation-delay: 1.65s; }
/* 特色展示区域样式 */
/*
.gallery-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg,
rgba(248, 244, 230, 0.3) 0%,
rgba(240, 232, 217, 0.5) 100%);
}
.gallery-section::after {
content: '';
position: absolute;
bottom: -40px;
left: 20%;
right: 20%;
height: 2px;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 10px,
rgba(200, 149, 109, 0.2) 10px,
rgba(200, 149, 109, 0.2) 20px
);
pointer-events: none;
}
.feature-showcase {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 30px;
}
.showcase-main {
width: 100%;
position: relative;
}
.showcase-main {
width: 100%;
position: relative;
overflow: hidden;
}
.main-feature {
opacity: 0;
transform: translateY(15px);
transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.main-feature.active {
opacity: 1;
transform: translateY(0);
position: relative;
pointer-events: auto;
}
.feature-display {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 25px;
}
.feature-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 450px;
padding: 30px;
background: linear-gradient(135deg, rgba(248, 244, 230, 0.3), rgba(240, 230, 210, 0.3));
}
.feature-image img {
max-width: 100%;
max-height: 400px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
background: rgba(255, 255, 255, 0.5);
padding: 10px;
}
.main-feature:hover .feature-image img {
transform: scale(1.03);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.feature-info {
padding: 30px;
background: rgba(248, 244, 230, 0.4);
backdrop-filter: blur(10px);
}
.feature-badge {
display: inline-block;
background: linear-gradient(45deg, #8b7a68, #b8a48d);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.feature-info h3 {
font-size: 2rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 15px;
font-family: 'KaiTi', 'STKaiti', '楷体', 'Microsoft YaHei', serif;
}
.feature-info p {
font-size: 1.2rem;
line-height: 1.6;
color: #6a5f54;
margin-bottom: 20px;
}
.feature-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background: rgba(139, 122, 104, 0.1);
color: #8b7a68;
padding: 4px 12px;
border-radius: 15px;
font-size: 1rem;
font-weight: 500;
border: 1px solid rgba(139, 122, 104, 0.2);
}
.feature-thumbnails {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px 0;
flex-wrap: wrap;
}
.thumbnail {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.6;
min-width: 90px;
}
.thumbnail:hover {
opacity: 0.9;
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.6);
border-color: rgba(139, 122, 104, 0.2);
box-shadow: 0 8px 20px rgba(139, 122, 104, 0.1);
}
.thumbnail.active {
opacity: 1;
background: rgba(248, 244, 230, 0.8);
border-color: rgba(139, 122, 104, 0.4);
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(139, 122, 104, 0.15);
}
.thumbnail img {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 10px;
transition: all 0.3s ease;
border: 2px solid rgba(139, 122, 104, 0.1);
background: rgba(248, 244, 230, 0.3);
padding: 2px;
}
.thumbnail:hover img {
transform: scale(1.05);
border-color: rgba(139, 122, 104, 0.3);
}
.thumbnail.active img {
border-color: rgba(139, 122, 104, 0.5);
box-shadow: 0 3px 10px rgba(139, 122, 104, 0.2);
}
.thumbnail span {
font-size: 0.95rem;
font-weight: 500;
color: #8b7a68;
text-align: center;
line-height: 1.2;
}
/* 响应式设计 */
@media (max-width: 768px) {
.feature-showcase {
gap: 25px;
}
.feature-image {
min-height: 300px;
padding: 20px;
}
.feature-image img {
max-height: 250px;
}
.feature-info {
padding: 25px 20px;
}
.feature-info h3 {
font-size: 1.5rem;
}
.feature-info p {
font-size: 0.9rem;
margin-bottom: 15px;
}
.feature-tags {
gap: 6px;
}
.tag {
font-size: 0.8rem;
padding: 3px 10px;
}
.feature-thumbnails {
gap: 15px;
overflow-x: auto;
justify-content: flex-start;
padding: 15px 10px;
}
.thumbnail {
min-width: 80px;
padding: 10px;
}
.thumbnail img {
width: 45px;
height: 45px;
}
.thumbnail span {
font-size: 0.75rem;
}
}
/* 图片适配样式 - 根据图片类型优化显示 */
.slide-image[src*="aichat"],
.slide-image[src*="voice"],
.slide-image[src*="image"] {
/* 聊天界面和AI工具截图 - 保持原始比例 */
object-fit: contain;
max-height: 90%;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.slide-image[src*="mix"],
.slide-image[src*="card"] {
/* 拼图和卡片类图片 - 适应容器 */
object-fit: contain;
max-height: 85%;
background: transparent;
padding: 5px;
}
.slide-image[src*="regle"],
.slide-image[src*="GAR"] {
/* 规则和认证图片 - 保持清晰度 */
object-fit: contain;
max-height: 90%;
background: rgba(248, 248, 248, 0.9);
padding: 10px;
}
.slide-image[src*="student"],
.slide-image[src*="caractere"] {
/* 学生界面和字符图片 */
object-fit: contain;
max-height: 85%;
background: rgba(255, 255, 255, 0.8);
padding: 8px;
}
/* 平台展示部分的图片优化 */
.feature-image img[src*="aichat"],
.feature-image img[src*="aiimage"],
.feature-image img[src*="cours"],
.feature-image img[src*="mot"] {
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border: 1px solid rgba(139, 122, 104, 0.1);
max-height: 380px;
}
/* 缩略图优化 */
.thumbnail img[src*="aichat"],
.thumbnail img[src*="aiimage"],
.thumbnail img[src*="cours"],
.thumbnail img[src*="mot"] {
background: rgba(255, 255, 255, 0.9);
padding: 3px;
}
/* 文字布局优化 */
.card-front h3, .card-back p {
text-align: center;
line-height: 1.4;
word-wrap: break-word;
hyphens: auto;
}
.feature-info h3 {
text-align: center;
margin-bottom: 15px;
line-height: 1.3;
word-wrap: break-word;
}
.feature-info p {
text-align: center;
line-height: 1.6;
margin-bottom: 20px;
word-wrap: break-word;
hyphens: auto;
}
.feature-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 15px;
}
.feature-tags .tag {
padding: 6px 12px;
background: rgba(139, 122, 104, 0.1);
border: 1px solid rgba(139, 122, 104, 0.3);
border-radius: 15px;
font-size: 0.85rem;
color: #8b7a68;
white-space: nowrap;
}
.thumbnail span {
text-align: center;
line-height: 1.2;
word-wrap: break-word;
display: block;
margin-top: 5px;
}
/* 卡片文字对齐优化 */
.card-front, .card-back {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 15px;
}
.card-front h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 10px;
color: #8b7a68;
line-height: 1.3;
}
.card-front p {
font-size: 1.1rem;
color: #6a5f54;
line-height: 1.4;
opacity: 0.9;
}
.card-back p {
text-align: left;
line-height: 1.6;
font-size: 1.05rem;
color: #5a5047;
list-style-type: none;
}
.card-back {
padding: 15px 12px;
}
/* 改善卡片列表样式 */
.card-back p br {
margin-bottom: 8px;
}
/* 全局文字对齐和间距优化 */
.section-title {
text-align: center;
margin-bottom: 40px;
line-height: 1.2;
word-wrap: break-word;
}
.about-content h3 {
text-align: center;
margin-bottom: 20px;
line-height: 1.3;
}
.about-content p {
text-align: justify;
line-height: 1.7;
word-wrap: break-word;
hyphens: auto;
margin-bottom: 20px;
}
/* 详情滑块文字优化 */
.detail-slide-title {
text-align: center;
margin-bottom: 20px;
line-height: 1.3;
word-wrap: break-word;
}
.detail-slide-description {
text-align: justify;
line-height: 1.6;
margin-bottom: 20px;
word-wrap: break-word;
hyphens: auto;
}
.detail-slide-features ul {
text-align: left;
line-height: 1.6;
padding-left: 0;
list-style-type: none;
}
.detail-slide-features li {
padding: 8px 0;
border-left: 3px solid rgba(139, 122, 104, 0.3);
padding-left: 15px;
margin-bottom: 8px;
word-wrap: break-word;
}
/* 法语文字特殊处理 */
[lang="fr-FR"] .feature-info p,
[lang="fr-FR"] .card-front p,
[lang="fr-FR"] .card-back p {
font-size: 0.92em;
letter-spacing: 0.3px;
}
/* 联系我们部分居中对齐优化 */
.footer-section {
text-align: center;
}
.footer-section h4 {
text-align: center;
margin-bottom: 20px;
}
.contact-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}
.contact-info p {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
}
.contact-btn {
align-self: center;
margin: 0 auto;
}
/* 移动端图片优化 */
@media (max-width: 768px) {
.slide-image[src*="aichat"],
.slide-image[src*="voice"],
.slide-image[src*="image"] {
padding: 10px;
max-height: 85%;
}
.feature-image img[src*="aichat"],
.feature-image img[src*="aiimage"],
.feature-image img[src*="cours"],
.feature-image img[src*="mot"] {
padding: 10px;
max-height: 280px;
}
.carousel-container {
min-height: 300px;
}
.detail-slide-image {
min-height: 350px;
}
.feature-info h3 {
font-size: 1.4rem;
}
.feature-info p {
font-size: 0.9rem;
text-align: left;
}
.card-front, .card-back {
padding: 15px 12px;
}
.card-front h3 {
font-size: 1.3rem;
}
.card-front p {
font-size: 1rem;
}
.card-back p {
font-size: 0.95rem;
}
.feature-info p {
text-align: center;
font-size: 0.9rem;
}
}
/* 竖向中文毛笔字背景样式 */
.chinese-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -2;
overflow: hidden;
}
.chinese-text {
position: absolute;
font-family: 'KaiTi', 'STKaiti', '楷体', 'SimSun', serif;
font-size: 3rem;
font-weight: normal;
color: rgba(139, 130, 120, 0.35);
text-shadow: none;
animation: chineseFloatWave 45s ease-in-out infinite;
user-select: none;
letter-spacing: 0.3rem;
}
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
transform: rotate(0deg);
text-align: center;
display: inline-block;
height: auto;
line-height: 1.2;
}
@keyframes chineseFloatWave {
0% {
transform: translateY(10vh) translateX(0px) scale(0.95);
opacity: 0;
}
15% {
opacity: 0.4;
}
25% {
transform: translateY(0vh) translateX(3px) scale(0.98);
opacity: 0.6;
}
50% {
transform: translateY(-15vh) translateX(-3px) scale(1.02);
opacity: 0.5;
}
75% {
transform: translateY(-30vh) translateX(2px) scale(1.05);
opacity: 0.3;
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(-45vh) translateX(0px) scale(1.08);
opacity: 0;
}
}
/* 移除毛笔字背景效果 */
/* 亮丽按钮颜色升级 */
.pulse-button {
background: linear-gradient(45deg, #d4a574, #c8956d, #b8936f);
background-size: 150% 150%;
animation: buttonGradient 6s ease infinite;
border: none;
padding: 25px 50px;
font-size: 1.6rem;
color: white;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
font-weight: 600;
box-shadow: 0 8px 20px rgba(180, 147, 111, 0.2);
text-transform: none;
letter-spacing: 1px;
}
/* 卡片亮丽颜色 */
.card-front {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(212, 197, 169, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.card-back {
background: rgba(248, 244, 230, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(197, 177, 151, 0.2);
transform: rotateY(180deg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 标题柔和效果 */
.site-title {
font-size: 8rem;
font-weight: 700;
position: relative;
margin-bottom: 10px;
background: linear-gradient(45deg, #8b7a68, #a0937c, #b8a48d);
background-size: 200% 200%;
animation: titleGradient 8s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: none;
}
/* 柔和网格背景 */
.chinese-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(139, 130, 120, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 130, 120, 0.02) 1px, transparent 1px);
background-size: 80px 80px;
animation: none;
z-index: -3;
}
@keyframes gridMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(50px, 50px);
}
}
*/
/* 关于我们页面样式 */
.about-company-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(248, 244, 230, 0.3) 0%,
rgba(240, 232, 217, 0.4) 50%,
rgba(235, 226, 210, 0.3) 100%);
position: relative;
overflow: hidden;
}
.about-company-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 50px 50px;
animation: float 20s infinite linear;
z-index: -1;
}
@keyframes float {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-50px) translateY(-50px); }
}
.about-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.company-story {
margin-bottom: 80px;
text-align: center;
position: relative;
}
.story-text {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 60px 40px;
border-radius: 25px;
box-shadow:
0 20px 40px rgba(139, 122, 104, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(200, 149, 109, 0.2);
position: relative;
overflow: hidden;
}
.story-text::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(200, 149, 109, 0.05), transparent);
animation: shine 8s infinite linear;
pointer-events: none;
}
@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.story-text h3 {
font-size: 2.5rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 30px;
position: relative;
display: inline-block;
}
.story-text h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
border-radius: 2px;
}
.story-text p {
font-size: 1.3rem;
line-height: 1.8;
color: #6a5f54;
text-align: justify;
max-width: 800px;
margin: 0 auto;
}
/* 发展历程样式 - 全新设计 */
.timeline-section {
margin-bottom: 80px;
}
.timeline-section h3 {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 60px;
position: relative;
}
.timeline-section h3::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
border-radius: 2px;
}
.timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.timeline-item {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 40px 30px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 15px 35px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
overflow: hidden;
}
.timeline-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
}
.timeline-item:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 50px rgba(139, 122, 104, 0.15);
}
.timeline-date {
display: inline-block;
background: linear-gradient(135deg, #c8956d, #8b7a68);
color: white;
padding: 12px 24px;
border-radius: 25px;
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(139, 122, 104, 0.3);
position: relative;
overflow: hidden;
}
.timeline-date::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: date-shine 2s infinite;
}
@keyframes date-shine {
0% { left: -100%; }
100% { left: 100%; }
}
.timeline-content {
position: relative;
z-index: 1;
}
.timeline-content h4 {
font-size: 1.6rem;
font-weight: 600;
color: #8b7a68;
margin-bottom: 15px;
position: relative;
}
.timeline-content h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 40px;
height: 2px;
background: #c8956d;
border-radius: 1px;
}
.timeline-content p {
font-size: 1.1rem;
line-height: 1.7;
color: #6a5f54;
margin: 0;
}
/* 使命愿景部分 */
.mission-vision {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 80px;
}
.mission, .vision {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 50px 40px;
border-radius: 25px;
box-shadow: 0 20px 40px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
text-align: center;
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}
.mission::before, .vision::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
}
.mission:hover, .vision:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(139, 122, 104, 0.15);
}
.mission h3, .vision h3 {
font-size: 2rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 25px;
position: relative;
}
.mission p, .vision p {
font-size: 1.2rem;
line-height: 1.7;
color: #6a5f54;
margin: 0;
}
/* 响应式设计 */
@media (max-width: 768px) {
.about-company-section {
padding: 60px 0;
}
.story-text {
padding: 40px 25px;
margin: 0 15px;
}
.story-text h3 {
font-size: 2rem;
}
.story-text p {
font-size: 1.1rem;
}
.timeline {
grid-template-columns: 1fr;
gap: 30px;
}
.timeline-item {
padding: 30px 20px;
margin: 0 15px;
}
.timeline-date {
font-size: 1.1rem;
padding: 10px 20px;
}
.timeline-content h4 {
font-size: 1.4rem;
}
.timeline-content p {
font-size: 1rem;
}
.mission-vision {
grid-template-columns: 1fr;
gap: 30px;
margin-top: 60px;
}
.mission, .vision {
padding: 40px 25px;
margin: 0 15px;
}
.mission h3, .vision h3 {
font-size: 1.5rem;
}
.mission p, .vision p {
font-size: 1.1rem;
}
}
/* 团队介绍页面样式 */
.team-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(235, 226, 210, 0.3) 0%,
rgba(248, 244, 230, 0.4) 50%,
rgba(240, 232, 217, 0.3) 100%);
position: relative;
overflow: hidden;
}
.team-section::after {
content: '◊ ◊ ◊';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
color: rgba(139, 122, 104, 0.3);
font-size: 1.5rem;
letter-spacing: 1rem;
text-shadow: 0 0 15px rgba(139, 122, 104, 0.2);
pointer-events: none;
}
.team-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.team-intro {
text-align: center;
margin-bottom: 80px;
position: relative;
}
.team-intro p {
font-size: 1.4rem;
line-height: 1.8;
color: #6a5f54;
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
position: relative;
overflow: hidden;
}
.team-intro p::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #c8956d, #8b7a68, #c8956d);
background-size: 200% 100%;
animation: gradient-flow 3s ease-in-out infinite;
}
@keyframes gradient-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* 团队成员网格 */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-bottom: 80px;
}
.team-member {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: 25px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 20px 40px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.team-member::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(200, 149, 109, 0.1), transparent);
animation: spin 10s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
}
.team-member:hover::before {
opacity: 1;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.team-member:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 60px rgba(139, 122, 104, 0.15);
}
.member-avatar {
margin-bottom: 25px;
position: relative;
z-index: 1;
}
.avatar-placeholder {
width: 120px;
height: 120px;
margin: 0 auto;
background: linear-gradient(135deg, #c8956d, #8b7a68);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
box-shadow: 0 15px 30px rgba(139, 122, 104, 0.3);
position: relative;
overflow: hidden;
}
.avatar-placeholder::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.member-info {
position: relative;
z-index: 1;
}
.member-info h3 {
font-size: 1.8rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 10px;
position: relative;
}
.member-role {
font-size: 1.1rem;
font-weight: 600;
color: #c8956d;
margin-bottom: 20px;
font-style: italic;
}
.member-description {
font-size: 1rem;
line-height: 1.6;
color: #6a5f54;
margin: 0;
}
/* 团队价值观部分 */
.team-values {
margin-top: 80px;
}
.team-values h3 {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #8b7a68;
margin-bottom: 60px;
position: relative;
}
.team-values h3::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
border-radius: 2px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.value-item {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 40px 25px;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.value-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.value-item:hover::before {
transform: scaleX(1);
}
.value-item:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(139, 122, 104, 0.15);
}
.value-icon {
font-size: 3rem;
margin-bottom: 20px;
display: block;
}
.value-item h4 {
font-size: 1.4rem;
font-weight: 600;
color: #8b7a68;
margin-bottom: 15px;
}
.value-item p {
font-size: 1rem;
line-height: 1.5;
color: #6a5f54;
margin: 0;
}
/* 响应式设计 */
@media (max-width: 768px) {
.team-section {
padding: 60px 0;
}
.team-intro p {
font-size: 1.2rem;
padding: 30px 25px;
margin: 0 15px;
}
.team-grid {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 60px;
}
.team-member {
padding: 30px 20px;
margin: 0 15px;
}
.avatar-placeholder {
width: 100px;
height: 100px;
font-size: 2.5rem;
}
.member-info h3 {
font-size: 1.5rem;
}
.member-role {
font-size: 1rem;
}
.member-description {
font-size: 0.9rem;
}
.team-values {
margin-top: 60px;
}
.team-values h3 {
font-size: 2rem;
margin-bottom: 40px;
}
.values-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.value-item {
padding: 30px 20px;
margin: 0 15px;
}
.value-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.value-item h4 {
font-size: 1.2rem;
}
.value-item p {
font-size: 0.9rem;
}
}
/* Mentions Légales页面样式 */
.mentions-legales-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(240, 232, 217, 0.3) 0%,
rgba(248, 244, 230, 0.4) 50%,
rgba(235, 226, 210, 0.3) 100%);
position: relative;
overflow: hidden;
}
.mentions-legales-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(139, 122, 104, 0.05));
pointer-events: none;
}
.mentions-legales-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 80px 80px;
animation: legal-pattern 15s infinite linear;
z-index: -1;
}
@keyframes legal-pattern {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-80px) translateY(-80px); }
}
.mentions-content {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
.legal-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 60px;
}
.legal-item {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(139, 122, 104, 0.1);
border: 1px solid rgba(200, 149, 109, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.legal-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #c8956d, #8b7a68);
}
.legal-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(139, 122, 104, 0.15);
}
.legal-item h3 {
font-size: 1.3rem;
font-weight: 600;
color: #8b7a68;
margin-bottom: 15px;
position: relative;
}
.legal-item p {
font-size: 1.1rem;
line-height: 1.6;
color: #6a5f54;
margin: 0;
font-weight: 500;
}
/* 新的Footer样式 */
.footer {
background: linear-gradient(135deg, #8b7a68, #6a5f54);
color: white;
padding: 60px 0 20px;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-section h4 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 20px;
color: #f8f4e6;
position: relative;
}
.footer-section h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 30px;
height: 2px;
background: #c8956d;
border-radius: 1px;
}
.footer-section p {
font-size: 1rem;
line-height: 1.6;
color: rgba(248, 244, 230, 0.9);
margin: 0;
}
.footer-links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.footer-links-grid a {
color: rgba(248, 244, 230, 0.8);
text-decoration: none;
padding: 5px 0;
font-size: 0.95rem;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;
}
.footer-links-grid a:hover {
color: #c8956d;
border-bottom-color: rgba(200, 149, 109, 0.5);
transform: translateX(5px);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-info p {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.95rem;
}
.contact-icon {
font-size: 1.1rem;
min-width: 20px;
}
.contact-btn {
background: linear-gradient(135deg, #c8956d, #a0937c);
border: none;
color: white;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
align-self: flex-start;
box-shadow: 0 4px 15px rgba(200, 149, 109, 0.3);
}
.contact-btn:hover {
background: linear-gradient(135deg, #d4a374, #b8a48d);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(200, 149, 109, 0.4);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
text-align: center;
}
.copyright {
font-size: 0.9rem;
color: rgba(248, 244, 230, 0.7);
margin-top: 20px;
}
/* 联系模态窗口样式 */
.contact-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}
.contact-modal.active {
display: flex;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
.modal-content {
background: rgba(248, 244, 230, 0.98);
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
position: relative;
border: 1px solid rgba(200, 149, 109, 0.3);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
border-bottom: 1px solid rgba(139, 122, 104, 0.2);
}
.modal-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: #8b7a68;
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: 2rem;
color: #8b7a68;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.modal-close:hover {
background: rgba(139, 122, 104, 0.1);
transform: rotate(90deg);
}
.modal-body {
padding: 30px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-weight: 600;
color: #8b7a68;
font-size: 0.95rem;
}
.form-group input,
.form-group textarea {
padding: 12px 16px;
border: 2px solid rgba(139, 122, 104, 0.2);
border-radius: 10px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.8);
color: #6a5f54;
transition: all 0.3s ease;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #c8956d;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 0 3px rgba(200, 149, 109, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 10px;
}
.btn-cancel,
.btn-send {
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
font-size: 0.95rem;
}
.btn-cancel {
background: transparent;
color: #8b7a68;
border-color: rgba(139, 122, 104, 0.3);
}
.btn-cancel:hover {
background: rgba(139, 122, 104, 0.1);
border-color: #8b7a68;
}
.btn-send {
background: linear-gradient(135deg, #c8956d, #8b7a68);
color: white;
box-shadow: 0 4px 15px rgba(200, 149, 109, 0.3);
}
.btn-send:hover {
background: linear-gradient(135deg, #d4a374, #9a8773);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(200, 149, 109, 0.4);
}
/* 响应式设计 */
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-links-grid {
grid-template-columns: 1fr;
}
.modal-content {
width: 95%;
margin: 20px;
}
.modal-header,
.modal-body {
padding: 20px;
}
.form-actions {
flex-direction: column;
}
.btn-cancel,
.btn-send {
width: 100%;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.mentions-legales-section {
padding: 60px 0;
}
.legal-info {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.legal-item {
padding: 25px 20px;
margin: 0 15px;
}
.legal-item h3 {
font-size: 1.2rem;
}
.legal-item p {
font-size: 1rem;
}
}
/* 全面移动端和平板响应式优化 */
/* 平板设备响应式设计 (1024px及以下) */
@media (max-width: 1024px) {
/* 导航栏优化 */
.nav-container {
max-width: 100%;
padding: 0 20px;
}
.nav-menu {
gap: 10px;
margin: 0 20px;
}
.nav-link {
padding: 8px 14px;
font-size: 16px;
}
/* 平台特色卡片适应 */
.cards-section {
padding: 60px 0;
}
.cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 800px;
}
.card {
height: 220px;
}
/* 详情展示窗口适应 */
.detail-slide {
margin: 20px;
border-radius: 16px;
}
.detail-content {
padding: 25px;
}
/* 轮播图片适应 */
.detail-image {
height: 300px;
}
.carousel-nav-btn {
width: 35px;
height: 35px;
font-size: 14px;
}
}
/* 移动设备响应式设计 (768px及以下) */
@media (max-width: 768px) {
/* 导航栏移动端优化 */
.nav-container {
padding: 0 15px;
height: 50px;
}
.nav-menu {
gap: 6px;
margin: 0 8px;
}
.nav-link {
padding: 6px 8px;
font-size: 13px;
}
.nav-link[data-zh] {
font-size: 14px;
}
.nav-link[data-fr] {
font-size: 13px;
letter-spacing: -0.2px;
}
.logo-text {
font-size: 20px;
}
/* 主要内容区域优化 */
.hero-section {
padding: 90px 20px 40px;
min-height: 70vh;
margin-top: 0;
}
.hero-content {
margin-top: 20px;
}
.hero-content h1 {
font-size: 2.2rem;
margin-bottom: 20px;
}
.hero-content p {
font-size: 1.1rem;
margin-bottom: 25px;
}
/* 平台特色移动端适应 */
.cards-section {
padding: 50px 15px;
}
.cards-grid {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 100%;
align-items: center;
}
.card {
height: 220px;
margin: 0 auto;
max-width: 320px;
width: 90%;
}
/* 详情展示移动端优化 */
.detail-slide {
margin: 15px;
border-radius: 12px;
}
.detail-content {
padding: 20px;
}
.detail-title {
font-size: 1.5rem;
margin-bottom: 15px;
}
.detail-description {
font-size: 1rem;
margin-bottom: 20px;
}
/* 轮播图片移动端适应 */
.detail-image {
height: 250px;
margin-bottom: 15px;
}
.detail-image img {
border-radius: 8px;
}
.carousel-nav-btn {
width: 30px;
height: 30px;
font-size: 12px;
}
.carousel-nav-btn.prev {
left: 8px;
}
.carousel-nav-btn.next {
right: 8px;
}
/* 轮播指示器移动端优化 */
.carousel-indicators {
bottom: -35px;
gap: 8px;
}
.carousel-indicator {
width: 8px;
height: 8px;
}
/* 图片说明文字移动端优化 */
.image-caption {
font-size: 0.9rem;
padding: 8px 15px;
margin-top: 10px;
}
}
/* 小屏幕移动设备优化 (480px及以下) */
@media (max-width: 480px) {
/* 导航栏小屏幕优化 */
.nav-container {
padding: 0 10px;
height: 45px;
margin-bottom: 15px;
}
.nav-menu {
gap: 4px;
margin: 0 5px;
}
.nav-link {
padding: 4px 6px;
font-size: 11px;
}
.nav-link[data-zh] {
font-size: 12px;
}
.nav-link[data-fr] {
font-size: 11px;
letter-spacing: -0.2px;
}
.logo-text {
font-size: 18px;
}
/* 主要内容小屏幕优化 */
.hero-section {
padding: 75px 15px 30px;
min-height: 65vh;
margin-top: 0;
}
.hero-content {
margin-top: 30px;
}
.hero-content h1 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.hero-content p {
font-size: 1rem;
margin-bottom: 20px;
}
/* 平台特色小屏幕适应 */
.cards-section {
padding: 40px 10px;
}
.cards-grid {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 100%;
align-items: center;
}
.card {
height: 200px;
max-width: 300px;
width: 85%;
}
*/
/* 详情展示小屏幕优化 */
.detail-slide {
margin: 10px;
border-radius: 10px;
}
.detail-content {
padding: 15px;
}
.detail-title {
font-size: 1.3rem;
margin-bottom: 12px;
}
.detail-description {
font-size: 0.9rem;
margin-bottom: 15px;
}
/* 轮播图片小屏幕适应 */
.detail-image {
height: 200px;
margin-bottom: 12px;
}
.carousel-nav-btn {
width: 28px;
height: 28px;
font-size: 11px;
}
.carousel-nav-btn.prev {
left: 6px;
}
.carousel-nav-btn.next {
right: 6px;
}
/* 轮播指示器小屏幕优化 */
.carousel-indicators {
bottom: -30px;
gap: 6px;
}
.carousel-indicator {
width: 6px;
height: 6px;
}
/* 图片说明文字小屏幕优化 */
.image-caption {
font-size: 0.8rem;
padding: 6px 12px;
margin-top: 8px;
}
/* 防止内容溢出 */
body {
overflow-x: hidden;
}
* {
max-width: 100%;
box-sizing: border-box;
}
}
/* 响应式媒体内容 */
img,
video,
iframe {
max-width: 100%;
height: auto;
}
/* 确保所有元素响应式 */
* {
box-sizing: border-box;
}
/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
.card:hover {
transform: none;
}
.card.flipped {
transform: rotateY(180deg);
}
.carousel-nav-btn {
opacity: 1;
background: rgba(139, 122, 104, 0.9);
}
}