675 lines
15 KiB
CSS
675 lines
15 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
body {
|
|
font-family: Inter,sans-serif;
|
|
overflow-x: hidden
|
|
}
|
|
|
|
.nav-scrolled {
|
|
background-color: rgba(0,0,0,.95);
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 2px 10px rgba(255,255,255,.1)
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 350px;
|
|
width: 100%
|
|
}
|
|
|
|
iframe {
|
|
transition: opacity .5s ease
|
|
}
|
|
|
|
.group:hover iframe {
|
|
opacity: 1
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth
|
|
}
|
|
|
|
button {
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1)
|
|
}
|
|
|
|
button:hover {
|
|
transform: translateY(-2px)
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all .4s cubic-bezier(.175, .885, .32, 1.275)
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
transform: none;
|
|
will-change: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale
|
|
}
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
background: linear-gradient(-45deg,#fff,#fcfeff,#eff6ff,#d9d9ff);
|
|
background-size: 400% 400%;
|
|
animation: gradientFlow 20s ease infinite;
|
|
will-change: background-position
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background: radial-gradient(circle at 20% 80%,rgba(120,119,198,.2) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.2) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.2) 0,transparent 50%);
|
|
background-size: 150% 150%;
|
|
animation: particleFlow 20s ease infinite;
|
|
will-change: background-position
|
|
}
|
|
|
|
@keyframes gradientFlow {
|
|
0% {background-position: 0 50%}
|
|
25% {background-position: 100% 50%}
|
|
50% {background-position: 100% 100%}
|
|
75% {background-position: 0 100%}
|
|
100% {background-position: 0 50%}
|
|
}
|
|
|
|
@keyframes particleFlow {
|
|
0% {background-position: 0 0}
|
|
25% {background-position: 50% 100%}
|
|
50% {background-position: 100% 100%}
|
|
75% {background-position: 50% 0}
|
|
100% {background-position: 0 0}
|
|
}
|
|
|
|
@layer utilities {
|
|
.float-fix {
|
|
position: relative;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
perspective: 1000px;
|
|
will-change: transform
|
|
}
|
|
}
|
|
|
|
/* 深色模式适配（可选）
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: linear-gradient(-45deg,
|
|
#0f172a, #1e293b, #334155, #475569,
|
|
#27374d, #1a2434, #0f172a);
|
|
}
|
|
|
|
body::before {
|
|
background:
|
|
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.08) 0%, transparent 50%);
|
|
}
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@property --angle {
|
|
syntax: "<angle>";
|
|
initial-value: 0deg;
|
|
inherits: false
|
|
}
|
|
|
|
@keyframes sendBtnGradientRotate {
|
|
0% {
|
|
--angle: 0deg
|
|
}
|
|
|
|
7.14% {
|
|
--angle: 21.8deg
|
|
}
|
|
|
|
42.86% {
|
|
--angle: 158.2deg
|
|
}
|
|
|
|
57.14% {
|
|
--angle: 201.8deg
|
|
}
|
|
|
|
92.86% {
|
|
--angle: 338.2deg
|
|
}
|
|
|
|
to {
|
|
--angle: 360deg
|
|
}
|
|
}
|
|
|
|
.sendBtn {
|
|
background: linear-gradient(var(--angle),#47c0ff -18.45%,#0094ff 17.73%,#836cff 39.48%,#ff56f2 74.15%,#ffb75c 93.09%);
|
|
-webkit-animation: sendBtnGradientRotate 5s linear infinite;
|
|
animation: sendBtnGradientRotate 5s linear infinite;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 1. 首先引入 DIN Condensed 字体（解决字体缺失核心问题） */
|
|
@font-face {
|
|
font-family: "DIN Condensed";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: fallback;
|
|
/* 修正字体文件 URL，仅保留有效的字体资源地址 */
|
|
src:url(https://cdn.marmot-cloud.com/storage/zenmux/2025/09/03/XH4qEdP/DIN_Condensed-Bold.woff2) format('woff2'),
|
|
local("DIN Condensed Bold"), local("DINCondensed-Bold");
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* 保留原有 Noto Serif 字体定义（不影响翻牌组件） */
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: fallback;
|
|
src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/3TdWyBD/NotoSerif-Light.ttf)format("truetype")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: fallback;
|
|
src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/csSK6pH/NotoSerif-Regular.ttf)format("truetype")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Noto Serif";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: fallback;
|
|
src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/qSZwJRf/NotoSerif-SemiBold.ttf)format("truetype")
|
|
}
|
|
|
|
.noto-serif {
|
|
font-family: "Noto Serif",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
|
|
font-feature-settings: "kern"1;
|
|
text-rendering: optimizeLegibility
|
|
}
|
|
|
|
.noto-serif-stable {
|
|
font-family: "Noto Serif",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
|
|
font-size-adjust: .5;
|
|
letter-spacing: .01em
|
|
}
|
|
|
|
.M-FlipCard {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 48px;
|
|
height: 68px;
|
|
border-radius: 5px;
|
|
font-size: 66px;
|
|
box-shadow: 0 1px 1px 0 rgba(0,0,0,.102);
|
|
font-family: "DIN Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
font-weight: 700;
|
|
font-style: bold;
|
|
font-size: 70px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
line-height: 1.23;
|
|
color: #000;
|
|
}
|
|
|
|
.M-FlipCard.flip-win {
|
|
line-height: 68px
|
|
}
|
|
|
|
.M-FlipCard.flip-win .digital:before {
|
|
line-height: 70px
|
|
}
|
|
|
|
.M-FlipCard.flip-win .digital:after {
|
|
line-height: 3px
|
|
}
|
|
|
|
.M-FlipCard .digital:before,.M-FlipCard .digital:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
/* 继承翻牌组件的字体 */
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.M-FlipCard .digital:before {
|
|
top: 0;
|
|
bottom: 50%;
|
|
border-radius: 5px 5px 0 0;
|
|
border-bottom: solid 1px#e6e6e6
|
|
}
|
|
|
|
.M-FlipCard .digital:after {
|
|
top: 50%;
|
|
bottom: 0;
|
|
border-radius: 0 0 5px 5px;
|
|
line-height: .3
|
|
}
|
|
|
|
.M-FlipCard.down .front:before {
|
|
z-index: 3
|
|
}
|
|
|
|
.M-FlipCard.down .back:after {
|
|
z-index: 2;
|
|
transform-origin: 50%0%;
|
|
transform: perspective(160px)rotatex(180deg)
|
|
}
|
|
|
|
.M-FlipCard.down .front:after,.M-FlipCard.down .back:before {
|
|
z-index: 1
|
|
}
|
|
|
|
.M-FlipCard.down.go .front:before {
|
|
transform-origin: 50%100%;
|
|
-webkit-animation: frontFlipDown var(--flipduration)linear both;
|
|
animation: frontFlipDown var(--flipduration)linear both;
|
|
box-shadow: 0 -2px 6px rgba(255,255,255,.3);
|
|
backface-visibility: hidden
|
|
}
|
|
|
|
.M-FlipCard.down.go .back:after {
|
|
-webkit-animation: backFlipDown var(--flipduration)linear both;
|
|
animation: backFlipDown var(--flipduration)linear both
|
|
}
|
|
|
|
.M-FlipCard.up .front:after {
|
|
z-index: 3
|
|
}
|
|
|
|
.M-FlipCard.up .back:before {
|
|
z-index: 2;
|
|
transform-origin: 50%100%;
|
|
transform: perspective(160px)rotatex(-180deg)
|
|
}
|
|
|
|
.M-FlipCard.up .front:before,.M-FlipCard.up .back:after {
|
|
z-index: 1
|
|
}
|
|
|
|
.M-FlipCard.up.go .front:after {
|
|
transform-origin: 50%0;
|
|
-webkit-animation: frontFlipUp var(--flipduration)linear both;
|
|
animation: frontFlipUp var(--flipduration)linear both;
|
|
box-shadow: 0 2px 6px rgba(255,255,255,.3);
|
|
backface-visibility: hidden
|
|
}
|
|
|
|
.M-FlipCard.up.go .back:before {
|
|
-webkit-animation: backFlipUp var(--flipduration)linear both;
|
|
animation: backFlipUp var(--flipduration)linear both
|
|
}
|
|
|
|
@keyframes frontFlipDown {
|
|
0% {
|
|
background-color: #fff;
|
|
transform: perspective(160px)rotatex(0)
|
|
}
|
|
|
|
50% {
|
|
background-color: #f5f5f5;
|
|
transform: perspective(160px)rotatex(-90deg)
|
|
}
|
|
|
|
to {
|
|
background-color: #fff;
|
|
transform: perspective(160px)rotatex(-180deg)
|
|
}
|
|
}
|
|
|
|
@keyframes backFlipDown {
|
|
0% {
|
|
background-color: #fff;
|
|
transform: perspective(160px)rotatex(180deg)
|
|
}
|
|
|
|
50% {
|
|
background-color: #f5f5f5;
|
|
transform: perspective(160px)rotatex(90deg)
|
|
}
|
|
|
|
to {
|
|
background-color: #fff;
|
|
transform: perspective(160px)rotatex(0)
|
|
}
|
|
}
|
|
|
|
@keyframes frontFlipUp {
|
|
0% {
|
|
transform: perspective(160px)rotatex(0)
|
|
}
|
|
|
|
to {
|
|
transform: perspective(160px)rotatex(180deg)
|
|
}
|
|
}
|
|
|
|
@keyframes backFlipUp {
|
|
0% {
|
|
transform: perspective(160px)rotatex(-180deg)
|
|
}
|
|
|
|
to {
|
|
transform: perspective(160px)rotatex(0)
|
|
}
|
|
}
|
|
|
|
.M-FlipCard .number0:before,.M-FlipCard .number0:after {
|
|
content: "0"
|
|
}
|
|
|
|
.M-FlipCard .number1:before,.M-FlipCard .number1:after {
|
|
content: "1"
|
|
}
|
|
|
|
.M-FlipCard .number2:before,.M-FlipCard .number2:after {
|
|
content: "2"
|
|
}
|
|
|
|
.M-FlipCard .number3:before,.M-FlipCard .number3:after {
|
|
content: "3"
|
|
}
|
|
|
|
.M-FlipCard .number4:before,.M-FlipCard .number4:after {
|
|
content: "4"
|
|
}
|
|
|
|
.M-FlipCard .number5:before,.M-FlipCard .number5:after {
|
|
content: "5"
|
|
}
|
|
|
|
.M-FlipCard .number6:before,.M-FlipCard .number6:after {
|
|
content: "6"
|
|
}
|
|
|
|
.M-FlipCard .number7:before,.M-FlipCard .number7:after {
|
|
content: "7"
|
|
}
|
|
|
|
.M-FlipCard .number8:before,.M-FlipCard .number8:after {
|
|
content: "8"
|
|
}
|
|
|
|
.M-FlipCard .number9:before,.M-FlipCard .number9:after {
|
|
content: "9"
|
|
}
|
|
|
|
html[data-theme-mode=dark] .M-FlipCard {
|
|
color: #fff
|
|
}
|
|
|
|
html[data-theme-mode=dark] .M-FlipCard .digital:before,html[data-theme-mode=dark] .M-FlipCard .digital:after {
|
|
background: #333
|
|
}
|
|
|
|
html[data-theme-mode=dark] .M-FlipCard .digital:before {
|
|
border-bottom-color: #444
|
|
}
|
|
|
|
@keyframes frontFlipDownDark {
|
|
0% {
|
|
background-color: #333;
|
|
transform: perspective(160px)rotatex(0)
|
|
}
|
|
|
|
50% {
|
|
background-color: #2a2a2a;
|
|
transform: perspective(160px)rotatex(-90deg)
|
|
}
|
|
|
|
to {
|
|
background-color: #333;
|
|
transform: perspective(160px)rotatex(-180deg)
|
|
}
|
|
}
|
|
|
|
@keyframes backFlipDownDark {
|
|
0% {
|
|
background-color: #333;
|
|
transform: perspective(160px)rotatex(180deg)
|
|
}
|
|
|
|
50% {
|
|
background-color: #2a2a2a;
|
|
transform: perspective(160px)rotatex(90deg)
|
|
}
|
|
|
|
to {
|
|
background-color: #333;
|
|
transform: perspective(160px)rotatex(0)
|
|
}
|
|
}
|
|
|
|
|
|
.blurry {
|
|
background: rgba(0, 0, 0, 0.28);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
border-radius: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
/* ── Mobile: headline backdrop 仅在 md+ 显示，移动端用纯透明渐变遮罩代替 ── */
|
|
@media (max-width: 767px) {
|
|
.hero-headline {
|
|
/* 移动端简化背景：柔和深色毛玻璃，增强可读性 */
|
|
background: rgba(0, 0, 0, 0.28);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
border-radius: 14px;
|
|
padding: 14px 16px 12px;
|
|
width: calc(100vw - 32px);
|
|
box-sizing: border-box;
|
|
}
|
|
/* 移动端 h1 去掉 px，由父级 padding 控制 */
|
|
.hero-headline h1 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* ── Mobile: 输入框容器宽度修正 ── */
|
|
@media (max-width: 767px) {
|
|
.hero-input-wrap {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
/* 发送按钮文字在极小屏不换行 */
|
|
.sendBtn > div {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* ── Mobile: 按钮组在移动端全宽展示，企业感间距 ── */
|
|
@media (max-width: 639px) {
|
|
.hero-actions {
|
|
position: relative;
|
|
}
|
|
.hero-actions a {
|
|
width: 100%;
|
|
}
|
|
.hero-actions a button {
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
/* ── Mobile: 底部统计翻牌区 移动端隐藏（原逻辑保留） ── */
|
|
@media (max-width: 767px) {
|
|
.hero-stats {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* ── 极小屏 (<375px) 紧凑模式 ── */
|
|
@media (max-width: 374px) {
|
|
.hero-headline {
|
|
padding: 10px 12px;
|
|
}
|
|
.hero-actions a button {
|
|
height: 44px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* =========================================
|
|
全局智能磨砂滚动条 (复制此段代码到 <head>)
|
|
========================================= */
|
|
|
|
html {
|
|
/* 定义基础变量 */
|
|
--sb-size: 6px;
|
|
--sb-track: transparent;
|
|
/*
|
|
技巧：利用 mix-blend-mode: difference 让滑块颜色自动反转
|
|
无论背景黑还是白，它都会变成对比色，实现全自动适配
|
|
*/
|
|
--sb-thumb-blend: difference;
|
|
--sb-thumb-color: rgba(200, 200, 200, 0.5);
|
|
--sb-thumb-hover: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* 针对滚动条容器 */
|
|
html, body, * {
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
|
|
}
|
|
|
|
/* 定义滚动条变量 - 核心配置 */
|
|
:root {
|
|
/* 滚动条尺寸 - 更细更低调 */
|
|
--sb-size: 6px;
|
|
/* 轨道背景 - 完全透明 */
|
|
--sb-track: transparent;
|
|
/* 滚动条滑块基础色 - 极低透明度的灰色 */
|
|
--sb-thumb-color: rgba(156, 163, 175, 0.15);
|
|
/* 混合模式 - 叠加模式增强融合性 */
|
|
--sb-thumb-blend: overlay;
|
|
/* 悬停色 - 略微提高透明度 */
|
|
--sb-thumb-hover: rgba(156, 163, 175, 0.3);
|
|
}
|
|
/*
|
|
::-webkit-scrollbar {
|
|
width: var(--sb-size);
|
|
height: var(--sb-size);
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--sb-track);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 100px rgba(120, 120, 120, 0.08);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
box-shadow: inset 0 0 0 100px rgba(120, 120, 120, 0.2);
|
|
}
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(156, 163, 175, 0.15) transparent;
|
|
}*/ |