/* ======================================== 清新科技风 - 青绿色系主题 ======================================== */ /* ======================================== Tailwind 工具类补充 (预编译CSS缺失的类) ======================================== */ .size-14 { width: 3.5rem; height: 3.5rem; } .space-y-8 > * + * { margin-top: 2rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .leading-relaxed { line-height: 1.625; } .inline-block { display: inline-block; } .items-start { align-items: flex-start; } .gap-3 { gap: 0.75rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .whitespace-nowrap { white-space: nowrap; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mt-1 { margin-top: 0.25rem; } .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .mx-auto { margin-left: auto; margin-right: auto; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .pt-2 { padding-top: 0.5rem; } .pb-3 { padding-bottom: 0.75rem; } .pt-8 { padding-top: 2rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-32 { width: 8rem; } .w-48 { width: 12rem; } .w-80 { width: 20rem; } .w-96 { width: 24rem; } .h-1 { height: 0.25rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-48 { height: 12rem; } .h-80 { height: 20rem; } .h-96 { height: 24rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-7xl { max-width: 80rem; } .flex-shrink-0 { flex-shrink: 0; } .object-cover { object-fit: cover; } .overflow-hidden { overflow: hidden; } .relative { position: relative; } .absolute { position: absolute; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .border { border-width: 1px; border-style: solid; } .border-t { border-top-width: 1px; border-top-style: solid; } .border-2 { border-width: 2px; border-style: solid; } .border-slate-200 { border-color: #e2e8f0; } .border-slate-700 { border-color: #334155; } .border-slate-800 { border-color: #1e293b; } .border-white\/20 { border-color: rgba(255,255,255,0.2); } .opacity-70 { opacity: 0.7; } .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .group:hover .group-hover\:scale-105 { transform: scale(1.05); } .group:hover .group-hover\:scale-110 { transform: scale(1.1); } .group:hover .group-hover\:opacity-100 { opacity: 1; } .hover\:scale-105:hover { transform: scale(1.05); } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); } .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } .hover\:bg-blue-50:hover { background-color: #eff6ff; } .hover\:bg-white:hover { background-color: #fff; } .hover\:bg-slate-50:hover { background-color: #f8fafc; } .hover\:bg-slate-600:hover { background-color: #475569; } .hover\:bg-green-600:hover { background-color: #16a34a; } .hover\:bg-blue-600:hover { background-color: #2563eb; } .hover\:bg-purple-600:hover { background-color: #9333ea; } .hover\:bg-indigo-50:hover { background-color: #eef2ff; } .hover\:text-blue-600:hover { color: #2563eb; } .hover\:text-purple-600:hover { color: #9333ea; } .hover\:text-indigo-600:hover { color: #4f46e5; } .hover\:text-slate-900:hover { color: #0f172a; } .hover\:text-white:hover { color: #fff; } .hover\:border-slate-600:hover { border-color: #475569; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4,0,0.2,1); } .transform { transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-1\/2 { --tw-translate-x: -50%; } .-translate-y-1\/2 { --tw-translate-y: -50%; } .translate-x-1\/2 { --tw-translate-x: 50%; } .-bottom-5 { bottom: -1.25rem; } .-top-40 { top: -10rem; } .-right-40 { right: -10rem; } .-bottom-40 { bottom: -10rem; } .-left-40 { left: -10rem; } .top-0 { top: 0; } .sticky { position: sticky; } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .hidden { display: none; } .block { display: block; } .grid { display: grid; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } .bg-white { background-color: #fff; } .bg-slate-50 { background-color: #f8fafc; } .bg-slate-100 { background-color: #f1f5f9; } .bg-slate-200 { background-color: #e2e8f0; } .bg-slate-700 { background-color: #334155; } .bg-slate-800 { background-color: #1e293b; } .bg-slate-800\/50 { background-color: rgba(30,41,59,0.5); } .bg-slate-900 { background-color: #0f172a; } .bg-blue-50 { background-color: #eff6ff; } .bg-blue-100 { background-color: #dbeafe; } .bg-blue-500 { background-color: #3b82f6; } .bg-blue-600 { background-color: #2563eb; } .bg-blue-700 { background-color: #1d4ed8; } .bg-blue-800 { background-color: #1e40af; } .bg-green-50 { background-color: #f0fdf4; } .bg-green-100 { background-color: #dcfce7; } .bg-green-500 { background-color: #22c55e; } .bg-purple-50 { background-color: #faf5ff; } .bg-purple-100 { background-color: #f3e8ff; } .bg-purple-500 { background-color: #a855f7; } .bg-purple-600 { background-color: #9333ea; } .bg-purple-700 { background-color: #7e22ce; } .bg-purple-800 { background-color: #6b21a8; } .bg-indigo-100 { background-color: #e0e7ff; } .bg-indigo-600 { background-color: #4f46e5; } .bg-indigo-700 { background-color: #4338ca; } .bg-indigo-800 { background-color: #3730a3; } .bg-orange-100 { background-color: #ffedd5; } .bg-red-100 { background-color: #fee2e2; } .text-white { color: #fff; } .text-slate-200 { color: #e2e8f0; } .text-slate-300 { color: #cbd5e1; } .text-slate-400 { color: #94a3b8; } .text-slate-500 { color: #64748b; } .text-slate-600 { color: #475569; } .text-slate-700 { color: #334155; } .text-slate-800 { color: #1e293b; } .text-slate-900 { color: #0f172a; } .text-blue-600 { color: #2563eb; } .text-blue-400 { color: #60a5fa; } .text-blue-100 { color: #dbeafe; } .text-green-600 { color: #16a34a; } .text-green-400 { color: #4ade80; } .text-purple-600 { color: #9333ea; } .text-purple-400 { color: #c084fc; } .text-purple-100 { color: #ede9fe; } .text-indigo-100 { color: #e0e7ff; } .text-indigo-600 { color: #4f46e5; } .text-indigo-400 { color: #818cf8; } .text-indigo-300 { color: #a5b4fc; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .rounded { border-radius: 0.25rem; } .rounded-md { border-radius: 0.375rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); } .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .border-slate-200 { border-color: #e2e8f0; } .border-slate-700 { border-color: #334155; } .border-slate-800 { border-color: #1e293b; } .border-blue-200 { border-color: #bfdbfe; } .border-blue-700 { border-color: #1d4ed8; } .border-white\/20 { border-color: rgba(255,255,255,0.2); } .border-t { border-top-width: 1px; border-top-style: solid; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .blur-3xl { filter: blur(64px); } .opacity-70 { opacity: 0.7; } .group:hover .group-hover\:scale-105 { transform: scale(1.05); } .group:hover .group-hover\:scale-110 { transform: scale(1.1); } .group:hover .group-hover\:opacity-100 { opacity: 1; } .hover\:scale-105:hover { transform: scale(1.05); } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); } .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .hover\:bg-blue-50:hover { background-color: #eff6ff; } .hover\:bg-slate-50:hover { background-color: #f8fafc; } .hover\:bg-slate-600:hover { background-color: #475569; } .hover\:bg-slate-800:hover { background-color: #1e293b; } .hover\:bg-white:hover { background-color: #fff; } .hover\:bg-green-600:hover { background-color: #16a34a; } .hover\:bg-blue-600:hover { background-color: #2563eb; } .hover\:bg-purple-600:hover { background-color: #9333ea; } .hover\:bg-indigo-50:hover { background-color: #eef2ff; } .hover\:text-blue-600:hover { color: #2563eb; } .hover\:text-blue-400:hover { color: #60a5fa; } .hover\:text-purple-600:hover { color: #9333ea; } .hover\:text-indigo-600:hover { color: #4f46e5; } .hover\:text-slate-900:hover { color: #0f172a; } .hover\:text-white:hover { color: #fff; } .hover\:border-slate-600:hover { border-color: #475569; } .hover\:border-white\/50:hover { border-color: rgba(255,255,255,0.5); } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4,0,0.2,1); } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .top-0 { top: 0; } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .-top-40 { top: -10rem; } .-right-40 { right: -10rem; } .-bottom-40 { bottom: -10rem; } .-left-40 { left: -10rem; } .-bottom-5 { bottom: -1.25rem; } .left-1\/2 { left: 50%; } .-translate-x-1\/2 { transform: translateX(-50%); } .-translate-y-1\/2 { transform: translateY(-50%); } .translate-x-1\/2 { transform: translateX(50%); } .translate-y-1\/2 { transform: translateY(50%); } .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .invisible { visibility: hidden; } .visible { visibility: visible; } .pointer-events-none { pointer-events: none; } .select-none { user-select: none; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .align-middle { vertical-align: middle; } .align-top { vertical-align: top; } .appearance-none { appearance: none; } .outline-none { outline: none; } .ring-0 { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow); } .focus\:ring-2:focus { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 2px var(--tw-ring-color); } .focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; } .focus\:border-blue-500:focus { border-color: #3b82f6; } .disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .placeholder-slate-400::placeholder { color: #94a3b8; } .placeholder-slate-500::placeholder { color: #64748b; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break-words { overflow-wrap: break-word; } .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-nowrap { white-space: nowrap; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .decoration-slate-400 { text-decoration-color: #94a3b8; } .underline-offset-4 { text-underline-offset: 4px; } .decoration-2 { text-decoration-thickness: 2px; } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .tabular-nums { font-variant-numeric: tabular-nums; } .ordinal { font-variant-numeric: ordinal; } .slashed-zero { font-variant-numeric: slashed-zero; } .lining-nums { font-variant-numeric: lining-nums; } .oldstyle-nums { font-variant-numeric: oldstyle-nums; } .proportional-nums { font-variant-numeric: proportional-nums; } .diagonal-fractions { font-variant-numeric: diagonal-fractions; } .stacked-fractions { font-variant-numeric: stacked-fractions; } /* 响应式断点 - md (768px) */ @media (min-width: 768px) { .md\:flex { display: flex; } .md\:block { display: block; } .md\:hidden { display: none; } .md\:grid { display: grid; } .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); } .md\:flex-row { flex-direction: row; } .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .md\:text-left { text-align: left; } .md\:text-center { text-align: center; } } /* 响应式断点 - lg (1024px) */ @media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:block { display: block; } .lg\:hidden { display: none; } .lg\:grid { display: grid; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .lg\:grid-cols-8 { grid-template-columns: repeat(8, 1fr); } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } } /* 响应式断点 - sm (640px) */ @media (min-width: 640px) { .sm\:flex { display: flex; } .sm\:flex-row { flex-direction: row; } .sm\:grid { display: grid; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .sm\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:text-5xl { font-size: 3rem; line-height: 1; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } } /* 响应式断点 - xl (1280px) */ @media (min-width: 1280px) { .xl\:grid { display: grid; } .xl\:grid-cols-10 { grid-template-columns: repeat(10, 1fr); } } /* Dark mode */ @media (prefers-color-scheme: dark) { .dark\:bg-slate-700 { background-color: #334155; } .dark\:bg-slate-800 { background-color: #1e293b; } .dark\:bg-slate-800\/50 { background-color: rgba(30,41,59,0.5); } .dark\:bg-slate-900 { background-color: #0f172a; } .dark\:text-white { color: #fff; } .dark\:text-slate-200 { color: #e2e8f0; } .dark\:text-slate-300 { color: #cbd5e1; } .dark\:text-slate-400 { color: #94a3b8; } .dark\:text-slate-500 { color: #64748b; } .dark\:border-slate-700 { border-color: #334155; } .dark\:border-slate-800 { border-color: #1e293b; } .dark\:hover\:bg-slate-600:hover { background-color: #475569; } .dark\:hover\:bg-slate-800:hover { background-color: #1e293b; } .dark\:hover\:text-blue-400:hover { color: #60a5fa; } .dark\:hover\:text-white:hover { color: #fff; } .dark\:hover\:border-slate-600:hover { border-color: #475569; } } /* ===== CSS 变量定义 ===== */ :root { --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe; --primary-300: #a5b4fc; --primary-400: #818cf8; --primary-500: #4f46e5; --primary-600: #4338ca; --primary-700: #3730a3; --primary-800: #312e81; --primary-900: #1e1b4b; --accent-500: #6366f1; --accent-600: #4f46e5; --accent-700: #4338ca; --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); --gradient-primary-hover: linear-gradient(135deg, #4338ca 0%, #3730a3 100%); --gradient-soft: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 50%, #ffffff 100%); --gradient-dark: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); --gradient-card: linear-gradient(135deg, rgba(100, 143, 245, 0.08) 0%, rgba(108, 108, 238, 0.08) 100%); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.1); --shadow-glow: 0 0 30px rgba(79, 70, 229, 0.2); --shadow-glow-lg: 0 0 50px rgba(67, 56, 202, 0.3); --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ===== 全局基础样式 ===== */ * { box-sizing: border-box; } html { background-color: #ffffff; transition: background-color var(--transition-normal); scroll-behavior: smooth; } html.dark { background-color: #0f172a; } body { background-color: inherit; transition: background-color var(--transition-normal); margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #334155; line-height: 1.6; } html.dark body { color: #cbd5e1; } #root { min-height: 100vh; background-color: inherit; transition: background-color var(--transition-normal); } .page-wrapper { background-color: inherit; min-height: 100vh; transition: background-color var(--transition-normal); width: 100%; overflow-x: clip; } .route-container { width: 100%; } /* ===== 全局按钮配色覆盖 ===== */ .bg-gradient-to-r.from-blue-600.to-blue-700 { background-image: linear-gradient(to right, #4338ca, #4f46e5) !important; } .bg-gradient-to-r.from-blue-600.to-blue-700:hover { background-image: linear-gradient(to right, #3730a3, #4338ca) !important; } .hover\:from-blue-700:hover { --tw-gradient-from: #3730a3 !important; } .hover\:to-blue-800:hover { --tw-gradient-to: #4338ca !important; } .hover\:shadow-blue-500\/25:hover { --tw-shadow-color: rgba(79, 110, 204, 0.3) !important; --tw-shadow: var(--tw-shadow-colored) !important; } /* 导航栏文字高亮 */ .\!text-blue-600 { color: #4f46e5 !important; } .dark .\!dark\:text-blue-400 { color: #818cf8 !important; } /* 导航栏下划线 */ .bg-blue-600 { background-color: #4f46e5 !important; } .dark .dark\:bg-blue-400 { background-color: #818cf8 !important; } /* 文字蓝色 */ .text-blue-600 { color: #4f46e5 !important; } .dark .dark\:text-blue-400 { color: #818cf8 !important; } .text-blue-800 { color: #4338ca !important; } .dark .dark\:text-blue-300 { color: #a5b4fc !important; } /* 背景蓝色 */ .bg-blue-100 { background-color: #e0e7ff !important; } .dark .dark\:bg-blue-900\/30 { background-color: rgba(79, 70, 229, 0.3) !important; } .bg-blue-50 { background-color: #eef2ff !important; } .dark .dark\:bg-blue-900\/20 { background-color: rgba(79, 70, 229, 0.2) !important; } /* 边框蓝色 */ .border-blue-600 { border-color: #4f46e5 !important; } /* Hero 渐变文字 */ .from-blue-600 { --tw-gradient-from: #4f46e5 !important; } .via-purple-600 { --tw-gradient-to: #4338ca !important; --tw-gradient-stops: var(--tw-gradient-from), #4338ca, var(--tw-gradient-to) !important; } .to-indigo-600 { --tw-gradient-to: #4338ca !important; } /* ===== 导航栏样式调整 ===== */ /* ===== 移动端菜单 ===== */ .mobile-menu { display: none; max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); } .mobile-menu.active { display: block; max-height: 500px; } /* ======================================== 导航栏 - 清新科技风 ======================================== */ header { position: sticky !important; top: 0; z-index: 9999; transition: all var(--transition-normal); } header.bg-white\/95, header.dark\:bg-slate-900\/95 { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(100, 143, 245, 0.1) !important; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04); } html.dark header { background: rgba(15, 23, 42, 0.9) !important; border-bottom: 1px solid rgba(100, 143, 245, 0.15) !important; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2); } header nav a { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; position: relative; font-weight: 500; font-size: 0.95rem; transition: all var(--transition-fast); padding: 0.25rem 0; } header nav a:hover { color: var(--primary-600) !important; } html.dark header nav a:hover { color: var(--primary-400) !important; } header nav a.relative span { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 28px !important; height: 3px !important; background: var(--gradient-primary) !important; border-radius: 3px; box-shadow: 0 0 8px rgba(100, 143, 245, 0.4); } /* 导航CTA按钮 */ header a[href*="yingzi.99kami.com"] { background: var(--gradient-primary) !important; border: none !important; color: #ffffff !important; padding: 0.5rem 1.5rem !important; border-radius: 9999px !important; font-weight: 600 !important; font-size: 0.9rem !important; transition: all var(--transition-normal) !important; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(100, 143, 245, 0.3); } header a[href*="yingzi.99kami.com"]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transition: left 0.6s ease; } header a[href*="yingzi.99kami.com"]:hover::before { left: 100%; } header a[href*="yingzi.99kami.com"]:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(100, 143, 245, 0.4); background: var(--gradient-primary-hover) !important; } /* 主题切换按钮组 */ header .bg-slate-100, header .dark\:bg-slate-800 { background: rgba(100, 143, 245, 0.08) !important; border: 1px solid rgba(100, 143, 245, 0.15); padding: 4px !important; gap: 2px !important; } html.dark header .bg-slate-100, html.dark header .dark\:bg-slate-800 { background: rgba(100, 143, 245, 0.12) !important; border: 1px solid rgba(100, 143, 245, 0.2); } header button[id$="-mode"] { transition: all var(--transition-fast) !important; border-radius: 9999px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } header button[id$="-mode"]:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.5); } html.dark header button[id$="-mode"]:hover { background: rgba(255, 255, 255, 0.1); } header button[id$="-mode"].active { background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); color: var(--primary-600) !important; } html.dark header button[id$="-mode"].active { background: rgba(30, 41, 59, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); color: var(--primary-400) !important; } /* ======================================== Hero区域 - 清新科技风 ======================================== */ section#home { background: var(--gradient-soft) !important; position: relative; overflow: hidden; padding-top: 6rem !important; padding-bottom: 6rem !important; } html.dark section#home { background: var(--gradient-dark) !important; } section#home::before { content: ''; position: absolute; top: -20%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(100, 143, 245, 0.12) 0%, transparent 70%); border-radius: 50%; animation: float 8s ease-in-out infinite; pointer-events: none; } section#home::after { content: ''; position: absolute; bottom: -20%; left: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(108, 108, 238, 0.1) 0%, transparent 70%); border-radius: 50%; animation: float 10s ease-in-out infinite reverse; pointer-events: none; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-25px) scale(1.05); } } section#home h1 { color: #0f172a !important; background: linear-gradient(135deg, #5b5bd6 0%, #4338ca 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2 !important; } html.dark section#home h1 { background: linear-gradient(135deg, #818cf8 0%, #a5b4fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } section#home p { color: #475569 !important; } html.dark section#home p { color: #94a3b8 !important; } /* Hero 主按钮 */ #home a[href*="yingzi.99kami.com"], #home a:first-of-type:not([href*="yingzi.99kami.com"]), #home .flex a.bg-gradient-to-r { background: var(--gradient-primary) !important; color: #ffffff !important; border: none !important; padding: 0.875rem 2rem !important; border-radius: 9999px !important; font-weight: 600 !important; font-size: 1rem !important; position: relative !important; overflow: hidden !important; transition: all var(--transition-normal) !important; box-shadow: 0 8px 25px rgba(100, 143, 245, 0.3); display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; } #home a[href*="yingzi.99kami.com"]::before, #home a:first-of-type:not([href*="yingzi.99kami.com"])::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; } #home a[href*="yingzi.99kami.com"]:hover::before, #home a:first-of-type:not([href*="yingzi.99kami.com"]):hover::before { left: 100%; } #home a[href*="yingzi.99kami.com"]:hover, #home a:first-of-type:not([href*="yingzi.99kami.com"]):hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(100, 143, 245, 0.4); } /* Hero 次按钮 */ #home a[href*="yingzi.99kami.com"] { background: #ffffff !important; color: var(--primary-700) !important; border: 2px solid rgba(100, 143, 245, 0.2) !important; backdrop-filter: blur(10px); padding: 0.875rem 2rem !important; border-radius: 9999px !important; font-weight: 600 !important; font-size: 1rem !important; transition: all var(--transition-normal) !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; } html.dark #home a[href*="yingzi.99kami.com"] { background: rgba(30, 41, 59, 0.8) !important; color: var(--primary-300) !important; border: 2px solid rgba(100, 143, 245, 0.3) !important; } #home a[href*="yingzi.99kami.com"]:hover { background: #ffffff !important; border-color: var(--primary-500) !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(100, 143, 245, 0.15); } html.dark #home a[href*="yingzi.99kami.com"]:hover { background: rgba(30, 41, 59, 1) !important; border-color: var(--primary-400) !important; } /* Hero 右侧卡片 */ #home .relative img[alt="logo"] { border-radius: 1.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); } html.dark #home .relative img[alt="logo"] { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); } /* ======================================== 内部页面顶部横幅 ======================================== */ .route-container > div > section:first-child:not(#home), .route-container > section:first-child:not(#home), .page-wrapper > div > section:first-child:not(#home), .min-h-screen > section:first-child:not(#home) { background: var(--gradient-primary) !important; position: relative; overflow: hidden; padding: 5rem 0 !important; } .route-container > div > section:first-child:not(#home)::before, .route-container > section:first-child:not(#home)::before, .page-wrapper > div > section:first-child:not(#home)::before, .min-h-screen > section:first-child:not(#home)::before { content: ''; position: absolute; top: -80%; right: -5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); border-radius: 50%; animation: float 12s ease-in-out infinite; pointer-events: none; } .route-container > div > section:first-child:not(#home) h1, .route-container > section:first-child:not(#home) h1, .page-wrapper > div > section:first-child:not(#home) h1, .min-h-screen > section:first-child:not(#home) h1 { color: #ffffff !important; font-weight: 700 !important; } .route-container > div > section:first-child:not(#home) p, .route-container > section:first-child:not(#home) p, .page-wrapper > div > section:first-child:not(#home) p, .min-h-screen > section:first-child:not(#home) p { color: rgba(255, 255, 255, 0.85) !important; } html.dark .route-container > div > section:first-child:not(#home), html.dark .route-container > section:first-child:not(#home), html.dark .page-wrapper > div > section:first-child:not(#home), html.dark .min-h-screen > section:first-child:not(#home) { background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #1e1b4b 100%) !important; } html.dark .route-container > div > section:first-child:not(#home) p, html.dark .route-container > section:first-child:not(#home) p, html.dark .page-wrapper > div > section:first-child:not(#home) p, html.dark .min-h-screen > section:first-child:not(#home) p { color: rgba(203, 213, 225, 0.9) !important; } /* ======================================== 区块通用样式 ======================================== */ section { position: relative; } #advantages, #services, #qualifications, section[class*="bg-slate-50"] { background-color: #f8fafc; } html.dark #advantages, html.dark #services, html.dark #qualifications, html.dark section[class*="bg-slate-50"] { background-color: #0f172a; } #solutions, #features, #partners, section[class*="bg-white"] { background-color: #ffffff; } html.dark #solutions, html.dark #features, html.dark #partners, html.dark section[class*="bg-white"] { background-color: #1e293b; } /* 区块标题 */ section h2 { position: relative; display: inline-block; color: #0f172a !important; font-weight: 700 !important; } html.dark section h2 { color: #f1f5f9 !important; } section h2 + p { color: #64748b !important; } html.dark section h2 + p { color: #94a3b8 !important; } /* 小标题标签 */ section .inline-flex.items-center.px-3.py-1, section .text-sm.font-medium { background: rgba(100, 143, 245, 0.1); color: var(--primary-600); border-radius: 9999px; padding: 0.375rem 1rem; font-weight: 500; font-size: 0.875rem; } html.dark section .inline-flex.items-center.px-3.py-1, html.dark section .text-sm.font-medium { background: rgba(100, 143, 245, 0.15); color: var(--primary-400); } /* ======================================== 核心优势卡片 - 清新科技风 ======================================== */ #advantages .grid > div, section .grid > div[class*="bg-white"] { background: #ffffff; border-radius: var(--radius-xl); padding: 1.75rem; transition: all var(--transition-normal); position: relative; overflow: hidden; border: 1px solid rgba(100, 143, 245, 0.1); box-shadow: var(--shadow-sm); } html.dark #advantages .grid > div, html.dark section .grid > div[class*="bg-white"] { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(100, 143, 245, 0.15); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } #advantages .grid > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-normal); border-radius: 4px 4px 0 0; } #advantages .grid > div:hover::before { transform: scaleX(1); } #advantages .grid > div:hover, section .grid > div[class*="bg-white"]:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(100, 143, 245, 0.25); } /* 卡片图标 */ #advantages .w-16.h-16 { background: var(--gradient-primary) !important; border-radius: 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 20px rgba(100, 143, 245, 0.25) !important; transition: all var(--transition-normal) !important; } #advantages .grid > div:hover .w-16.h-16 { transform: scale(1.08); box-shadow: 0 12px 30px rgba(100, 143, 245, 0.35) !important; } #advantages .w-16.h-16 svg { color: #ffffff !important; } /* 不同卡片的图标颜色变化 */ #advantages .grid > div:nth-child(2) .w-16.h-16 { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25) !important; } #advantages .grid > div:nth-child(3) .w-16.h-16 { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; box-shadow: 0 8px 20px rgba(108, 108, 238, 0.25) !important; } #advantages .grid > div:nth-child(4) .w-16.h-16 { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.25) !important; } /* 卡片标题 */ #advantages h3 { color: #0f172a !important; font-weight: 600 !important; } html.dark #advantages h3 { color: #f1f5f9 !important; } #advantages p { color: #64748b !important; } html.dark #advantages p { color: #94a3b8 !important; } /* ======================================== 解决方案卡片 - 清新科技风 ======================================== */ #solutions .grid > div { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border-radius: var(--radius-xl); padding: 1.75rem; transition: all var(--transition-normal); position: relative; overflow: hidden; border: 1px solid rgba(100, 143, 245, 0.1); } html.dark #solutions .grid > div { background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); border: 1px solid rgba(100, 143, 245, 0.15); } #solutions .grid > div:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(100, 143, 245, 0.3); } #solutions h3 { color: #0f172a !important; font-weight: 600 !important; } html.dark #solutions h3 { color: #f1f5f9 !important; } #solutions p { color: #64748b !important; } html.dark #solutions p { color: #94a3b8 !important; } /* 了解更多按钮 */ #solutions a[href*="了解更多"] { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary-600); font-weight: 600; transition: all var(--transition-fast); font-size: 0.9rem; } html.dark #solutions a[href*="了解更多"] { color: var(--primary-400); } #solutions a[href*="了解更多"]:hover { gap: 0.625rem; color: var(--primary-700); } /* 解决方案图标 */ #solutions .w-12.h-12, #solutions .size-12 { background: var(--gradient-primary) !important; border-radius: 0.875rem !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 6px 15px rgba(100, 143, 245, 0.2) !important; } #solutions .w-12.h-12 svg, #solutions .size-12 svg { color: #ffffff !important; } /* ======================================== 合作伙伴Logo区域 ======================================== */ #partners .grid > div { background: #ffffff; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; transition: all var(--transition-normal); border: 1px solid rgba(100, 143, 245, 0.1); padding: 1.5rem; aspect-ratio: auto; height: auto; min-height: 80px; } html.dark #partners .grid > div { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(100, 143, 245, 0.15); } #partners .grid > div:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); border-color: rgba(100, 143, 245, 0.3); } #partners img { transition: all var(--transition-normal); max-height: 40px; } #partners .grid > div:hover img { opacity: 1 !important; transform: scale(1.05); } /* 合作伙伴分类卡片 */ section > div > div.grid > div[class*="bg-red-100"], section > div > div.grid > div[class*="bg-green-100"], section > div > div.grid > div[class*="bg-blue-100"], section > div > div.grid > div[class*="bg-purple-100"], section > div > div.grid > div[class*="bg-yellow-100"], section > div > div.grid > div[class*="bg-orange-100"] { background: #ffffff !important; border-radius: var(--radius-xl) !important; padding: 2rem !important; transition: all var(--transition-normal) !important; border: 1px solid rgba(100, 143, 245, 0.1) !important; box-shadow: var(--shadow-sm); } html.dark section > div > div.grid > div[class*="bg-red-100"], html.dark section > div > div.grid > div[class*="bg-green-100"], html.dark section > div > div.grid > div[class*="bg-blue-100"], html.dark section > div > div.grid > div[class*="bg-purple-100"], html.dark section > div > div.grid > div[class*="bg-yellow-100"], html.dark section > div > div.grid > div[class*="bg-orange-100"] { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important; border: 1px solid rgba(100, 143, 245, 0.15) !important; } section > div > div.grid > div[class*="bg-red-100"]:hover, section > div > div.grid > div[class*="bg-green-100"]:hover, section > div > div.grid > div[class*="bg-blue-100"]:hover, section > div > div.grid > div[class*="bg-purple-100"]:hover, section > div > div.grid > div[class*="bg-yellow-100"]:hover, section > div > div.grid > div[class*="bg-orange-100"]:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(100, 143, 245, 0.3) !important; } section > div > div.grid > div[class*="bg-red-100"] h3, section > div > div.grid > div[class*="bg-green-100"] h3, section > div > div.grid > div[class*="bg-blue-100"] h3, section > div > div.grid > div[class*="bg-purple-100"] h3, section > div > div.grid > div[class*="bg-yellow-100"] h3, section > div > div.grid > div[class*="bg-orange-100"] h3 { color: #0f172a !important; } html.dark section > div > div.grid > div[class*="bg-red-100"] h3, html.dark section > div > div.grid > div[class*="bg-green-100"] h3, html.dark section > div > div.grid > div[class*="bg-blue-100"] h3, html.dark section > div > div.grid > div[class*="bg-purple-100"] h3, html.dark section > div > div.grid > div[class*="bg-yellow-100"] h3, html.dark section > div > div.grid > div[class*="bg-orange-100"] h3 { color: #f1f5f9 !important; } section > div > div.grid > div[class*="bg-red-100"] p, section > div > div.grid > div[class*="bg-green-100"] p, section > div > div.grid > div[class*="bg-blue-100"] p, section > div > div.grid > div[class*="bg-purple-100"] p, section > div > div.grid > div[class*="bg-yellow-100"] p, section > div > div.grid > div[class*="bg-orange-100"] p { color: #64748b !important; } html.dark section > div > div.grid > div[class*="bg-red-100"] p, html.dark section > div > div.grid > div[class*="bg-green-100"] p, html.dark section > div > div.grid > div[class*="bg-blue-100"] p, html.dark section > div > div.grid > div[class*="bg-purple-100"] p, html.dark section > div > div.grid > div[class*="bg-yellow-100"] p, html.dark section > div > div.grid > div[class*="bg-orange-100"] p { color: #94a3b8 !important; } /* ======================================== 服务项目/全品类服务 ======================================== */ #services .grid > div, #features .grid > div { text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius-xl); transition: all var(--transition-normal); background: #ffffff; border: 1px solid rgba(100, 143, 245, 0.1); } html.dark #services .grid > div, html.dark #features .grid > div { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(100, 143, 245, 0.15); } #services .grid > div:hover, #features .grid > div:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(100, 143, 245, 0.3); } #services h3, #features h3 { color: #0f172a !important; font-weight: 600 !important; } html.dark #services h3, html.dark #features h3 { color: #f1f5f9 !important; } #services p, #features p { color: #64748b !important; } html.dark #services p, html.dark #features p { color: #94a3b8 !important; } /* ======================================== 资质认证区域 ======================================== */ #qualifications .grid > div { background: #ffffff; border-radius: var(--radius-xl); padding: 1.5rem; transition: all var(--transition-normal); border: 1px solid rgba(100, 143, 245, 0.1); text-align: center; } html.dark #qualifications .grid > div { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(100, 143, 245, 0.15); } #qualifications .grid > div:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(100, 143, 245, 0.3); } #qualifications img { border-radius: var(--radius-md); margin-bottom: 1rem; } #qualifications h3 { color: #0f172a !important; font-weight: 600 !important; } html.dark #qualifications h3 { color: #f1f5f9 !important; } #qualifications p { color: #64748b !important; font-size: 0.9rem; } html.dark #qualifications p { color: #94a3b8 !important; } /* ======================================== 服务保障区域（Tailwind渐变类名区块，其他页面使用） ======================================== */ section[class*="bg-gradient-to-br"]:last-of-type { position: relative; overflow: hidden; } section[class*="bg-gradient-to-br"]:last-of-type::before { content: ''; position: absolute; top: -40%; left: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); border-radius: 50%; animation: float 10s ease-in-out infinite; pointer-events: none; } section[class*="bg-gradient-to-br"]:last-of-type::after { content: ''; position: absolute; bottom: -40%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); border-radius: 50%; animation: float 12s ease-in-out infinite reverse; pointer-events: none; } section[class*="bg-gradient-to-br"]:last-of-type h2, section[class*="bg-gradient-to-br"]:last-of-type p { color: #ffffff; } html.dark section[class*="bg-gradient-to-br"]:last-of-type h2, html.dark section[class*="bg-gradient-to-br"]:last-of-type p { color: #f8fafc; } /* 联系按钮 */ section button[class*="bg-white"] { background: #ffffff !important; color: var(--primary-700) !important; padding: 0.875rem 2rem !important; border-radius: 9999px !important; font-weight: 600 !important; font-size: 1rem !important; border: none !important; cursor: pointer !important; transition: all var(--transition-normal) !important; position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } section button[class*="bg-white"]:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); } /* 联系区域图标容器 */ section[class*="bg-gradient-to-br"] .w-12.h-12, section[class*="bg-gradient-to-br"] .size-12 { background: rgba(255, 255, 255, 0.2) !important; border-radius: 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(10px); transition: all var(--transition-normal); } html.dark section[class*="bg-gradient-to-br"] .w-12.h-12, html.dark section[class*="bg-gradient-to-br"] .size-12 { background: rgba(100, 143, 245, 0.3) !important; } section[class*="bg-gradient-to-br"] .w-12.h-12:hover, section[class*="bg-gradient-to-br"] .size-12:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.3) !important; } section[class*="bg-gradient-to-br"] .inline-flex.items-center.px-4.py-2 { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; backdrop-filter: blur(10px) !important; border-radius: 9999px; } html.dark section[class*="bg-gradient-to-br"] .inline-flex.items-center.px-4.py-2 { background: rgba(100, 143, 245, 0.3) !important; } /* 联系右侧白色卡片 */ section[class*="bg-gradient-to-br"] .bg-white { background: #ffffff !important; color: #0f172a !important; border-radius: var(--radius-xl); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); padding: 2rem; } section[class*="bg-gradient-to-br"] .bg-white h3 { color: #0f172a !important; } section[class*="bg-gradient-to-br"] .bg-white p { color: #64748b !important; } html.dark section[class*="bg-gradient-to-br"] .bg-white, html.dark section[class*="bg-gradient-to-br"] .dark\:bg-slate-800 { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; color: #f8fafc !important; border: 1px solid rgba(100, 143, 245, 0.2); } html.dark section[class*="bg-gradient-to-br"] .bg-white h3, html.dark section[class*="bg-gradient-to-br"] .dark\:bg-slate-800 h3 { color: #f8fafc !important; } html.dark section[class*="bg-gradient-to-br"] .bg-white p, html.dark section[class*="bg-gradient-to-br"] .dark\:bg-slate-800 p { color: #94a3b8 !important; } /* ======================================== 关于我们/联系我们 页面内容 ======================================== */ section .space-y-8 > .flex.items-start, section .space-y-6 > .flex.items-start { padding: 1.25rem; border-radius: var(--radius-lg); transition: all var(--transition-normal); background: rgba(100, 143, 245, 0.03); border: 1px solid rgba(100, 143, 245, 0.08); } section .space-y-8 > .flex.items-start:hover, section .space-y-6 > .flex.items-start:hover { background: rgba(100, 143, 245, 0.06); border-color: rgba(100, 143, 245, 0.15); transform: translateX(4px); } html.dark section .space-y-8 > .flex.items-start, html.dark section .space-y-6 > .flex.items-start { background: rgba(100, 143, 245, 0.06); border: 1px solid rgba(100, 143, 245, 0.1); } html.dark section .space-y-8 > .flex.items-start:hover, html.dark section .space-y-6 > .flex.items-start:hover { background: rgba(100, 143, 245, 0.1); border-color: rgba(100, 143, 245, 0.2); } /* 图标容器 */ section .size-14, section .w-14.h-14 { border-radius: 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; } section .bg-purple-100, section .bg-green-100, section .bg-blue-100, section .bg-red-100, section .bg-yellow-100, section .bg-orange-100 { background: rgba(100, 143, 245, 0.1) !important; } html.dark section .bg-purple-100, html.dark section .bg-green-100, html.dark section .bg-blue-100, html.dark section .bg-red-100, html.dark section .bg-yellow-100, html.dark section .bg-orange-100 { background: rgba(100, 143, 245, 0.15) !important; } section .bg-purple-100 svg, section .bg-green-100 svg, section .bg-blue-100 svg, section .bg-red-100 svg, section .bg-yellow-100 svg, section .bg-orange-100 svg { color: var(--primary-600) !important; } html.dark section .bg-purple-100 svg, html.dark section .bg-green-100 svg, html.dark section .bg-blue-100 svg, html.dark section .bg-red-100 svg, html.dark section .bg-yellow-100 svg, html.dark section .bg-orange-100 svg { color: var(--primary-400) !important; } section h3 { color: #0f172a !important; font-weight: 600 !important; } html.dark section h3 { color: #f1f5f9 !important; } /* ======================================== 服务卡片 - 图片模糊背景 + 图标居中 ======================================== */ .service-card-img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px); transform: scale(1.15); transition: all 0.7s ease; } .group:hover .service-card-img { filter: blur(6px); transform: scale(1.3); } .service-card-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); transition: all 0.5s ease; } .group:hover .service-card-overlay { background: rgba(0, 0, 0, 0.45); } .service-card-icon-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .service-card-icon { width: 64px; height: 64px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; } .group:hover .service-card-icon { transform: scale(1.12) rotate(6deg); } .service-card-icon svg { width: 32px; height: 32px; color: #fff; } /* ======================================== 服务项目展示 - 横向大图卡片布局 ======================================== */ .service-showcase { display: flex; flex-direction: column; gap: 1.5rem; } .service-showcase-card { display: flex; background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); border: 1px solid #e2e8f0; transition: all 0.35s ease; } html.dark .service-showcase-card { background: #1e293b; border-color: #334155; } .service-showcase-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1); } /* 偶数卡片图片在右侧 */ .service-showcase-card:nth-child(even) { flex-direction: row-reverse; } .service-showcase-image { flex: 0 0 42%; min-height: 280px; overflow: hidden; background: #f1f5f9; position: relative; } html.dark .service-showcase-image { background: #0f172a; } .service-showcase-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .service-showcase-card:hover .service-showcase-image img { transform: scale(1.06); } .service-showcase-body { flex: 1; padding: 2rem 2rem 2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; } .service-showcase-card:nth-child(even) .service-showcase-body { padding: 2rem 2.5rem 2rem 2rem; } .service-showcase-category { display: inline-block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .service-showcase-card:nth-child(8n+1) .service-showcase-category { color: #3b82f6; } .service-showcase-card:nth-child(8n+2) .service-showcase-category { color: #8b5cf6; } .service-showcase-card:nth-child(8n+3) .service-showcase-category { color: #f59e0b; } .service-showcase-card:nth-child(8n+4) .service-showcase-category { color: #ef4444; } .service-showcase-card:nth-child(8n+5) .service-showcase-category { color: #06b6d4; } .service-showcase-card:nth-child(8n+6) .service-showcase-category { color: #22c55e; } .service-showcase-card:nth-child(8n+7) .service-showcase-category { color: #f97316; } .service-showcase-card:nth-child(8n+8) .service-showcase-category { color: #ec4899; } .service-showcase-body h3 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 0 0 0.75rem; } html.dark .service-showcase-body h3 { color: #f8fafc; } .service-showcase-body > p { font-size: 0.95rem; color: #64748b; line-height: 1.7; margin: 0 0 1.25rem; max-width: 480px; } html.dark .service-showcase-body > p { color: #cbd5e1; } .service-showcase-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .service-showcase-tags span { background: #f1f5f9; color: #475569; font-size: 0.8rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-weight: 500; } html.dark .service-showcase-tags span { background: #334155; color: #e2e8f0; } .service-showcase-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 600; color: #3b82f6; text-decoration: none; transition: gap 0.3s ease; } html.dark .service-showcase-link { color: #60a5fa; } .service-showcase-link:hover { gap: 0.7rem; } /* 响应式 */ @media (max-width: 1024px) { .service-showcase-image { flex: 0 0 38%; min-height: 240px; } .service-showcase-body { padding: 1.5rem; } .service-showcase-card:nth-child(even) .service-showcase-body { padding: 1.5rem; } } @media (max-width: 768px) { .service-showcase-card, .service-showcase-card:nth-child(even) { flex-direction: column; } .service-showcase-image { flex: none; height: 200px; min-height: auto; } .service-showcase-body, .service-showcase-card:nth-child(even) .service-showcase-body { padding: 1.25rem 1.5rem; } .service-showcase-body h3 { font-size: 1.25rem; } } /* ======================================== 合作优势卡片 - 横向条纹风格 ======================================== */ /* ============================================ 合作优势卡片 - 渐变背景居中风格 ============================================ */ .advantage-card { position: relative; border-radius: 1.25rem; padding: 2.5rem 1.5rem 1.75rem; color: #fff; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; } .advantage-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .advantage-card .adv-num { position: absolute; top: 1rem; right: 1.25rem; font-size: 2.5rem; font-weight: 800; opacity: 0.15; color: #fff; line-height: 1; pointer-events: none; font-family: 'Georgia', serif; } .advantage-card .adv-circle { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.07); bottom: -60px; right: -40px; pointer-events: none; } .advantage-card .adv-circle2 { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.05); top: -30px; left: -20px; pointer-events: none; } .advantage-card .adv-icon-wrap { width: 68px; height: 68px; margin: 0 auto 1.25rem; background: rgba(255,255,255,0.2); border-radius: 1rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 0.4s ease; position: relative; z-index: 1; } .advantage-card:hover .adv-icon-wrap { transform: scale(1.1); background: rgba(255,255,255,0.3); } .advantage-card .adv-icon-wrap svg { width: 32px; height: 32px; color: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .advantage-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: #fff !important; position: relative; z-index: 1; } .advantage-card p { font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.85) !important; position: relative; z-index: 1; margin: 0; } /* 响应式 */ @media (max-width: 768px) { .advantage-grid { grid-template-columns: 1fr !important; } .advantage-card { padding: 2rem 1.25rem 1.5rem; } } /* ======================================== 合作伙伴分类卡片 ======================================== */ .partner-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; transition: all 0.4s ease; } .partner-card:hover { box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); transform: translateY(-6px); } .dark .partner-card { background: #1e293b; border-color: #334155; } .partner-card-stripe { height: 4px; } .partner-card-body { padding: 1.5rem; } .partner-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .partner-card-icon { width: 48px; height: 48px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .partner-card-icon svg { width: 24px; height: 24px; color: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .partner-card-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem 0; } .dark .partner-card-title { color: #fff; } .partner-card-desc { font-size: 0.875rem; color: #64748b; margin: 0; } .dark .partner-card-desc { color: #94a3b8; } .partner-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .partner-card-tag { font-size: 0.75rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-weight: 500; } .partner-tag-red { background: #fef2f2; color: #dc2626; } .dark .partner-tag-red { background: rgba(220,38,38,0.15); color: #f87171; } .partner-tag-green { background: #f0fdf4; color: #16a34a; } .dark .partner-tag-green { background: rgba(22,163,74,0.15); color: #4ade80; } .partner-tag-blue { background: #eff6ff; color: #2563eb; } .dark .partner-tag-blue { background: rgba(37,99,235,0.15); color: #60a5fa; } .partner-tag-purple { background: #faf5ff; color: #9333ea; } .dark .partner-tag-purple { background: rgba(147,51,234,0.15); color: #c084fc; } .partner-tag-orange { background: #fff7ed; color: #ea580c; } .dark .partner-tag-orange { background: rgba(234,88,12,0.15); color: #fb923c; } .partner-tag-indigo { background: #eef2ff; color: #4f46e5; } .dark .partner-tag-indigo { background: rgba(79,70,229,0.15); color: #818cf8; } /* ======================================== 页脚 - 清新科技风 ======================================== */ footer { width: 100%; margin: 0; padding: 0; position: relative; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-top: 1px solid rgba(100, 143, 245, 0.1); } html.dark footer { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); border-top: 1px solid rgba(100, 143, 245, 0.15); } footer #gamelifeFooter { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .glmall-footer-fn, .glmall-footer-about, .glmall-footer-group { width: 100%; box-sizing: border-box; } /* 页脚优势区域 */ .glmall-footer-advantage { padding: 2rem 0; } .glmall-footer-advantage ul { display: flex; align-items: center; justify-content: space-between; } .glmall-footer-advantage ul li { flex: 1; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; position: relative; } .glmall-footer-advantage ul li:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: linear-gradient(180deg, transparent, rgba(100, 143, 245, 0.3), transparent); } html.dark .glmall-footer-advantage ul li:not(:last-child)::after { background: linear-gradient(180deg, transparent, rgba(100, 143, 245, 0.4), transparent); } .advantage-icon-wrap { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, rgba(100, 143, 245, 0.1), rgba(108, 108, 238, 0.1)); border: 1px solid rgba(100, 143, 245, 0.2); transition: all 0.3s ease; } .glmall-footer-advantage ul li:hover .advantage-icon-wrap { background: linear-gradient(135deg, rgba(100, 143, 245, 0.2), rgba(108, 108, 238, 0.2)); border-color: rgba(100, 143, 245, 0.4); transform: scale(1.05); } .advantage-text { display: flex; flex-direction: column; } .advantage-text strong { font-size: 1rem; font-weight: 600; color: #0f172a; margin-bottom: 0.25rem; } html.dark .advantage-text strong { color: #f8fafc; } .advantage-text p { font-size: 0.8125rem; color: #64748b; line-height: 1.4; } html.dark .advantage-text p { color: #94a3b8; } /* 深色模式下SVG图标颜色调整 */ html.dark .advantage-icon-wrap svg { stroke: #93c5fd; } /* 页脚标题 */ .glmall-title { color: #0f172a !important; font-weight: 600 !important; font-size: 1.05rem !important; margin-bottom: 1rem !important; } html.dark .glmall-title { color: #f1f5f9 !important; } /* 页脚链接 */ .glmall-f-col ul li a { transition: all var(--transition-fast); position: relative; display: inline-block; color: #64748b !important; } html.dark .glmall-f-col ul li a { color: #94a3b8 !important; } .glmall-f-col ul li a:hover { color: var(--primary-600) !important; padding-left: 4px; } html.dark .glmall-f-col ul li a:hover { color: var(--primary-400) !important; } /* 页脚底部版权 */ .glmall-copyright { padding: 1.5rem 0; border-top: 1px solid rgba(100, 143, 245, 0.1); } html.dark .glmall-copyright { border-top-color: rgba(100, 143, 245, 0.15); } /* 页脚文字 */ .glmall-friend-link a, .glmall-copyright-group a, .glmall-footer-qrcode div { color: #64748b; transition: color var(--transition-fast); } html.dark .glmall-friend-link a, html.dark .glmall-copyright-group a, html.dark .glmall-footer-qrcode div { color: #94a3b8; } .glmall-friend-link a:hover, .glmall-copyright-group a:hover { color: var(--primary-600); } html.dark .glmall-friend-link a:hover, html.dark .glmall-copyright-group a:hover { color: var(--primary-400); } /* ======================================== 文字颜色统一 ======================================== */ .text-slate-600 { color: #64748b !important; } html.dark .dark\:text-slate-400 { color: #94a3b8 !important; } .text-slate-900 { color: #0f172a !important; } html.dark .dark\:text-white { color: #f8fafc !important; } .text-slate-700 { color: #334155 !important; } html.dark .dark\:text-slate-300 { color: #cbd5e1 !important; } .text-slate-500 { color: #64748b !important; } /* ======================================== 滚动出现动画 ======================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(100, 143, 245, 0.3); } 50% { box-shadow: 0 0 40px rgba(100, 143, 245, 0.5); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } .animate-slide-in-left { animation: slideInLeft 0.6s ease-out forwards; } .animate-slide-in-right { animation: slideInRight 0.6s ease-out forwards; } /* ======================================== 动画延迟类 ======================================== */ .animation-delay-100 { animation-delay: 0.1s; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-300 { animation-delay: 0.3s; } .animation-delay-400 { animation-delay: 0.4s; } .animation-delay-500 { animation-delay: 0.5s; } .animation-delay-600 { animation-delay: 0.6s; } .animation-delay-700 { animation-delay: 0.7s; } .animation-delay-800 { animation-delay: 0.8s; } .animation-delay-1000 { animation-delay: 1s; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-3000 { animation-delay: 3s; } /* ======================================== 选择文本颜色 ======================================== */ ::selection { background: rgba(100, 143, 245, 0.25); color: #5b5bd6; } html.dark ::selection { background: rgba(100, 143, 245, 0.4); color: #ffffff; } /* ======================================== 滚动条样式 ======================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } html.dark ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4f46e5, #4338ca); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4338ca, #3730a3); } /* ======================================== 响应式调整 ======================================== */ @media (max-width: 1024px) { section#home { padding-top: 4rem !important; padding-bottom: 4rem !important; } } @media (max-width: 1024px) { .glmall-footer-advantage ul { flex-wrap: wrap; } .glmall-footer-advantage ul li { flex: 0 0 50%; box-sizing: border-box; } .glmall-footer-advantage ul li:nth-child(2)::after { display: none; } } @media (max-width: 768px) { .glmall-footer-link { grid-template-columns: 1fr 1fr; } section#home { padding-top: 3rem !important; padding-bottom: 3rem !important; } .route-container > div > section:first-child:not(#home), .route-container > section:first-child:not(#home), .page-wrapper > div > section:first-child:not(#home), .min-h-screen > section:first-child:not(#home) { padding: 3.5rem 0 !important; } } @media (max-width: 640px) { .glmall-footer-advantage ul li { flex: 0 0 100%; } .glmall-footer-advantage ul li::after { display: none !important; } .glmall-footer-advantage ul li { padding: 1rem; justify-content: center; text-align: center; } } @media (max-width: 480px) { .glmall-footer-link { grid-template-columns: 1fr; } .glmall-copyright-group { flex-direction: column; text-align: center; } section#home h1 { font-size: 2rem !important; } } /* ======================================== 主题切换按钮激活状态 ======================================== */ header button[id$="-mode"].active { background: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; color: #648ff5 !important; } html.dark header button[id$="-mode"].active { background: rgba(30, 41, 59, 0.95) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; color: #6c6cee !important; } header button[id$="-mode"]:not(.active) { background: transparent !important; box-shadow: none !important; } /* ======================================== 新布局样式 - 左对齐标题 / Bento / 横向卡片 ======================================== */ /* 左对齐区块标题 */ .section-header-left { text-align: left !important; max-width: 100% !important; } .section-header-left h2 { text-align: left !important; } .section-header-left p { text-align: left !important; margin-left: 0 !important; } /* Bento 网格布局 */ .bento-grid { display: grid; gap: 1.5rem; } .bento-grid-2x1 { grid-template-columns: 1fr; } @media (min-width: 768px) { .bento-grid-2x1 { grid-template-columns: 1fr 1fr; } } .bento-grid-main { grid-template-columns: 1fr; } @media (min-width: 1024px) { .bento-grid-main { grid-template-columns: 1.2fr 0.8fr; } .bento-grid-main > div:first-child { grid-row: span 2; } } /* 横向卡片 */ .card-horizontal { display: flex !important; flex-direction: row !important; align-items: flex-start !important; text-align: left !important; gap: 1.25rem; } .card-horizontal .card-icon { flex-shrink: 0; } .card-horizontal .card-body { flex: 1; min-width: 0; } /* 区块间距变体 */ .section-compact { padding-top: 4rem !important; padding-bottom: 4rem !important; } @media (min-width: 768px) { .section-compact { padding-top: 5rem !important; padding-bottom: 5rem !important; } } /* 双栏特性列表 */ .feature-split { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .feature-split { grid-template-columns: 1fr 1fr; gap: 3rem; } } /* 标签装饰线 */ .section-header-left .tag-accent { position: relative; padding-left: 1rem; } .section-header-left .tag-accent::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; background: var(--gradient-primary); border-radius: 4px; } /* 交错网格 - 奇数卡片偏移 */ .stagger-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .stagger-grid { grid-template-columns: 1fr 1fr; } .stagger-grid > div:nth-child(even) { margin-top: 2rem; } } @media (min-width: 1024px) { .stagger-grid { grid-template-columns: 1fr 1fr 1fr; } .stagger-grid > div:nth-child(3n+2) { margin-top: 2rem; } } /* 宽屏标题区域 */ .section-header-wide { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; } @media (min-width: 768px) { .section-header-wide { grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; } .section-header-wide .header-desc { text-align: right; } } /* 横向滚动卡片组 */ .scroll-cards { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .scroll-cards > div { scroll-snap-align: start; flex-shrink: 0; min-width: 280px; } /* 响应式调整补充 */ @media (max-width: 768px) { .card-horizontal { flex-direction: column !important; text-align: center !important; align-items: center !important; } .section-header-wide { text-align: center; } .section-header-wide .header-desc { text-align: center; } } /* ======================================== about.html 页面专用样式 ======================================== */ /* 公司简介区 */ .about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .about-intro-text h3 { font-size: 1.1rem; font-weight: 600; color: #3b82f6; margin-bottom: 0.5rem; letter-spacing: 0.05em; } .about-intro-text h2 { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 1.25rem; line-height: 1.3; } .about-intro-text p { font-size: 1rem; color: #64748b; line-height: 1.8; margin-bottom: 1.5rem; } .about-intro-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .about-intro-highlight-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #f8fafc; border-radius: 0.75rem; border: 1px solid #e2e8f0; } .about-intro-highlight-item .highlight-icon { width: 36px; height: 36px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .about-intro-highlight-item .highlight-icon svg { width: 20px; height: 20px; color: #fff; } .about-intro-highlight-item span { font-size: 0.875rem; font-weight: 600; color: #334155; } /* 右侧图片区 */ .about-intro-image { position: relative; } .about-intro-image-main { width: 100%; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); } .about-intro-image-main img { width: 100%; height: 380px; object-fit: cover; display: block; } .about-intro-stat-float { position: absolute; bottom: -1.5rem; left: -1.5rem; background: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 1rem; z-index: 2; } .about-intro-stat-float .stat-icon { width: 48px; height: 48px; border-radius: 0.75rem; background: linear-gradient(135deg, #3b82f6, #2563eb); display: flex; align-items: center; justify-content: center; } .about-intro-stat-float .stat-icon svg { width: 24px; height: 24px; color: #fff; } .about-intro-stat-float .stat-text strong { font-size: 1.5rem; font-weight: 800; color: #0f172a; display: block; line-height: 1.2; } .about-intro-stat-float .stat-text span { font-size: 0.8rem; color: #64748b; } /* 数据展示条 */ .about-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .about-stat-item { text-align: center; padding: 1.5rem 1rem; background: #fff; border-radius: 1rem; border: 1px solid #e2e8f0; transition: all 0.3s ease; } .about-stat-item:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .about-stat-item .stat-num { font-size: 2.5rem; font-weight: 800; line-height: 1; margin-bottom: 0.5rem; } .about-stat-item .stat-label { font-size: 0.875rem; color: #64748b; font-weight: 500; } /* 核心优势 */ .about-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .about-adv-card { background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; text-align: center; border: 1px solid #e2e8f0; transition: all 0.4s ease; position: relative; overflow: hidden; } .about-adv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .about-adv-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: transparent; } .about-adv-card .adv-card-icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .about-adv-card:hover .adv-card-icon { transform: scale(1.1) rotate(-3deg); } .about-adv-card .adv-card-icon svg { width: 32px; height: 32px; color: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .about-adv-card h3 { font-size: 1.2rem; font-weight: 700; color: #0f172a; margin-bottom: 0.75rem; } .about-adv-card p { font-size: 0.875rem; color: #64748b; line-height: 1.7; margin: 0; } /* 团队成员 */ .about-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .about-team-card { background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; text-align: center; border: 1px solid #e2e8f0; transition: all 0.4s ease; position: relative; overflow: hidden; } .about-team-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: transparent; } .about-team-card .team-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 3px solid #f1f5f9; transition: border-color 0.3s ease; } .about-team-card:hover .team-avatar { border-color: #dbeafe; } .about-team-card .team-name-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; } .about-team-card .team-name-row h4 { font-size: 1.1rem; font-weight: 700; color: #0f172a; margin: 0; } .about-team-card .team-badge { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 0.25rem; } .about-team-card .team-role { font-size: 0.8rem; color: #3b82f6; font-weight: 600; margin-bottom: 0.5rem; } .about-team-card .team-bio { font-size: 0.85rem; color: #64748b; line-height: 1.7; margin: 0; font-style: italic; } /* 联系方式卡片 */ .about-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .about-contact-card { background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; text-align: center; border: 1px solid #e2e8f0; transition: all 0.4s ease; } .about-contact-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .about-contact-card .contact-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; } .about-contact-card .contact-icon svg { width: 28px; height: 28px; color: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .about-contact-card h3 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; } .about-contact-card p { font-size: 0.85rem; color: #64748b; margin-bottom: 1rem; } .about-contact-card .contact-btn { display: inline-block; padding: 0.5rem 1.5rem; border-radius: 0.5rem; color: #fff; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .about-contact-card .contact-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* 服务承诺 */ .about-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .about-promise-card { background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; text-align: center; border: 1px solid #e2e8f0; transition: all 0.4s ease; position: relative; } .about-promise-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; border-radius: 3px 3px 0 0; transition: width 0.4s ease; } .about-promise-card:hover::after { width: 60%; } .about-promise-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .about-promise-card .promise-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; } .about-promise-card .promise-icon svg { width: 28px; height: 28px; color: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .about-promise-card h3 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; } .about-promise-card p { font-size: 0.85rem; color: #64748b; line-height: 1.7; margin: 0; } /* about 响应式 */ @media (max-width: 1024px) { .about-intro-grid { grid-template-columns: 1fr; } .about-stats-bar { grid-template-columns: repeat(2, 1fr); } .about-adv-grid { grid-template-columns: repeat(2, 1fr); } .about-team-grid { grid-template-columns: repeat(2, 1fr); } .about-promise-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .about-intro-grid { gap: 2rem; } .about-intro-text h2 { font-size: 1.5rem; } .about-intro-highlights { grid-template-columns: 1fr; } .about-stats-bar { grid-template-columns: 1fr 1fr; } .about-stat-item .stat-num { font-size: 2rem; } .about-adv-grid { grid-template-columns: 1fr; } .about-team-grid { grid-template-columns: 1fr; } .about-contact-grid { grid-template-columns: 1fr; } .about-promise-grid { grid-template-columns: 1fr; } .about-intro-stat-float { position: relative; bottom: auto; left: auto; margin-top: 1rem; } } /* ======================================== contact 页面专用样式 ======================================== */ /* 通用标签 */ .contact-label { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #ede9fe, #e0e7ff); color: #7c3aed; padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.5rem; } /* 联系信息卡片网格 */ .contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .contact-info-card { background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; transition: all 0.3s ease; position: relative; overflow: hidden; } .contact-info-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-color); } .contact-info-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); } .contact-info-card .contact-info-icon { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; } .contact-info-card h3 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 0.5rem 0; } .contact-info-card p { font-size: 0.95rem; color: #64748b; margin: 0 0 1rem 0; } .contact-info-tag { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-weight: 500; } .contact-info-btn { display: inline-block; color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1.5rem; border-radius: 9999px; text-decoration: none; transition: all 0.3s ease; } .contact-info-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* 公司介绍 + 二维码 双栏 */ .contact-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .contact-about-text h2 { color: #1e293b; } .contact-about-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .contact-about-hl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #475569; font-weight: 500; } .contact-about-hl svg { flex-shrink: 0; } /* 二维码卡片 */ .contact-qr-area { display: flex; justify-content: center; } .contact-qr-card { background: #fff; border-radius: 1.5rem; padding: 2rem; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,0.08); border: 1px solid #f1f5f9; transition: all 0.3s ease; max-width: 280px; } .contact-qr-card:hover { transform: scale(1.03); box-shadow: 0 12px 40px rgba(0,0,0,0.12); } .contact-qr-img-wrap { width: 180px; height: 180px; margin: 0 auto 1.25rem auto; border-radius: 1rem; overflow: hidden; background: #f8fafc; } .contact-qr-img { width: 100%; height: 100%; object-fit: cover; } .contact-qr-card h3 { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0 0 0.375rem 0; } .contact-qr-card p { font-size: 0.85rem; color: #94a3b8; margin: 0; } /* 团队网格 */ .contact-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .contact-team-card { background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; transition: all 0.3s ease; } .contact-team-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); } .contact-team-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 1rem auto; overflow: hidden; border: 3px solid #e2e8f0; position: relative; transition: all 0.3s ease; } .contact-team-card:hover .contact-team-avatar { border-color: #c7d2fe; } .contact-team-avatar img { width: 100%; height: 100%; object-fit: cover; } .contact-team-vip { position: absolute; bottom: -4px; right: -4px; background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 4px; letter-spacing: 0.05em; } .contact-team-card h3 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 0.25rem 0; } .contact-team-role { display: inline-block; background: linear-gradient(135deg, #ede9fe, #e0e7ff); color: #7c3aed; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.75rem; border-radius: 9999px; margin-bottom: 0.75rem; } .contact-team-card p { font-size: 0.85rem; color: #64748b; line-height: 1.6; margin: 0; } /* 服务承诺网格 */ .contact-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .contact-promise-card { background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; transition: all 0.3s ease; position: relative; overflow: hidden; } .contact-promise-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--top-color); } .contact-promise-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); } .contact-promise-icon { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; } .contact-promise-card h3 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 0.5rem 0; } .contact-promise-card p { font-size: 0.9rem; color: #64748b; line-height: 1.6; margin: 0; } /* 快速联系 CTA 大卡片 */ .contact-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .contact-cta-card { border-radius: 1.25rem; padding: 2.5rem 2rem; text-align: center; text-decoration: none; color: #fff; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .contact-cta-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,0.15); } .contact-cta-card h3 { font-size: 1.2rem; font-weight: 700; margin: 0; } .contact-cta-card p { font-size: 0.95rem; opacity: 0.85; margin: 0; } /* contact 响应式 */ @media (max-width: 1024px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } .contact-about-grid { grid-template-columns: 1fr; } .contact-team-grid { grid-template-columns: repeat(2, 1fr); } .contact-promise-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .contact-info-grid { grid-template-columns: 1fr; } .contact-about-highlights { grid-template-columns: 1fr; } .contact-team-grid { grid-template-columns: 1fr; } .contact-promise-grid { grid-template-columns: 1fr; } .contact-cta-grid { grid-template-columns: 1fr; } } /* ======================================== index 首页服务卡片专用样式 ======================================== */ .index-label { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #ede9fe, #e0e7ff); color: #7c3aed; padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .index-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .index-service-card { background: #fff; border-radius: 1rem; padding: 2rem 1.25rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; transition: all 0.3s ease; position: relative; overflow: hidden; } .index-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-color); border-radius: 1rem 1rem 0 0; } .index-service-card:hover { transform: translateY(-8px); box-shadow: 0 16px 35px rgba(0,0,0,0.1); } .index-service-icon { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; transition: transform 0.3s ease; } .index-service-card:hover .index-service-icon { transform: scale(1.15); } .index-service-card h3 { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0 0 0.5rem 0; } .index-service-card p { font-size: 0.85rem; color: #94a3b8; margin: 0; line-height: 1.5; } /* index 服务卡片响应式 */ @media (max-width: 1024px) { .index-service-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .index-service-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .index-service-grid { grid-template-columns: 1fr; } } /* index 资质认证卡片 */ .index-qual-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .index-qual-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; transition: all 0.3s ease; text-align: center; } .index-qual-card:hover { transform: translateY(-8px); box-shadow: 0 16px 35px rgba(0,0,0,0.1); } .index-qual-img { background: #f8fafc; padding: 1.5rem 1rem; overflow: hidden; position: relative; } .index-qual-img img { width: 100%; height: auto; object-fit: contain; max-height: 200px; transition: transform 0.4s ease; } .index-qual-card:hover .index-qual-img img { transform: scale(1.08); } .index-qual-badge { font-size: 0.95rem; font-weight: 700; color: #1e293b; padding: 1rem 1rem 0.25rem 1rem; } .index-qual-card p { font-size: 0.8rem; color: #94a3b8; margin: 0; padding: 0 1rem 1rem 1rem; } /* index 资质认证响应式 */ @media (max-width: 1024px) { .index-qual-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .index-qual-grid { grid-template-columns: 1fr; } } /* index 服务保障卡片 */ .index-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .index-feature-card { background: #fff; border-radius: 1rem; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; transition: all 0.3s ease; position: relative; overflow: hidden; } .index-feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-color); border-radius: 1rem 1rem 0 0; } .index-feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 35px rgba(0,0,0,0.1); } .index-feature-icon { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; transition: transform 0.3s ease; } .index-feature-card:hover .index-feature-icon { transform: scale(1.15); } .index-feature-card h3 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 0.75rem 0; } .index-feature-card p { font-size: 0.9rem; color: #64748b; line-height: 1.7; margin: 0; } /* index 服务保障响应式 */ @media (max-width: 768px) { .index-feature-grid { grid-template-columns: 1fr; } } /* ======================================== index 首页 Hero 区域 ======================================== */ .hero-section-bg { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 30%, #ede9fe 60%, #f0f9ff 100%); } html.dark .hero-section-bg { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); } /* ======================================== index 首页 Hero 装饰元素 ======================================== */ .hero-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* 渐变光晕 */ .hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); animation: heroFloat 8s ease-in-out infinite; } .hero-blob-1 { width: 500px; height: 500px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(100,143,245,0.18), rgba(108,108,238,0.08)); animation-delay: 0s; } .hero-blob-2 { width: 400px; height: 400px; bottom: -100px; left: -60px; background: radial-gradient(circle, rgba(100,143,245,0.14), rgba(108,108,238,0.06)); animation-delay: -3s; } .hero-blob-3 { width: 350px; height: 350px; top: 30%; left: 40%; background: radial-gradient(circle, rgba(108,108,238,0.10), rgba(100,143,245,0.05)); animation-delay: -5s; } @keyframes heroFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -15px) scale(1.05); } 66% { transform: translate(-15px, 10px) scale(0.95); } } /* 装饰圆环 */ .hero-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(100,143,245,0.12); animation: heroSpin 20s linear infinite; } .hero-ring-1 { width: 300px; height: 300px; top: -60px; right: 10%; } .hero-ring-2 { width: 200px; height: 200px; bottom: -40px; left: 15%; border-color: rgba(108,108,238,0.10); animation-direction: reverse; animation-duration: 15s; } @keyframes heroSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 装饰圆点 */ .hero-dot { position: absolute; border-radius: 50%; background: rgba(100,143,245,0.25); animation: heroPulse 3s ease-in-out infinite; } .hero-dot-1 { width: 8px; height: 8px; top: 18%; left: 8%; animation-delay: 0s; } .hero-dot-2 { width: 6px; height: 6px; top: 25%; right: 12%; background: rgba(108,108,238,0.3); animation-delay: 0.8s; } .hero-dot-3 { width: 10px; height: 10px; bottom: 22%; left: 20%; background: rgba(108,108,238,0.2); animation-delay: 1.5s; } .hero-dot-4 { width: 5px; height: 5px; bottom: 15%; right: 8%; background: rgba(100,143,245,0.2); animation-delay: 2.2s; } @keyframes heroPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } /* ======================================== Hero Dashboard 控制台卡片 ======================================== */ .hero-dashboard { position: relative; width: 100%; max-width: 420px; margin: 0 auto; background: linear-gradient(145deg, #ffffff, #f8fafc); border-radius: 1.25rem; box-shadow: 0 25px 60px -15px rgba(100, 143, 245, 0.3), 0 0 0 1px rgba(100, 143, 245, 0.08); overflow: hidden; transform: rotate(-2deg); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease; z-index: 2; } html.dark .hero-dashboard { background: linear-gradient(145deg, #1e293b, #0f172a); box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(100, 143, 245, 0.15); } .hero-dashboard:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 35px 80px -20px rgba(100, 143, 245, 0.4), 0 0 0 1px rgba(100, 143, 245, 0.15); } .dash-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-bottom: 1px solid #e2e8f0; } html.dark .dash-header { background: linear-gradient(135deg, #1e293b, #1a2332); border-bottom-color: #334155; } .dash-dot { width: 10px; height: 10px; border-radius: 50%; } .dash-title { font-size: 0.8125rem; font-weight: 600; color: #475569; letter-spacing: 0.02em; } html.dark .dash-title { color: #94a3b8; } .dash-body { padding: 1.5rem; } .dash-welcome { margin-bottom: 1.25rem; } .dash-greeting { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; } html.dark .dash-greeting { color: #f8fafc; } .dash-subtitle { font-size: 0.75rem; color: #94a3b8; } .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-bottom: 1.25rem; } .dash-stat-card { background: #f8fafc; border-radius: 0.75rem; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: all 0.3s ease; } html.dark .dash-stat-card { background: rgba(30, 41, 59, 0.8); } .dash-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); } .dash-stat-icon { width: 32px; height: 32px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-stat-info { text-align: center; } .dash-stat-value { font-size: 0.875rem; font-weight: 700; color: #0f172a; line-height: 1; } html.dark .dash-stat-value { color: #f8fafc; } .dash-stat-label { font-size: 0.625rem; color: #94a3b8; margin-top: 0.25rem; white-space: nowrap; } .dash-chart { background: #f8fafc; border-radius: 0.75rem; padding: 0.875rem; margin-bottom: 1rem; } html.dark .dash-chart { background: rgba(30, 41, 59, 0.8); } .dash-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .dash-chart-title { font-size: 0.75rem; font-weight: 600; color: #334155; } html.dark .dash-chart-title { color: #cbd5e1; } .dash-chart-badge { font-size: 0.625rem; font-weight: 600; color: #059669; background: #d1fae5; padding: 0.125rem 0.5rem; border-radius: 9999px; } html.dark .dash-chart-badge { background: rgba(5, 150, 105, 0.2); color: #34d399; } .dash-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; } .dash-bar { flex: 1; background: linear-gradient(180deg, #648ff5, #818cf8); border-radius: 4px 4px 2px 2px; height: var(--h, 50%); transition: height 0.5s ease; animation: barGrow 1.5s ease-out forwards; opacity: 0; } .dash-bar:nth-child(1) { animation-delay: 0.1s; } .dash-bar:nth-child(2) { animation-delay: 0.2s; } .dash-bar:nth-child(3) { animation-delay: 0.3s; } .dash-bar:nth-child(4) { animation-delay: 0.4s; } .dash-bar:nth-child(5) { animation-delay: 0.5s; } .dash-bar:nth-child(6) { animation-delay: 0.6s; } .dash-bar:nth-child(7) { animation-delay: 0.7s; } @keyframes barGrow { from { height: 0; opacity: 0; } to { height: var(--h, 50%); opacity: 1; } } .dash-products { display: flex; flex-wrap: wrap; gap: 0.375rem; } .dash-product-tag { font-size: 0.6875rem; font-weight: 500; color: #648ff5; background: rgba(100, 143, 245, 0.08); padding: 0.3125rem 0.625rem; border-radius: 0.375rem; border: 1px solid rgba(100, 143, 245, 0.15); transition: all 0.2s ease; } .dash-product-tag:hover { background: rgba(100, 143, 245, 0.15); border-color: rgba(100, 143, 245, 0.3); } html.dark .dash-product-tag { color: #93c5fd; background: rgba(100, 143, 245, 0.12); border-color: rgba(100, 143, 245, 0.2); } /* 悬浮卡片 */ .dash-float-card { position: absolute; background: white; border-radius: 0.875rem; padding: 0.75rem 1rem; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(100, 143, 245, 0.08); display: flex; align-items: center; gap: 0.75rem; z-index: 3; animation: floatCard 4s ease-in-out infinite; } html.dark .dash-float-card { background: #1e293b; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(100, 143, 245, 0.12); } .dash-float-1 { top: 15%; left: -30px; animation-delay: 0s; } .dash-float-2 { bottom: 15%; right: -20px; animation-delay: -2s; } @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .dash-float-icon { width: 32px; height: 32px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-float-value { font-size: 0.9375rem; font-weight: 700; color: #0f172a; line-height: 1; } html.dark .dash-float-value { color: #f8fafc; } .dash-float-label { font-size: 0.6875rem; color: #94a3b8; margin-top: 0.1875rem; } /* ======================================== Contact 联系我们区域 ======================================== */ .contact-section { background: linear-gradient(135deg, #4361ee 0%, #4f6ef0 50%, #5c7cfa 100%) !important; padding: 5rem 0; position: relative; overflow: visible !important; } html.dark .contact-section { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important; } .contact-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; } .contact-blob { position: absolute; border-radius: 50%; filter: blur(90px); } .contact-blob-1 { width: 500px; height: 500px; top: -150px; right: -80px; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); animation: blobFloat 8s ease-in-out infinite; } .contact-blob-2 { width: 400px; height: 400px; bottom: -120px; left: -60px; background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%); animation: blobFloat 10s ease-in-out infinite reverse; } .contact-blob-3 { width: 300px; height: 300px; top: 40%; left: 50%; background: radial-gradient(circle, rgba(147,197,253,0.15), transparent 70%); animation: blobFloat 12s ease-in-out infinite; animation-delay: -4s; } html.dark .contact-blob-1 { background: radial-gradient(circle, rgba(100,143,245,0.2), transparent 70%); } html.dark .contact-blob-2 { background: radial-gradient(circle, rgba(108,108,238,0.15), transparent 70%); } html.dark .contact-blob-3 { background: radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%); } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -15px) scale(1.05); } 66% { transform: translate(-15px, 10px) scale(0.98); } } /* 网格纹理 */ .contact-grid-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.5; } html.dark .contact-grid-pattern { background-image: radial-gradient(circle, rgba(147,197,253,0.08) 1px, transparent 1px); } /* 装饰圆环 */ .contact-deco-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.1); } .contact-ring-1 { width: 250px; height: 250px; top: 10%; right: 5%; animation: ringSpin 25s linear infinite; } .contact-ring-2 { width: 180px; height: 180px; bottom: 15%; left: 8%; border-color: rgba(255,255,255,0.08); animation: ringSpin 20s linear infinite reverse; } html.dark .contact-ring-1 { border-color: rgba(100,143,245,0.12); } html.dark .contact-ring-2 { border-color: rgba(108,108,238,0.1); } @keyframes ringSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 装饰圆点阵列 */ .contact-deco-dots { position: absolute; top: 20%; left: 3%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .contact-deco-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.2); animation: dotPulse 3s ease-in-out infinite; } .contact-deco-dots span:nth-child(1) { animation-delay: 0s; } .contact-deco-dots span:nth-child(2) { animation-delay: 0.15s; } .contact-deco-dots span:nth-child(3) { animation-delay: 0.3s; } .contact-deco-dots span:nth-child(4) { animation-delay: 0.45s; } .contact-deco-dots span:nth-child(5) { animation-delay: 0.6s; } .contact-deco-dots span:nth-child(6) { animation-delay: 0.75s; } .contact-deco-dots span:nth-child(7) { animation-delay: 0.9s; } .contact-deco-dots span:nth-child(8) { animation-delay: 1.05s; } .contact-deco-dots span:nth-child(9) { animation-delay: 1.2s; } .contact-deco-dots span:nth-child(10) { animation-delay: 1.35s; } @keyframes dotPulse { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.5); } } /* 底部波浪 */ .contact-wave { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,50 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat bottom center; background-size: cover; } .contact-section > div.relative { position: relative; z-index: 1; } .contact-left { color: #ffffff; position: relative; z-index: 1; } html.dark .contact-left { color: #f8fafc; } /* 左侧文字区域 */ .contact-badge { display: inline-flex !important; align-items: center !important; gap: 0.375rem; padding: 0.4375rem 0.875rem; background: rgba(255,255,255,0.2); border-radius: 9999px; color: #ffffff !important; font-size: 0.8125rem; font-weight: 500; margin-bottom: 1.25rem; border: none; } html.dark .contact-badge { background: rgba(100,143,245,0.2); color: #93c5fd !important; } .contact-title { font-size: 2.25rem !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.25 !important; margin-bottom: 0.875rem !important; text-align: left !important; } @media (min-width: 640px) { .contact-title { font-size: 2.75rem !important; } } html.dark .contact-title { color: #f8fafc !important; } .contact-desc { font-size: 1.0625rem !important; color: rgba(255,255,255,0.85) !important; line-height: 1.6 !important; margin-bottom: 1.75rem !important; text-align: left !important; } html.dark .contact-desc { color: #94a3b8 !important; } /* 联系信息列表 */ .contact-info-list { display: flex !important; flex-direction: column !important; gap: 0.75rem; margin-bottom: 1.75rem; width: 100%; } .contact-info-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0.875rem !important; padding: 0.875rem 1rem !important; background: rgba(255,255,255,0.15) !important; border-radius: 0.875rem !important; border: 1px solid rgba(255,255,255,0.2) !important; transition: all 0.3s ease; width: 100%; box-sizing: border-box; } html.dark .contact-info-item { background: rgba(30,41,59,0.8) !important; border-color: rgba(100,143,245,0.2) !important; } .contact-info-item:hover { background: rgba(255,255,255,0.22) !important; transform: translateX(4px); } html.dark .contact-info-item:hover { background: rgba(51,65,85,0.9) !important; border-color: rgba(100,143,245,0.35) !important; } .contact-info-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 0.75rem !important; background: rgba(255,255,255,0.25) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; } html.dark .contact-info-icon { background: linear-gradient(135deg, #648ff5, #6c6cee) !important; color: #ffffff !important; } .contact-info-icon svg { display: block; flex-shrink: 0; } /* ========== 暗色模式补充规则 ========== */ /* Index 页面 */ html.dark .index-label { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2)); color: #c4b5fd; } html.dark .index-service-card { background: #1e293b; border-color: #334155; } html.dark .index-service-card h3 { color: #f1f5f9; } html.dark .index-service-card p { color: #94a3b8; } html.dark .index-qual-card { background: #1e293b; border-color: #334155; } html.dark .index-qual-badge { color: #e2e8f0; } html.dark .index-qual-img { background: #334155; } html.dark .index-feature-card { background: #1e293b; border-color: #334155; } html.dark .index-feature-card h3 { color: #f1f5f9; } html.dark .index-feature-card p { color: #94a3b8; } /* About 页面 */ html.dark .about-intro-text h2 { color: #f1f5f9; } html.dark .about-intro-text p { color: #94a3b8; } html.dark .about-stat-item { background: #1e293b; } html.dark .about-stat-item .stat-label { color: #94a3b8; } html.dark .about-adv-card { background: #1e293b; border-color: #334155; } html.dark .about-adv-card h3 { color: #f1f5f9; } html.dark .about-adv-card p { color: #94a3b8; } html.dark .about-team-card { background: #1e293b; border-color: #334155; } html.dark .about-team-card .team-name-row h4 { color: #f1f5f9; } html.dark .about-team-card .team-role { color: #60a5fa; } html.dark .about-team-card .team-bio { color: #94a3b8; } html.dark .about-team-card .team-avatar { border-color: #475569; } html.dark .about-promise-card { background: #1e293b; border-color: #334155; } html.dark .about-promise-card h3 { color: #f1f5f9; } html.dark .about-promise-card p { color: #94a3b8; } /* Partners 页面 */ html.dark .partner-card { background: #1e293b; border-color: #334155; } html.dark .partner-card h3 { color: #f1f5f9; } html.dark .partner-card p { color: #94a3b8; } html.dark .advantage-card { background: #1e293b; border-color: #334155; } html.dark .advantage-card h3 { color: #f1f5f9; } html.dark .advantage-card p { color: #94a3b8; } .contact-info-text { min-width: 0; flex: 1; text-align: left !important; display: block; } .contact-info-label { font-size: 0.75rem !important; color: rgba(255,255,255,0.75) !important; margin-bottom: 0.125rem !important; text-align: left !important; display: block; } html.dark .contact-info-label { color: #94a3b8 !important; } .contact-info-value { font-size: 1.0625rem !important; font-weight: 700 !important; color: #ffffff !important; text-align: left !important; display: block; } html.dark .contact-info-value { color: #f8fafc !important; } /* CTA按钮 */ .contact-cta { display: inline-flex !important; align-items: center !important; gap: 0.5rem; padding: 0.875rem 1.75rem !important; background: #ffffff !important; color: #3b5bdb !important; font-size: 1rem !important; font-weight: 700 !important; border-radius: 9999px !important; transition: all 0.3s ease; box-shadow: 0 8px 25px -8px rgba(0,0,0,0.3); text-decoration: none !important; width: auto !important; border: none; cursor: pointer; } .contact-cta:hover { transform: scale(1.03) translateY(-2px); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.35); background: #f8f9ff !important; color: #3b5bdb !important; } .contact-cta svg { transition: transform 0.3s ease; flex-shrink: 0; } .contact-cta:hover svg { transform: translateX(4px); } html.dark .contact-cta { background: #648ff5 !important; color: #ffffff !important; } html.dark .contact-cta:hover { background: #5a7fe0 !important; color: #ffffff !important; } /* 右侧卡片区域 */ .contact-right { position: relative; display: flex; justify-content: center; align-items: center; } .contact-card-wrap { position: relative; width: 100%; max-width: 320px; display: flex; justify-content: center; z-index: 2; overflow: visible; } .contact-card-border-glow { display: none; } .contact-card-main { position: relative; background: #ffffff !important; border-radius: 1.5rem !important; padding: 2rem !important; text-align: center !important; box-shadow: 0 25px 60px -15px rgba(0,0,0,0.2), 0 0 0 1px rgba(100,143,245,0.12), 0 0 40px -8px rgba(100,143,245,0.25) !important; width: 100%; max-width: 320px; z-index: 2; overflow: hidden; } .contact-card-main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px; background: linear-gradient(180deg, rgba(100,143,245,0.05), transparent); border-radius: 1.5rem 1.5rem 0 0; z-index: 0; } html.dark .contact-card-main { background: #1e293b !important; box-shadow: 0 25px 60px -15px rgba(0,0,0,0.4), 0 0 0 1px rgba(100,143,245,0.1), 0 0 40px -8px rgba(100,143,245,0.2) !important; } html.dark .contact-card-main::before { background: linear-gradient(180deg, rgba(100,143,245,0.06), transparent); } .contact-card-glow { display: none; } .contact-qr-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto 1rem; z-index: 1; } .contact-qr { width: 100%; height: 100%; border-radius: 0.875rem; overflow: hidden; background: #ffffff; padding: 0.625rem; position: relative; z-index: 1; box-sizing: border-box; box-shadow: 0 4px 20px rgba(100,143,245,0.15); } .contact-qr img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0.375rem; display: block !important; } .contact-qr-ring { position: absolute; inset: -6px; border-radius: 1rem; border: 2px solid rgba(100,143,245,0.2); animation: qrRingPulse 2.5s ease-in-out infinite; } @keyframes qrRingPulse { 0%, 100% { opacity: 0.4; transform: scale(1); border-color: rgba(100,143,245,0.2); } 50% { opacity: 0.8; transform: scale(1.02); border-color: rgba(100,143,245,0.4); } } .contact-card-title { font-size: 1.0625rem !important; font-weight: 700 !important; color: #0f172a !important; margin-bottom: 0.25rem !important; text-align: center !important; position: relative; z-index: 1; } html.dark .contact-card-title { color: #f8fafc !important; } .contact-card-desc { font-size: 0.8125rem !important; color: #64748b !important; margin-bottom: 0.875rem !important; text-align: center !important; position: relative; z-index: 1; } html.dark .contact-card-desc { color: #94a3b8 !important; } .contact-card-tags { display: flex !important; gap: 0.5rem; justify-content: center !important; position: relative; z-index: 1; } .contact-tag { display: inline-flex !important; align-items: center !important; gap: 0.25rem; padding: 0.3125rem 0.625rem !important; background: rgba(100,143,245,0.1) !important; color: #4f6ef0 !important; font-size: 0.6875rem !important; font-weight: 600 !important; border-radius: 9999px !important; border: none; } html.dark .contact-tag { background: rgba(100,143,245,0.15) !important; color: #93c5fd !important; } /* 悬浮卡片 */ .contact-float { display: none; } @keyframes contactFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .contact-float-icon { width: 34px; height: 34px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-float-value { font-size: 0.9375rem; font-weight: 700; color: #0f172a; line-height: 1; } html.dark .contact-float-value { color: #f8fafc; } .contact-float-label { font-size: 0.6875rem; color: #94a3b8; margin-top: 0.125rem; } @media (min-width: 1024px) { .contact-float { display: flex; position: absolute; background: #ffffff; border-radius: 0.875rem; padding: 0.625rem 0.875rem; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.25); align-items: center; gap: 0.625rem; z-index: 3; animation: contactFloat 4s ease-in-out infinite; } html.dark .contact-float { background: #1e293b; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.4); } .contact-float-1 { top: 12%; left: -110px; animation-delay: 0s; } .contact-float-2 { bottom: 12%; right: -105px; animation-delay: -2s; } } @media (max-width: 1023px) { .contact-float { display: none !important; } .contact-card-border-glow { display: none; } .contact-card-main { max-width: 300px; } } @media (max-width: 640px) { .contact-section { padding: 3.5rem 0; } .contact-title { font-size: 1.75rem !important; } .contact-info-item { padding: 0.75rem 0.875rem !important; } .contact-info-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; } .contact-cta { width: 100% !important; justify-content: center !important; } .contact-qr-wrap { width: 160px; height: 160px; } .contact-card-main { max-width: 280px; padding: 1.5rem !important; } } /* ======================================== 通用页面底部CTA区域 ======================================== */ .page-cta-section { position: relative; padding: 4.5rem 0; background: linear-gradient(135deg, #4f46e5 0%, #4338ca 50%, #3730a3 100%); overflow: hidden; } .page-cta-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .page-cta-glow-1 { top: -120px; right: -100px; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.12); } .page-cta-glow-2 { bottom: -100px; left: -80px; width: 350px; height: 350px; background: rgba(165, 180, 252, 0.15); } html.dark .page-cta-section { background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%); } html.dark .page-cta-glow-1 { background: rgba(99, 102, 241, 0.1); } html.dark .page-cta-glow-2 { background: rgba(79, 70, 229, 0.08); } .page-cta-inner { position: relative; z-index: 1; max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .page-cta-title { font-size: 1.875rem; font-weight: 900; color: #ffffff !important; margin: 0 0 1rem 0; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); } @media (min-width: 768px) { .page-cta-title { font-size: 2.25rem; } } .page-cta-desc { font-size: 1.125rem; color: rgba(255, 255, 255, 0.88) !important; margin: 0 0 2rem 0; line-height: 1.7; text-shadow: 0 1px 6px rgba(15, 23, 42, 0.12); } .page-cta-buttons { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; } @media (min-width: 640px) { .page-cta-buttons { flex-direction: row; } } .page-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2.25rem; border-radius: 9999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; } .page-cta-btn-primary { background: #ffffff !important; color: #312e81 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .page-cta-btn-primary:hover { background: #eef2ff !important; color: #1e1b4b !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } html.dark .page-cta-btn-primary { background: #334155 !important; color: #e2e8f0 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } html.dark .page-cta-btn-primary:hover { background: #475569 !important; color: #ffffff !important; } .page-cta-btn-outline { border: 2px solid rgba(255, 255, 255, 0.85) !important; color: #ffffff !important; background: transparent; } .page-cta-btn-outline:hover { background: #ffffff !important; color: #312e81 !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } html.dark .page-cta-btn-outline { border-color: rgba(148, 163, 184, 0.5) !important; color: #e2e8f0 !important; } html.dark .page-cta-btn-outline:hover { background: #334155 !important; border-color: #475569 !important; color: #ffffff !important; } @media (max-width: 640px) { .page-cta-section { padding: 3rem 0; } .page-cta-title { font-size: 1.5rem; } .page-cta-desc { font-size: 1rem; } .page-cta-btn { width: 100%; max-width: 280px; } }