/* ============================================================ A-Z Beyond Limited LLC — 主题系统 6 套可选风格，只切换颜色 + 字体（不改布局） 切换方式： 默认：A Corporate Trust ============================================================ */ /* ---------- A. Corporate Trust（企业信赖风 / 默认） ---------- */ :root, html[data-theme="a"] { --brand: #1B3A5C; --brand-ink: #FFFFFF; --accent: #3B82F6; --accent-ink: #FFFFFF; --bg: #FFFFFF; --alt: #F5F7FA; --surface: #FFFFFF; --text: #111827; --text-muted: #6B7280; --border: #E5E7EB; --head-color: #1B3A5C; --font-head: Inter, "Helvetica Neue", Arial, sans-serif; --font-body: Inter, "Helvetica Neue", Arial, sans-serif; --fw-head: 700; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 3px rgba(17, 24, 39, .08), 0 4px 16px rgba(17, 24, 39, .06); --nav-bg: #FFFFFF; --nav-text: #1B3A5C; --footer-bg: #1B3A5C; --footer-text: #E5E7EB; --footer-muted: #9CA3AF; } /* ---------- B. Modern Minimal（现代极简风） ---------- */ html[data-theme="b"] { --brand: #111827; --brand-ink: #FFFFFF; --accent: #10B981; --accent-ink: #FFFFFF; --bg: #FFFFFF; --alt: #F9FAFB; --surface: #FFFFFF; --text: #111827; --text-muted: #9CA3AF; --border: #E5E7EB; --head-color: #111827; --font-head: "Plus Jakarta Sans", Inter, Arial, sans-serif; --font-body: Inter, Arial, sans-serif; --fw-head: 700; --radius: 12px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(17, 24, 39, .04); --nav-bg: rgba(255, 255, 255, .85); --nav-text: #111827; --footer-bg: #111827; --footer-text: #E5E7EB; --footer-muted: #9CA3AF; } /* ---------- C. Dark Premium（暗色高端风） ---------- */ html[data-theme="c"] { --brand: #0F172A; --brand-ink: #D4A853; --accent: #D4A853; --accent-ink: #0F172A; --bg: #0F172A; --alt: #1E293B; --surface: #1E293B; --text: #CBD5E1; --text-muted: #94A3B8; --border: #334155; --head-color: #FFFFFF; --font-head: "Playfair Display", Georgia, serif; --font-body: Inter, Arial, sans-serif; --fw-head: 700; --radius: 4px; --radius-lg: 4px; --shadow: 0 1px 3px rgba(0, 0, 0, .4); --nav-bg: #0F172A; --nav-text: #FFFFFF; --footer-bg: #0F172A; --footer-text: #CBD5E1; --footer-muted: #94A3B8; } /* ---------- D. Warm Local（温暖亲和风） ---------- */ html[data-theme="d"] { --brand: #1F2937; --brand-ink: #FFFFFF; --accent: #E8720C; --accent-ink: #FFFFFF; --bg: #FFFBF5; --alt: #FFF3E6; --surface: #FFFFFF; --text: #1F2937; --text-muted: #6B7280; --border: #F0E4D6; --head-color: #1F2937; --font-head: Nunito, Inter, Arial, sans-serif; --font-body: Nunito, Inter, Arial, sans-serif; --fw-head: 700; --radius: 16px; --radius-lg: 20px; --shadow: 0 2px 8px rgba(232, 114, 12, .08); --nav-bg: #FFFFFF; --nav-text: #1F2937; --footer-bg: #1F2937; --footer-text: #F3F4F6; --footer-muted: #9CA3AF; } /* ---------- E. Bold Creative（大胆创意风） ---------- */ html[data-theme="e"] { --brand: #4F46E5; --brand-ink: #FBBF24; --accent: #FBBF24; --accent-ink: #4F46E5; --bg: #FFFFFF; --alt: #EEF2FF; --surface: #FFFFFF; --text: #111827; --text-muted: #4B5563; --border: #E0E7FF; --head-color: #4F46E5; --font-head: "Space Grotesk", Inter, Arial, sans-serif; --font-body: Inter, Arial, sans-serif; --fw-head: 700; --radius: 8px; --radius-lg: 12px; --shadow: 0 2px 10px rgba(79, 70, 229, .12); --nav-bg: #FFFFFF; --nav-text: #4F46E5; --footer-bg: #4F46E5; --footer-text: #EEF2FF; --footer-muted: #C7D2FE; } /* ---------- F. Industrial Pro（工业专业风） ---------- */ html[data-theme="f"] { --brand: #334155; --brand-ink: #EAB308; --accent: #EAB308; --accent-ink: #334155; --bg: #FFFFFF; --alt: #F1F5F9; --surface: #FFFFFF; --text: #1E293B; --text-muted: #64748B; --border: #CBD5E1; --head-color: #334155; --font-head: Barlow, Inter, Arial, sans-serif; --font-body: Inter, Arial, sans-serif; --fw-head: 700; --radius: 4px; --radius-lg: 4px; --shadow: 0 1px 3px rgba(51, 65, 85, .1); --nav-bg: #334155; --nav-text: #FFFFFF; --footer-bg: #334155; --footer-text: #F1F5F9; --footer-muted: #94A3B8; } /* 工业风标题全大写 + 字间距 */ html[data-theme="f"] h1, html[data-theme="f"] h2, html[data-theme="f"] h3, html[data-theme="f"] .btn, html[data-theme="f"] .nav-link { text-transform: uppercase; letter-spacing: .04em; } /* 主题切换过渡：只过渡颜色，避免布局跳动 */ body, header, footer, .card, .btn, .nav-link { transition: background-color .28s ease, color .28s ease, border-color .28s ease; } @media (prefers-reduced-motion: reduce) { body, header, footer, .card, .btn, .nav-link { transition: none; } }