/* ============================================================ * Web 皮肤 token 体系 * * 切换方式：，默认皮肤（酒泉汲青）不挂属性。 * 可选值： * "" 酒泉汲青（默认，青蓝 + 宋体） * "modern" 航天揽蓝（品牌蓝 + 春藤绿 + Inter/Montserrat） * "poplar" 胡杨鎏金（暖金 + 沙米 + 宋体） * Tailwind 色板在布局中已映射到下列变量 * （rgb(var(--token) / )），/25 等透明度修饰符可用）， * 因此新增皮肤只需在本文件追加一个作用域块覆盖变量， * 不需要改动任何视图。 * * 变量格式：R G B 三个十进制通道（空格分隔），供 rgb() 使用。 * ============================================================ */ /* ===== 全局：带图标按钮内边距对称（适用于全部皮肤） ===== */ .pl-\[0\.25em\]:has(> i).px-6 { padding-left: 1.5rem; } .pl-\[0\.25em\]:has(> i).px-4 { padding-left: 1rem; } .pl-\[0\.25em\]:has(> i).px-2 { padding-left: 0.5rem; } /* ===== 全局基础层（跨皮肤共享行为） ===== */ :root { --font-scale: 1; } :root { color-scheme: light; } html.dark { color-scheme: dark; } html { scrollbar-gutter: stable; } ::selection { background: rgb(var(--bb-500) / 0.22); color: inherit; } html.dark ::selection { background: rgb(var(--bb-400) / 0.32); } body > header[class] { border-bottom: 1px solid transparent; transition: background-color .4s ease, border-color .4s ease; } body > header[class]::after { transition: background-image .4s ease; } html:not([data-skin]) body > header::before { content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.12) 28%, transparent 55%, rgb(var(--bb-500) / 0.12) 82%, transparent 100%); } html:not([data-skin]) body > header::after { background: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.18) 22%, rgb(var(--bb-300) / 0.55) 50%, rgb(var(--bb-500) / 0.18) 78%, transparent 100%); } html:not([data-skin]).dark body > header::after { background: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.10) 22%, rgb(var(--bb-300) / 0.28) 50%, rgb(var(--bb-500) / 0.10) 78%, transparent 100%); } html:not([data-skin]) body > main .font-display.tracking-\[0\.5em\] { letter-spacing: 0.56em; } mark[class*="bg-brand-blue-100"] { border-radius: 2px; padding-top: 1px; padding-bottom: 1px; } /* ---------- 默认皮肤：酒泉汲青 ---------- */ :root { --bb-50: 242 247 251; --bb-100: 220 232 243; --bb-200: 184 208 229; --bb-300: 138 172 206; --bb-400: 84 130 176; --bb-500: 46 93 145; --bb-600: 34 74 117; --bb-700: 20 52 96; --bb-800: 12 38 74; --bb-900: 6 26 52; --br-50: 251 252 254; --br-100: 240 243 248; --br-200: 221 228 238; --br-300: 188 199 216; --br-400: 142 156 180; --br-500: 95 110 136; --br-600: 65 78 102; --br-700: 45 56 73; --br-800: 27 36 51; --br-900: 15 22 34; --tg: 244 248 252; --page: 244 248 252; --page-dark: 10 18 30; --surface: 247 250 253; --surface-dark: 10 18 30; --glow: 46 93 145; --glow-dark: 84 130 176; --glow-soft: 138 172 206; --ore: 183 60 47; --ore-700: 142 45 34; --pg: 168 128 72; --pg-700: 125 94 48; --warn-bg: 251 243 226; --warn-fg: 168 128 72; --ok-bg: 237 242 247; --ok-fg: 46 93 145; --err-bg: 248 235 232; --err-fg: 183 60 47; --font-sans: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, Georgia, serif; --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif; --display-weight: 700; --display-tracking: 0.04em; --body-tracking: 0.01em; --body-leading: 1.85; --main-pt: 2.5rem; --main-pt-sm: 3.5rem; --main-pb: 6rem; --main-pb-md: 4rem; } /* ---------- 皮肤二：航天揽蓝 ---------- */ html[data-skin="modern"] { --bb-50: 239 246 255; --bb-100: 138 191 255; --bb-200: 114 178 253; --bb-300: 88 170 240; --bb-400: 66 142 224; --bb-500: 50 128 210; --bb-600: 44 110 192; --bb-700: 36 98 174; --bb-800: 28 82 150; --bb-900: 22 66 128; --br-50: 248 250 252; --br-100: 241 245 249; --br-200: 226 232 240; --br-300: 203 213 225; --br-400: 148 163 184; --br-500: 100 116 139; --br-600: 71 85 105; --br-700: 51 65 85; --br-800: 30 41 59; --br-900: 15 23 42; --tg: 248 250 252; --page: 248 250 252; --page-dark: 24 24 48; --surface: 255 255 255; --surface-dark: 24 24 48; --glow: 36 98 174; --glow-dark: 52 183 143; --glow-soft: 52 183 143; --ore: 199 74 29; --ore-700: 156 57 22; --pg: 232 179 57; --pg-700: 184 143 44; --warn-bg: 255 247 230; --warn-fg: 212 107 8; --ok-bg: 246 255 237; --ok-fg: 56 158 13; --err-bg: 254 240 240; --err-fg: 199 74 29; --font-sans: "Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; --font-display: "Montserrat", "Inter", system-ui, -apple-system, "Microsoft YaHei", sans-serif; --display-weight: 600; --display-tracking: -0.01em; --body-tracking: 0em; --body-leading: 1.8; --main-pt: 2rem; --main-pt-sm: 2.5rem; --main-pb: 7rem; --main-pb-md: 3rem; } html[data-skin="modern"].dark { --bb-300: 52 183 143; } html[data-skin="modern"] .tracking-\[0\.6em\] { letter-spacing: 0.04em; } html[data-skin="modern"] .tracking-\[0\.5em\] { letter-spacing: 0.04em; } html[data-skin="modern"] .tracking-\[0\.4em\] { letter-spacing: 0.03em; } html[data-skin="modern"] .tracking-\[0\.35em\] { letter-spacing: 0.03em; } html[data-skin="modern"] .tracking-\[0\.3em\] { letter-spacing: 0.02em; } html[data-skin="modern"] .tracking-\[0\.25em\] { letter-spacing: 0.02em; } html[data-skin="modern"] .tracking-\[0\.2em\] { letter-spacing: 0.02em; } html[data-skin="modern"] .tracking-\[0\.15em\] { letter-spacing: 0.015em; } html[data-skin="modern"] .tracking-\[0\.1em\] { letter-spacing: 0.01em; } html[data-skin="modern"] .tracking-\[0\.08em\] { letter-spacing: 0.01em; } html[data-skin="modern"] .pl-\[0\.5em\] { padding-left: 0.04em; } html[data-skin="modern"] .pl-\[0\.4em\] { padding-left: 0.03em; } html[data-skin="modern"] .pl-\[0\.35em\] { padding-left: 0.03em; } html[data-skin="modern"] .pl-\[0\.3em\] { padding-left: 0.02em; } html[data-skin="modern"] .pl-\[0\.25em\] { padding-left: 0.02em; } html[data-skin="modern"] .pl-\[0\.2em\] { padding-left: 0.02em; } html[data-skin="modern"] body > header .font-display.tracking-\[0\.35em\] { letter-spacing: -0.02em; padding-left: 0; color: rgb(40 40 80); font-weight: 800; } html[data-skin="modern"].dark body > header .font-display.tracking-\[0\.35em\] { color: #fff; } html[data-skin="modern"] .max-w-wrap, html[data-skin="modern"] .max-w-content, html[data-skin="modern"] .max-w-reading { max-width: 1200px; } html[data-skin="modern"] body > header { background-color: rgb(255 255 255 / 0.9); border-bottom: 1px solid rgb(203 213 225 / 0.8); } html[data-skin="modern"].dark body > header { background-color: rgb(24 24 48 / 0.9); border-bottom-color: rgb(51 65 85 / 0.6); } html[data-skin="modern"] body > header::after { display: none; } html[data-skin="modern"] .nav-link { border-radius: 0; } html[data-skin="modern"] .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: #2462AE; transition: width .3s ease; } html[data-skin="modern"] .nav-link:hover { background-color: transparent; } html[data-skin="modern"] .nav-link:hover::after { width: 100%; } html[data-skin="modern"] .nav-link-active { background-color: transparent; } html[data-skin="modern"] .nav-link-active::after { width: 100%; } html[data-skin="modern"].dark .nav-link::after { background: #34B78F; } html[data-skin="modern"] .icon-btn { border-radius: 12px; } html[data-skin="modern"] .icon-btn:hover { background-color: rgb(241 245 249 / 0.8); } html[data-skin="modern"].dark .icon-btn:hover { background-color: rgb(51 65 85 / 0.5); } html[data-skin="modern"] button, html[data-skin="modern"] [role="button"] { border-radius: 8px; } html[data-skin="modern"] a[class*="bg-brand-blue-700"], html[data-skin="modern"] button[class*="bg-brand-blue-700"] { border-radius: 8px; padding-left: 24px; padding-right: 24px; box-shadow: 0 10px 15px -3px rgb(36 98 174 / 0.2), 0 4px 6px -4px rgb(36 98 174 / 0.2); transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; } html[data-skin="modern"] a[class*="bg-ochre-red"], html[data-skin="modern"] button[class*="bg-ochre-red"] { border-radius: 8px; padding-left: 24px; padding-right: 24px; box-shadow: 0 10px 15px -3px rgb(199 74 29 / 0.2), 0 4px 6px -4px rgb(199 74 29 / 0.2); transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; } html[data-skin="modern"] a[class*="bg-brand-blue-700"]:hover, html[data-skin="modern"] button[class*="bg-brand-blue-700"]:hover { background-color: rgb(36 98 174 / 0.9); box-shadow: 0 20px 25px -5px rgb(36 98 174 / 0.25), 0 10px 10px -5px rgb(36 98 174 / 0.2); transform: translateY(-2px); } html[data-skin="modern"] a[class*="bg-ochre-red"]:hover, html[data-skin="modern"] button[class*="bg-ochre-red"]:hover { background-color: rgb(199 74 29 / 0.9); box-shadow: 0 20px 25px -5px rgb(199 74 29 / 0.25), 0 10px 10px -5px rgb(199 74 29 / 0.2); transform: translateY(-2px); } html[data-skin="modern"] a[class*="bg-[#07c160]"], html[data-skin="modern"] button[class*="bg-[#07c160]"] { border-radius: 8px; padding-left: 24px; padding-right: 24px; box-shadow: 0 10px 15px -3px rgb(7 193 96 / 0.25), 0 4px 6px -4px rgb(7 193 96 / 0.2); transition: background-color .3s ease, box-shadow .3s ease; } html[data-skin="modern"] a[class*="bg-[#07c160]"]:hover, html[data-skin="modern"] button[class*="bg-[#07c160]"]:hover { background-color: rgb(7 193 96 / 0.9); box-shadow: 0 20px 25px -5px rgb(7 193 96 / 0.3), 0 10px 10px -5px rgb(7 193 96 / 0.25); } html[data-skin="modern"] main a[class*="hover:border-brand-blue-500/40"] { background-color: #fff; border: 1px solid rgb(226 232 240 / 0.6); border-radius: 16px; padding-left: 22px; padding-right: 22px; margin-bottom: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.02); transition: all .3s ease; } html[data-skin="modern"] main a[class*="hover:border-brand-blue-500/40"]:hover { transform: translateY(-3px); box-shadow: -6px 14px 20px -8px rgb(15 23 42 / 0.10), -2px 6px 10px -4px rgb(15 23 42 / 0.06); border-color: rgb(203 213 225 / 0.8); } html[data-skin="modern"].dark main a[class*="hover:border-brand-blue-500/40"] { background-color: rgb(40 40 80); border-color: rgb(51 65 85 / 0.6); } html[data-skin="modern"].dark main a[class*="hover:border-brand-blue-500/40"]:hover { box-shadow: -6px 14px 20px -8px rgb(0 0 0 / 0.45), -2px 6px 10px -4px rgb(0 0 0 / 0.3); } html[data-skin="modern"] [class*="gap-x-14"], html[data-skin="modern"] [class*="gap-x-20"] { column-gap: 16px; } html[data-skin="modern"] span[class*="text-ochre-red"][class*="ml-auto"] { background: transparent; padding: 0; border-radius: 0; color: rgb(184 143 44); font-weight: 600; } html[data-skin="modern"].dark span[class*="text-ochre-red"][class*="ml-auto"] { color: rgb(232 179 57); } html[data-skin="modern"] span[class*="text-ochre-red"][class*="ml-auto"] .w-1 { background: rgb(184 143 44); border-radius: 9999px; } html[data-skin="modern"].dark span[class*="text-ochre-red"][class*="ml-auto"] .w-1 { background: rgb(232 179 57); } html[data-skin="modern"] main a[class*="hover:border-brand-blue-500/40"] span[class^="text-brand-blue-700"] { background: rgb(36 98 174 / 0.08); border-radius: 6px; padding: 2px 8px; font-weight: 500; } html[data-skin="modern"].dark main a[class*="hover:border-brand-blue-500/40"] span[class^="text-brand-blue-700"] { background: rgb(52 183 143 / 0.1); } html[data-skin="modern"] nav[aria-label="分类"] a { background-color: #fff; border: 1px solid rgb(226 232 240 / 0.6); border-radius: 16px; padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.02); transition: all .3s ease; } html[data-skin="modern"] nav[aria-label="分类"] a:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.06), 0 8px 10px -6px rgb(0 0 0 / 0.03); } html[data-skin="modern"].dark nav[aria-label="分类"] a { background-color: rgb(40 40 80); border-color: rgb(51 65 85 / 0.6); } html[data-skin="modern"] [role="menu"], html[data-skin="modern"] [role="dialog"], html[data-skin="modern"] [role="alertdialog"] { border-radius: 12px; } html[data-skin="modern"] [role="menu"] { border: 1px solid rgb(226 232 240 / 0.6); background-color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); overflow: hidden; } html[data-skin="modern"].dark [role="menu"] { background-color: rgb(40 40 80); border-color: rgb(51 65 85 / 0.6); } html[data-skin="modern"] [role="menu"] > button:hover { background-color: #F1F5F9; } html[data-skin="modern"].dark [role="menu"] > button:hover { background-color: rgb(51 65 85 / 0.5); } html[data-skin="modern"] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), html[data-skin="modern"] textarea, html[data-skin="modern"] select { background-color: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding-left: 14px; padding-right: 14px; } html[data-skin="modern"] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus, html[data-skin="modern"] textarea:focus, html[data-skin="modern"] select:focus { border-color: rgb(36 98 174 / 0.6); box-shadow: 0 0 0 4px rgb(36 98 174 / 0.08); } html[data-skin="modern"].dark input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), html[data-skin="modern"].dark textarea, html[data-skin="modern"].dark select { background-color: rgb(40 40 80 / 0.6); border-color: rgb(51 65 85 / 0.8); } html[data-skin="modern"].dark input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus, html[data-skin="modern"].dark textarea:focus, html[data-skin="modern"].dark select:focus { border-color: rgb(52 183 143 / 0.6); box-shadow: 0 0 0 4px rgb(52 183 143 / 0.1); } html[data-skin="modern"] button[class*="border-0"][class*="tracking-[0.25em]"], html[data-skin="modern"] a[class*="border-0"][class*="tracking-[0.25em]"] { border: 1px solid rgb(203 213 225); border-radius: 8px; background-color: #fff; color: rgb(51 65 85); padding-left: 16px; padding-right: 16px; text-align: center; } html[data-skin="modern"] button[class*="border-0"][class*="tracking-[0.25em]"]:hover, html[data-skin="modern"] a[class*="border-0"][class*="tracking-[0.25em]"]:hover { background-color: rgb(248 250 252); border-color: rgb(148 163 184); } html[data-skin="modern"].dark button[class*="border-0"][class*="tracking-[0.25em]"], html[data-skin="modern"].dark a[class*="border-0"][class*="tracking-[0.25em]"] { background-color: transparent; border-color: rgb(71 85 105); color: rgb(226 232 240); } html[data-skin="modern"].dark button[class*="border-0"][class*="tracking-[0.25em]"]:hover, html[data-skin="modern"].dark a[class*="border-0"][class*="tracking-[0.25em]"]:hover { background-color: rgb(51 65 85 / 0.5); } html[data-skin="modern"] #q-search { padding-right: 100px; } html[data-skin="modern"] button[aria-label="搜索"] { background-color: #2462AE; color: #fff; border-radius: 8px; margin: 4px; padding-left: 20px; padding-right: 20px; letter-spacing: 0.02em; box-shadow: 0 10px 15px -3px rgb(36 98 174 / 0.2), 0 4px 6px -4px rgb(36 98 174 / 0.2); transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; } html[data-skin="modern"] button[aria-label="搜索"]:hover { background-color: rgb(36 98 174 / 0.9); color: #fff; box-shadow: 0 20px 25px -5px rgb(36 98 174 / 0.25), 0 10px 10px -5px rgb(36 98 174 / 0.2); transform: translateY(-2px); } html[data-skin="modern"].dark button[aria-label="搜索"] { background-color: #34B78F; box-shadow: 0 10px 15px -3px rgb(52 183 143 / 0.25), 0 4px 6px -4px rgb(52 183 143 / 0.2); } html[data-skin="modern"].dark button[aria-label="搜索"]:hover { background-color: rgb(52 183 143 / 0.9); box-shadow: 0 20px 25px -5px rgb(52 183 143 / 0.3), 0 10px 10px -5px rgb(52 183 143 / 0.25); } html[data-skin="modern"] #home-announce a { border: 1px solid rgb(36 98 174 / 0.1); border-radius: 12px; background-color: rgb(36 98 174 / 0.05); } html[data-skin="modern"].dark #home-announce a { border-color: rgb(52 183 143 / 0.15); background-color: rgb(52 183 143 / 0.05); } html[data-skin="modern"] .border-brand-blue-500\/\[0\.14\] { border-color: rgb(226 232 240 / 0.7); } html[data-skin="modern"].dark .dark\:border-brand-blue-300\/\[0\.14\] { border-color: rgb(30 41 59 / 0.6); } html[data-skin="modern"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-skin="modern"] ::-webkit-scrollbar-track { background: transparent; } html[data-skin="modern"] ::-webkit-scrollbar-thumb { background: rgb(36 98 174 / 0.24); border-radius: 9999px; } html[data-skin="modern"] ::-webkit-scrollbar-thumb:hover { background: rgb(36 98 174 / 0.42); } html[data-skin="modern"].dark ::-webkit-scrollbar-thumb { background: rgb(52 183 143 / 0.28); } html[data-skin="modern"].dark ::-webkit-scrollbar-thumb:hover { background: rgb(52 183 143 / 0.48); } html[data-skin="modern"] .prose img { border-radius: 16px; } html[data-skin="modern"] .prose code, html[data-skin="modern"] .prose pre { border-radius: 8px; } html[data-skin="modern"] .prose a { text-underline-offset: 4px; text-decoration-thickness: 1.5px; } html[data-skin="modern"] .prose hr { border-color: rgb(226 232 240 / 0.7); } html[data-skin="modern"] #back-to-top { border-radius: 12px; box-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.14); } html[data-skin="modern"] ::selection { background: rgb(36 98 174 / 0.2); } html[data-skin="modern"].dark ::selection { background: rgb(52 183 143 / 0.3); } /* ---------- 皮肤三：胡杨鎏金 ---------- */ html[data-skin="poplar"] { --bb-50: 255 253 242; --bb-100: 254 248 210; --bb-200: 252 236 140; --bb-300: 248 215 88; --bb-400: 236 192 52; --bb-500: 224 178 22; --bb-600: 188 142 16; --bb-700: 148 106 8; --bb-800: 108 76 6; --bb-900: 70 48 3; --br-50: 251 252 252; --br-100: 244 246 244; --br-200: 226 229 224; --br-300: 197 202 194; --br-400: 152 158 148; --br-500: 112 118 108; --br-600: 82 88 78; --br-700: 58 62 54; --br-800: 38 40 34; --br-900: 22 24 20; --tg: 251 248 236; --page: 251 248 236; --page-dark: 24 20 12; --surface: 252 250 240; --surface-dark: 24 20 12; --glow: 224 184 30; --glow-dark: 240 200 45; --glow-soft: 248 219 82; --ore: 183 60 47; --ore-700: 142 45 34; --pg: 168 128 72; --pg-700: 125 94 48; --warn-bg: 251 243 226; --warn-fg: 168 128 72; --ok-bg: 244 240 220; --ok-fg: 130 92 20; --err-bg: 248 235 232; --err-fg: 183 60 47; --font-sans: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, Georgia, serif; --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif; --display-weight: 700; --display-tracking: 0.06em; --body-tracking: 0.015em; --body-leading: 1.85; --main-pt: 2.5rem; --main-pt-sm: 3.5rem; --main-pb: 6rem; --main-pb-md: 4rem; } html[data-skin="poplar"].dark { --bb-300: 255 226 108; } html[data-skin="poplar"] body > header::after { background: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.2) 20%, rgb(var(--bb-400) / 0.55) 50%, rgb(var(--bb-500) / 0.2) 80%, transparent 100%); } html[data-skin="poplar"] nav[aria-label="分类"] a > span[aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(var(--bb-300) / 0.18); box-shadow: 0 1px 0 rgb(var(--bb-200) / 0.6) inset; transition: background-color .3s ease; } @media (min-width: 640px) { html[data-skin="poplar"] nav[aria-label="分类"] a > span[aria-hidden="true"] { width: 2.4rem; height: 2.4rem; } } html[data-skin="poplar"].dark nav[aria-label="分类"] a > span[aria-hidden="true"] { box-shadow: 0 1px 0 rgb(255 226 108 / 0.38) inset; } html[data-skin="poplar"] nav[aria-label="分类"] a:hover > span[aria-hidden="true"] { background: rgb(var(--bb-300) / 0.36); } html[data-skin="poplar"].dark ::selection { background: rgb(255 226 108 / 0.3); } html[data-skin="poplar"] a[class*="bg-brand-blue-700"], html[data-skin="poplar"] button[class*="bg-brand-blue-700"], html[data-skin="poplar"] span[class*="bg-brand-blue-700"], html[data-skin="poplar"] a[class*="bg-ochre-red"], html[data-skin="poplar"] button[class*="bg-ochre-red"], html[data-skin="poplar"] span[class*="bg-ochre-red"] { background-image: linear-gradient(180deg, rgb(var(--bb-700)) 0%, rgb(var(--bb-900)) 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 -1px 0 rgba(0,0,0,0.22) inset, 0 2px 6px rgb(var(--bb-800) / 0.28); } html[data-skin="poplar"] a[class*="bg-brand-blue-700"]:hover, html[data-skin="poplar"] button[class*="bg-brand-blue-700"]:hover, html[data-skin="poplar"] span[class*="bg-brand-blue-700"]:hover { background-image: linear-gradient(180deg, rgb(var(--bb-600)) 0%, rgb(var(--bb-800)) 100%); } /* ============================================================ * 精修 A：编年体卡片底线渐变 * ============================================================ */ html:not([data-skin]) main a[class*="border-brand-blue-500/[0.14]"] { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.14) 25%, rgb(var(--bb-500) / 0.22) 50%, rgb(var(--bb-500) / 0.14) 75%, transparent 100%); background-size: 100% 1px; background-position: bottom; background-repeat: no-repeat; } html[data-skin="poplar"] main a[class*="border-brand-blue-500/[0.14]"] { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.16) 15%, rgb(var(--bb-400) / 0.44) 50%, rgb(var(--bb-500) / 0.16) 85%, transparent 100%); background-size: 100% 1px; background-position: bottom; background-repeat: no-repeat; } html[data-skin="poplar"] body > main .font-display.tracking-\[0\.5em\] { letter-spacing: 0.58em; } /* 精修 C：卡片 hover */ html:not([data-skin]) main a[class*="border-brand-blue-500/[0.14]"]:hover { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.28) 25%, rgb(var(--bb-500) / 0.5) 50%, rgb(var(--bb-500) / 0.28) 75%, transparent 100%); } html[data-skin="poplar"] main a[class*="border-brand-blue-500/[0.14]"]:hover { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent 0%, rgb(var(--bb-500) / 0.32) 15%, rgb(var(--bb-400) / 0.88) 50%, rgb(var(--bb-500) / 0.32) 85%, transparent 100%); } /* 精修 D：现代 skin 搜索结果 mark 柔化 */ html[data-skin="modern"] mark[class*="bg-brand-blue-100"] { background-color: rgb(36 98 174 / 0.14); color: rgb(var(--bb-900)); } html[data-skin="modern"].dark mark[class*="bg-brand-blue-100"] { background-color: rgb(52 183 143 / 0.22); color: rgb(210 245 230); } /* ============================================================ * 风格差异性强化——形状 / 阴影 / 字距 * ============================================================ */ html:not([data-skin]) button:not(.icon-btn), html:not([data-skin]) [role="button"]:not(.icon-btn), html:not([data-skin]) a[class*="bg-brand-blue-700"], html:not([data-skin]) a[class*="bg-ochre-red"], html:not([data-skin]) input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), html:not([data-skin]) textarea, html:not([data-skin]) select, html:not([data-skin]) [role="menu"], html:not([data-skin]) [role="dialog"], html:not([data-skin]) [role="alertdialog"], html:not([data-skin]) #back-to-top { border-radius: 0; } html[data-skin="poplar"] button:not(.icon-btn), html[data-skin="poplar"] [role="button"]:not(.icon-btn), html[data-skin="poplar"] a[class*="bg-brand-blue-700"], html[data-skin="poplar"] a[class*="bg-ochre-red"], html[data-skin="poplar"] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), html[data-skin="poplar"] select { border-radius: 9999px; } html[data-skin="poplar"] textarea, html[data-skin="poplar"] [role="menu"], html[data-skin="poplar"] [role="dialog"], html[data-skin="poplar"] [role="alertdialog"] { border-radius: 16px; } html[data-skin="poplar"] [role="menu"] > button, html[data-skin="poplar"] [role="dialog"] > button, html[data-skin="poplar"] [role="alertdialog"] > button { border-radius: 8px; } html[data-skin="poplar"] #back-to-top { box-shadow: 0 1px 0 rgb(var(--bb-200) / 0.6) inset, 0 4px 12px -4px rgb(var(--bb-800) / 0.35); } html:not([data-skin]) main a[class*="border-brand-blue-500/[0.14]"] { border-left: 1px solid rgb(var(--bb-500) / 0.06); border-right: 1px solid rgb(var(--bb-500) / 0.06); padding-left: 18px; padding-right: 18px; } html[data-skin="poplar"] #q-search { border: 1px solid rgb(var(--bb-300) / 0.5); border-radius: 9999px; padding-left: 20px; padding-right: 100px; } html[data-skin="poplar"] #q-search:focus { border-color: rgb(var(--bb-700)); box-shadow: 0 0 0 4px rgb(var(--bb-300) / 0.22); } html[data-skin="poplar"].dark #q-search { border-color: rgb(var(--bb-300) / 0.35); } html[data-skin="poplar"] button[aria-label="搜索"] { border-radius: 9999px; margin: 4px; padding-left: 20px; padding-right: 20px; } /* ============================================================ * Logo 明暗适配 + 三滴水动画 * * logo 是「酒泉」拼音首字母 J、Q 与水的三重叠加： * 外环——水（背景）：中亮青蓝 * 中环——J（酒的笔画）：近白，从水中镂空而出 * 内圆——Q（泉的字身）：深水青，从 J 中落下的实心 * * 静止态（J+Q 定型）：明度 L65 → L97 → L30，「中 → 亮 → 暗」 * 的哑铃对比，让 J 的镂空字形与 Q 的实心字身都清晰可读。 * * 动画态（三滴水）：每 3.6s 一次「呼吸」——三层颜色从 J+Q * 定型缓缓散成「三滴水」的单调递进（L78 → L65 → L35）， * 再由内向外聚拢，凝回 J+Q。像泉水散成涟漪，又凝成「酒泉」。 * * 暗色：整体提亮，关系不变。 * ============================================================ */ /* 静止态：J+Q 定型色（动画期间会被关键帧覆盖） */ .logo-mark__ring { fill: #4a9fd4; } /* 水：中亮背景 */ .logo-mark__fill { fill: #f2f9fd; } /* J：近白，镂空形 */ .logo-mark__core { fill: #0f4a7a; } /* Q：深水，实心字身 */ html.dark .logo-mark__ring { fill: #3b8fc4; } html.dark .logo-mark__fill { fill: #d8eefa; } html.dark .logo-mark__core { fill: #1e5c8f; } /* ============================================================ * Logo 动画——缩放 + 颜色双重「呼吸」 * * 缩放：三层由内向外依次扩张/收拢，相位差 0.35s，幅度 8%。 * 颜色：与缩放同步——动画中段三层散成「三滴水」色阶 * （单调递进），两端凝回 J+Q 定型色。 * * 延迟：内 0s / 中 0.35s / 外 0.70s —— 颜色散开也由内向外。 * * transform-box: view-box 让三层的缩放原点统一到 SVG 视口中心。 * ============================================================ */ /* 缩放关键帧 */ @keyframes logo-drop { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1); } } /* 明色颜色关键帧：J+Q 定型 ↔ 三滴水色阶 */ @keyframes logo-color-ring { 0%, 25%, 100% { fill: #4a9fd4; } /* J+Q：水 L65 */ 60% { fill: #8ac4e2; } /* 三滴水：外环 L78 */ } @keyframes logo-color-fill { 0%, 25%, 100% { fill: #f2f9fd; } /* J+Q：J 近白 L97 */ 60% { fill: #4a9fd4; } /* 三滴水：中环 L65 */ } @keyframes logo-color-core { 0%, 25%, 100% { fill: #0f4a7a; } /* J+Q：Q 深水 L30 */ 60% { fill: #1a5580; } /* 三滴水：内圆 L35 */ } /* 暗色颜色关键帧：整体提亮，关系不变 */ @keyframes logo-color-ring-dark { 0%, 25%, 100% { fill: #3b8fc4; } 60% { fill: #b3ddf0; } } @keyframes logo-color-fill-dark { 0%, 25%, 100% { fill: #d8eefa; } 60% { fill: #6bb8de; } } @keyframes logo-color-core-dark { 0%, 25%, 100% { fill: #1e5c8f; } 60% { fill: #3585bd; } } /* 基础属性 */ .logo-mark__ring, .logo-mark__fill, .logo-mark__core { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; } /* 明色：三层动画（缩放 + 颜色），相位延迟 内 0s / 中 0.35s / 外 0.70s */ .logo-mark__ring { animation: logo-drop 3.6s cubic-bezier(.45, 0, .55, 1) 0.70s infinite, logo-color-ring 3.6s ease-in-out 0.70s infinite; } .logo-mark__fill { animation: logo-drop 3.6s cubic-bezier(.45, 0, .55, 1) 0.35s infinite, logo-color-fill 3.6s ease-in-out 0.35s infinite; } .logo-mark__core { animation: logo-drop 3.6s cubic-bezier(.45, 0, .55, 1) 0s infinite, logo-color-core 3.6s ease-in-out 0s infinite; } /* 暗色：切换颜色关键帧，其他一致 */ html.dark .logo-mark__ring { animation: logo-drop 3.6s cubic-bezier(.45, 0, .55, 1) 0.70s infinite, logo-color-ring-dark 3.6s ease-in-out 0.70s infinite; } html.dark .logo-mark__fill { animation: logo-drop 3.6s cubic-bezier(.45, 0, .55, 1) 0.35s infinite, logo-color-fill-dark 3.6s ease-in-out 0.35s infinite; } html.dark .logo-mark__core { animation: logo-drop 3.6s cubic-bezier(.45, 0, .55, 1) 0s infinite, logo-color-core-dark 3.6s ease-in-out 0s infinite; } /* hover：动画加速（2.5 倍） */ a:hover > svg .logo-mark__ring, a:hover > svg .logo-mark__fill, a:hover > svg .logo-mark__core { animation-duration: 1.4s, 1.4s; } /* prefers-reduced-motion：关闭动画，保持 J+Q 静态形态 */ @media (prefers-reduced-motion: reduce) { .logo-mark__ring, .logo-mark__fill, .logo-mark__core { animation: none; } } /* ---------- 换肤菜单色点 ---------- */ .skin-dot { width: 14px; height: 14px; border-radius: 9999px; display: inline-block; flex: none; border: 1px solid rgba(0, 0, 0, 0.12); } .skin-dot-blue { background: linear-gradient(135deg, #5482B0 0 50%, #B73C2F 50% 100%); } .skin-dot-modern { background: linear-gradient(135deg, #2462AE 0 50%, #34B78F 50% 100%); } .skin-dot-poplar { background: linear-gradient(135deg, #DAB01E 0 50%, #F8D758 50% 100%); } /* ============================================================ * 品牌题头 · 背景动效（三皮肤各表一境） * * 酒泉汲青 —— 汲青 · 泉眼涟漪 * 航天揽蓝 —— 揽蓝 · 一星四器 * 胡杨鎏金 —— 鎏金 · 斑驳胡杨 * * 图形全部为「填充块」——填充圆 / 填充叶，无描边无线段。 * * 性能约束： * 1. 关键帧只改 transform / opacity —— 全程合成层，不重排不重绘； * 2. 同一皮肤只有一组图形在跑； * 3. 皮肤用不到的图形 display:none，不渲染、不跑帧； * 4. 颜色取 --bb-* 与 --bh-leaf 变量。 * ============================================================ */ .brand-head { position: relative; isolation: isolate; overflow: hidden; --bh-ink: var(--bb-500); --bh-ink-soft: var(--bb-400); --bh-leaf: 230 180 40; /* 胡杨金黄（浅底） */ } html.dark .brand-head { --bh-ink: var(--bb-300); --bh-ink-soft: var(--bb-200); --bh-leaf: 245 208 106; /* 胡杨金黄（深底提亮） */ } .brand-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; user-select: none; } /* ---------- 皮肤分工：用不到的图形直接下架 ---------- */ html:not([data-skin]) .brand-head__orbit, html:not([data-skin]) .brand-head__leaves, html[data-skin="modern"] .brand-head__spring, html[data-skin="modern"] .brand-head__leaves, html[data-skin="poplar"] .brand-head__spring, html[data-skin="poplar"] .brand-head__orbit { display: none; } /* ============================================================ * A. 汲青 —— 酒泉汲青 * * 取「泉」意：一粒泉眼定在题头正中，四道涟漪由心而外荡开。 * 涟漪起始半径极小（scale .16），从泉眼那一瞬开始扩散， * 靠延迟接力形成「汩汩」的节奏，读起来是泉水自地心涌出。 * 填充 alpha 0.045，浅底上仅剩纸面被水润过的一丝潮痕。 * ============================================================ */ .brand-head__spring-core { transform-box: view-box; transform-origin: 600px 130px; fill: rgb(var(--bh-ink) / 0.10); opacity: 0; animation: brand-spring-core 11s ease-in-out infinite; } @keyframes brand-spring-core { 0%, 100% { transform: scale(.6); opacity: 0; } 8% { transform: scale(1); opacity: .9; } 24% { transform: scale(1.1); opacity: .35; } 40% { transform: scale(1); opacity: .9; } 60% { transform: scale(.8); opacity: 0; } } .brand-head__ripple circle { transform-box: view-box; transform-origin: 600px 130px; fill: rgb(var(--bh-ink) / 0.045); opacity: 0; animation: brand-ripple 11s cubic-bezier(.22, .61, .36, 1) infinite; } .brand-head__ripple circle:nth-child(2) { animation-delay: 2.75s; } .brand-head__ripple circle:nth-child(3) { animation-delay: 5.5s; } .brand-head__ripple circle:nth-child(4) { animation-delay: 8.25s; } @keyframes brand-ripple { 0% { transform: scale(.16); opacity: 0; } 14% { opacity: .62; } 74% { opacity: .22; } 100% { transform: scale(2.2); opacity: 0; } } /* ============================================================ * B. 揽蓝 —— 航天揽蓝 * * 取「揽」意：中心一星静悬，四器各循轨巡行。 * 中心柔光缓脉，四器以 22s / 30s / 50s / 70s 不同周期与 * 两顺两逆的方向交叠，读起来是酒泉发射场仰望夜空的那一幕。 * ============================================================ */ .brand-head__core { transform-box: view-box; transform-origin: 600px 130px; fill: rgb(var(--bh-ink-soft) / 0.10); animation: brand-core-pulse 9s ease-in-out infinite; } @keyframes brand-core-pulse { 0%, 100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } } .brand-head__sat { transform-box: view-box; transform-origin: 600px 130px; fill: rgb(var(--bh-ink-soft) / 0.26); animation: brand-sat-spin 30s linear infinite, brand-sat-breathe 5s ease-in-out infinite; } .brand-head__sat:nth-child(3) { fill: rgb(var(--bh-ink) / 0.20); animation-duration: 50s, 6.5s; animation-direction: reverse, normal; animation-delay: 0s, -1.5s; } .brand-head__sat:nth-child(4) { fill: rgb(var(--bh-ink-soft) / 0.30); animation-duration: 22s, 4s; animation-delay: 0s, -2.5s; } .brand-head__sat:nth-child(5) { fill: rgb(var(--bh-ink) / 0.22); animation-duration: 70s, 7.5s; animation-direction: reverse, normal; animation-delay: 0s, -4s; } @keyframes brand-sat-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes brand-sat-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* ============================================================ * C. 鎏金 —— 胡杨鎏金 * * 取「鎏」意：胡杨林在正午光里的斑驳金彩。 * 十六片叶分四丛，每片染上一档深浅不同的金—— * 亮金 245 208 106 · 明金 235 190 60 · 标金 230 180 40 · 陈金 205 155 30 * 深浅错落如叶面迎着不同角度的光； * alpha 0.06 ~ 0.18，浅底上像透过薄雾的一片金色秋林。 * ============================================================ */ .brand-head__leaf { transform-box: fill-box; transform-origin: center; fill: rgb(230 180 40); opacity: 0; animation: brand-leaf-sway 10s ease-in-out infinite; } html.dark .brand-head__leaf { fill: rgb(245 208 106); } /* 四档金彩：以 4 为周期错开，让相邻叶层色温不同 */ .brand-head__leaves > g:nth-child(4n+1) .brand-head__leaf { fill: rgb(245 208 106); } /* 亮金 */ .brand-head__leaves > g:nth-child(4n+2) .brand-head__leaf { fill: rgb(235 190 60); } /* 明金 */ .brand-head__leaves > g:nth-child(4n+3) .brand-head__leaf { fill: rgb(230 180 40); } /* 标金 */ .brand-head__leaves > g:nth-child(4n) .brand-head__leaf { fill: rgb(205 155 30); } /* 陈金 */ html.dark .brand-head__leaves > g:nth-child(4n+1) .brand-head__leaf { fill: rgb(255 226 140); } html.dark .brand-head__leaves > g:nth-child(4n+2) .brand-head__leaf { fill: rgb(248 214 100); } html.dark .brand-head__leaves > g:nth-child(4n+3) .brand-head__leaf { fill: rgb(245 208 106); } html.dark .brand-head__leaves > g:nth-child(4n) .brand-head__leaf { fill: rgb(224 178 70); } /* 各片周期与起相位：风自左右两侧交替漫过 */ .brand-head__leaves > g:nth-child(1) .brand-head__leaf { animation-duration: 9.5s; animation-delay: -0.4s; } .brand-head__leaves > g:nth-child(2) .brand-head__leaf { animation-duration: 11.2s; animation-delay: -3.7s; } .brand-head__leaves > g:nth-child(3) .brand-head__leaf { animation-duration: 8.8s; animation-delay: -6.1s; } .brand-head__leaves > g:nth-child(4) .brand-head__leaf { animation-duration: 12.5s; animation-delay: -2.3s; } .brand-head__leaves > g:nth-child(5) .brand-head__leaf { animation-duration: 10.1s; animation-delay: -8.6s; } .brand-head__leaves > g:nth-child(6) .brand-head__leaf { animation-duration: 13.4s; animation-delay: -4.9s; } .brand-head__leaves > g:nth-child(7) .brand-head__leaf { animation-duration: 9.2s; animation-delay: -7.5s; } .brand-head__leaves > g:nth-child(8) .brand-head__leaf { animation-duration: 11.8s; animation-delay: -1.6s; } .brand-head__leaves > g:nth-child(9) .brand-head__leaf { animation-duration: 10.6s; animation-delay: -5.2s; } .brand-head__leaves > g:nth-child(10) .brand-head__leaf { animation-duration: 12.0s; animation-delay: -3.0s; } .brand-head__leaves > g:nth-child(11) .brand-head__leaf { animation-duration: 9.8s; animation-delay: -6.8s; } .brand-head__leaves > g:nth-child(12) .brand-head__leaf { animation-duration: 11.5s; animation-delay: -2.1s; } .brand-head__leaves > g:nth-child(13) .brand-head__leaf { animation-duration: 10.3s; animation-delay: -8.0s; } .brand-head__leaves > g:nth-child(14) .brand-head__leaf { animation-duration: 12.8s; animation-delay: -4.4s; } .brand-head__leaves > g:nth-child(15) .brand-head__leaf { animation-duration: 9.4s; animation-delay: -7.2s; } .brand-head__leaves > g:nth-child(16) .brand-head__leaf { animation-duration: 11.0s; animation-delay: -1.2s; } @keyframes brand-leaf-sway { 0%, 100% { transform: rotate(-8deg); opacity: .06; } 50% { transform: rotate( 8deg); opacity: .18; } } /* ---------- 减动效偏好：停动画，保留静帧 ---------- */ @media (prefers-reduced-motion: reduce) { .brand-head__spring-core, .brand-head__ripple circle, .brand-head__core, .brand-head__sat, .brand-head__leaf { animation: none; } .brand-head__spring-core { opacity: .55; transform: scale(1); } .brand-head__ripple circle{ opacity: .26; transform: scale(1.1); } .brand-head__core { opacity: .7; } .brand-head__sat { opacity: .75; } .brand-head__leaf { opacity: .12; } }