| :root { |
| --bg: #eef3ff; |
| --surface: rgba(255, 255, 255, 0.92); |
| --surface-solid: #ffffff; |
| --surface-soft: #f5f8ff; |
| --surface-strong: #ebf1ff; |
| --surface-tint: #f8fbff; |
| --text: #20314f; |
| --text-muted: #62779f; |
| --text-soft: #8a9ab9; |
| --primary: #2e63ff; |
| --primary-soft: #eaf0ff; |
| --primary-strong: #1b49d0; |
| --accent: #1db6d9; |
| --accent-soft: rgba(29, 182, 217, 0.14); |
| --border: rgba(163, 183, 235, 0.38); |
| --border-strong: rgba(115, 142, 211, 0.32); |
| --success: #179a74; |
| --warning: #c9830a; |
| --danger: #d64a5f; |
| --shadow-sm: 0 10px 24px rgba(42, 69, 144, 0.08); |
| --shadow-md: 0 18px 40px rgba(32, 61, 140, 0.12); |
| --shadow-lg: 0 30px 80px rgba(25, 47, 108, 0.16); |
| --radius-sm: 12px; |
| --radius-md: 18px; |
| --radius-lg: 30px; |
| --radius-pill: 999px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| color: var(--text); |
| font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif; |
| background: |
| radial-gradient(circle at 12% 18%, rgba(46, 99, 255, 0.18), transparent 24%), |
| radial-gradient(circle at 88% 14%, rgba(29, 182, 217, 0.18), transparent 22%), |
| radial-gradient(circle at 50% 100%, rgba(125, 146, 255, 0.12), transparent 28%), |
| linear-gradient(180deg, #f8fbff 0%, #eef3ff 48%, #edf2ff 100%); |
| position: relative; |
| } |
|
|
| body::before, |
| body::after { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| } |
|
|
| body::before { |
| opacity: 0.3; |
| background-image: |
| linear-gradient(rgba(102, 129, 197, 0.06) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(102, 129, 197, 0.06) 1px, transparent 1px); |
| background-size: 32px 32px; |
| mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 92%); |
| } |
|
|
| body::after { |
| background: |
| radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.75), transparent 22%), |
| radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.7), transparent 18%); |
| } |
|
|
| .container { |
| width: min(1540px, calc(100vw - 32px)); |
| max-width: none; |
| margin: 14px auto 24px; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .card { |
| border: 1px solid rgba(255, 255, 255, 0.72); |
| border-radius: var(--radius-lg); |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.96)); |
| box-shadow: var(--shadow-lg); |
| overflow: hidden; |
| backdrop-filter: blur(18px); |
| } |
|
|
| .card-header { |
| border: 0; |
| padding: 20px 24px 18px; |
| text-align: center; |
| background: |
| radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.24), transparent 36%), |
| radial-gradient(circle at 84% 24%, rgba(255, 255, 255, 0.16), transparent 22%), |
| linear-gradient(135deg, #2456f4 0%, #4d79ff 48%, #18b8d7 100%); |
| color: #fff; |
| position: relative; |
| isolation: isolate; |
| } |
|
|
| .card-header::after { |
| content: ''; |
| position: absolute; |
| inset: auto 24px 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); |
| } |
|
|
| .hero-eyebrow { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 8px; |
| padding: 6px 12px; |
| border: 1px solid rgba(255, 255, 255, 0.22); |
| border-radius: var(--radius-pill); |
| background: rgba(255, 255, 255, 0.14); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); |
| font-size: 0.78rem; |
| font-weight: 800; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .card-header h2 { |
| margin: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; |
| letter-spacing: 0.04em; |
| font-weight: 400; |
| font-size: clamp(2rem, 1.7rem + 0.7vw, 2.55rem); |
| text-shadow: 0 10px 24px rgba(13, 28, 84, 0.18); |
| } |
|
|
| .card-header h2 i { |
| font-size: 0.9em; |
| } |
|
|
| .hero-subtitle { |
| width: min(760px, 100%); |
| margin: 8px auto 0; |
| color: rgba(255, 255, 255, 0.86); |
| font-size: 0.98rem; |
| line-height: 1.65; |
| letter-spacing: 0.01em; |
| } |
|
|
| .card-body { |
| padding: 22px; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 80%), |
| linear-gradient(180deg, rgba(248, 251, 255, 0.85), rgba(245, 248, 255, 0.96)); |
| } |
|
|
| .tab-pane { |
| animation: paneFade 0.24s ease; |
| } |
|
|
| @keyframes paneFade { |
| from { |
| opacity: 0; |
| transform: translateY(4px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .instructions { |
| position: relative; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.98)), |
| radial-gradient(circle at 100% 0%, rgba(46, 99, 255, 0.08), transparent 32%); |
| border: 1px solid rgba(163, 183, 235, 0.32); |
| border-radius: 22px; |
| padding: 18px 20px 18px 22px; |
| color: #435a86; |
| box-shadow: var(--shadow-sm); |
| overflow: hidden; |
| } |
|
|
| .instructions::before { |
| content: ''; |
| position: absolute; |
| inset: 12px auto 12px 0; |
| width: 4px; |
| border-radius: 0 999px 999px 0; |
| background: linear-gradient(180deg, var(--primary), var(--accent)); |
| } |
|
|
| .instructions h5 { |
| margin: 0 0 12px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: #2f57c2; |
| font-size: 0.96rem; |
| font-weight: 780; |
| letter-spacing: 0.01em; |
| } |
|
|
| .instructions h5 i { |
| color: var(--accent); |
| } |
|
|
| .instructions ul { |
| margin: 0; |
| padding-left: 1.2rem; |
| } |
|
|
| .instructions li { |
| margin-bottom: 7px; |
| line-height: 1.58; |
| } |
|
|
| .instructions li:last-child { |
| margin-bottom: 0; |
| } |
|
|
