* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Arial,
"Segoe UI",
sans-serif;
background:
#07111f;
color:
#ffffff;
line-height:
1.6;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding:
24px 8%;
position:
fixed;
top: 0;
background:
rgba(7,17,31,0.85);
backdrop-filter:
blur(10px);
z-index: 100;
}
.logo {
font-size:
28px;
font-weight:
700;
letter-spacing:
1px;
}
select {
background:
#111d33;
color:
white;
border:
1px solid #334155;
padding:
8px 14px;
border-radius:
8px;
}
section {
padding:
100px 10%;
text-align:
center;
}
.hero {
min-height:
100vh;
display:
flex;
flex-direction:
column;
justify-content:
center;
align-items:
center;
}
.hero h1 {
font-size:
clamp(40px,6vw,72px);
max-width:
900px;
margin-bottom:
25px;
}
.hero p {
font-size:
22px;
max-width:
650px;
color:
#cbd5e1;
}
button {
margin-top:
30px;
padding:
16px 42px;
border:
none;
border-radius:
14px;
background:
#2563eb;
color:
white;
font-size:
18px;
cursor:
pointer;
transition:
0.3s;
}
button:hover {
transform:
translateY(-3px);
}
h2 {
font-size:
38px;
margin-bottom:
40px;
}
.cards {
display:
flex;
justify-content:
center;
gap:
25px;
flex-wrap:
wrap;
}
.card {
width:
240px;
min-height:
150px;
padding:
30px;
background:
#111d33;
border-radius:
20px;
display:
flex;
justify-content:
center;
align-items:
center;
transition:
0.3s;
}
.card:hover {
transform:
translateY(-8px);
}
.card h3 {
font-size:
20px;
}
footer {
padding:
40px;
text-align:
center;
color:
#94a3b8;
}
/* RTL语言支持 */
html[dir="rtl"] {
text-align:
right;
}
html[dir="rtl"] header {
direction:
rtl;
}
html[dir="rtl"] .cards {
direction:
rtl;
}
/* 手机适配 */
@media(max-width:700px){
header {
padding:
20px;
}
.hero h1 {
font-size:
38px;
}
.hero p {
font-size:
18px;
}
section {
padding:
70px 20px;
}
.card {
width:
100%;
}
}