diff --git a/IDE官网/assets/css/ai-advisor.css b/IDE官网/assets/css/ai-advisor.css index b3e2a31..2bbb867 100644 --- a/IDE官网/assets/css/ai-advisor.css +++ b/IDE官网/assets/css/ai-advisor.css @@ -55,6 +55,32 @@ --ai-routes-panel-w: 1360px; --ai-acrylic-bg: rgba(255, 255, 255, 0.32); --ai-acrylic-bg-primary: color-mix(in srgb, var(--ai-gold-soft) 42%, rgba(255, 255, 255, 0.38)); + --ai-glass-fill: linear-gradient( + 165deg, + rgba(255, 255, 255, 0.5) 0%, + rgba(255, 255, 255, 0.2) 50%, + rgba(255, 255, 255, 0.36) 100% + ); + --ai-glass-fill-strong: linear-gradient( + 145deg, + rgba(255, 255, 255, 0.62) 0%, + rgba(255, 255, 255, 0.3) 52%, + rgba(255, 255, 255, 0.42) 100% + ); + --ai-glass-border: rgba(255, 255, 255, 0.8); + --ai-glass-blur: blur(28px) saturate(140%); + --ai-glass-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.95), + inset 0 -1px 0 rgba(255, 255, 255, 0.18), + 0 10px 28px rgba(15, 23, 42, 0.05), + 0 0 0 1px rgba(18, 24, 32, 0.035); + --ai-hairline: linear-gradient( + 90deg, + transparent 0%, + color-mix(in srgb, var(--ai-border) 55%, transparent) 18%, + color-mix(in srgb, var(--ai-border) 55%, transparent) 82%, + transparent 100% + ); } body.command-home { @@ -63,15 +89,15 @@ body.command-home { color: var(--ai-ink); } -/* Slim header, original light chrome */ +/* Slim header — transparent so stage bg reads as one surface */ body.command-home #header.header, body.command-home #header.header.sticked { display: flex !important; padding: 10px 0; - background: var(--ai-header-bg); - backdrop-filter: blur(14px) saturate(165%); - -webkit-backdrop-filter: blur(14px) saturate(165%); - border-bottom: 1px solid color-mix(in srgb, var(--ai-border) 28%, transparent); + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border: none; box-shadow: none; } @@ -136,11 +162,11 @@ body.command-home #navbar .site-nav-dock a { gap: 20px; padding: 6px 12px; border-radius: 22px; - border: 1px solid rgba(255, 255, 255, 0.72); - background: var(--ai-acrylic-bg); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); - box-shadow: none; + border: 1px solid var(--ai-glass-border); + background: var(--ai-glass-fill); + backdrop-filter: var(--ai-glass-blur); + -webkit-backdrop-filter: var(--ai-glass-blur); + box-shadow: var(--ai-glass-shadow); } body.command-home #navbar li.site-nav-dock:hover > a, @@ -317,13 +343,13 @@ body.command-home #navbar .language-toggle-link.active:focus { height: 32px; margin: 0; padding: 0 10px 0 8px; - border: 1px solid rgba(255, 255, 255, 0.72); + border: 1px solid var(--ai-glass-border); border-radius: var(--ai-radius-sm); - background: var(--ai-acrylic-bg); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); + background: var(--ai-glass-fill); + backdrop-filter: var(--ai-glass-blur); + -webkit-backdrop-filter: var(--ai-glass-blur); color: var(--ai-text-2); - box-shadow: none; + box-shadow: var(--ai-glass-shadow); cursor: pointer; transition: border-color 0.2s var(--ai-ease), @@ -350,9 +376,9 @@ body.command-home .language-toggle__next { body.command-home #navbar .language-toggle-link:hover, body.command-home #navbar .language-toggle-link.active, body.command-home #navbar .language-toggle-link.active:focus { - border-color: rgba(255, 255, 255, 0.92); - background: rgba(255, 255, 255, 0.44); - box-shadow: none; + border-color: rgba(255, 255, 255, 0.94); + background: var(--ai-glass-fill-strong); + box-shadow: var(--ai-glass-shadow); color: var(--ai-text); } @@ -369,7 +395,7 @@ body.command-home #navbar a.language-toggle-link:hover .language-toggle-icon { body.command-home #ai-advisor-shell { display: block; position: fixed; - top: var(--ai-header-h); + top: 0; left: 0; right: 0; bottom: 0; @@ -382,14 +408,25 @@ body.command-home #ai-advisor-shell { inset: -160px; overflow: visible; background: - radial-gradient(ellipse 58% 48% at 18% 12%, rgba(var(--ai-sky-rgb), 0.055), transparent 68%), - radial-gradient(ellipse 52% 44% at 86% 78%, rgba(var(--ai-gold-rgb), 0.04), transparent 70%), - radial-gradient(ellipse 40% 36% at 72% 18%, rgba(var(--ai-action-rgb), 0.03), transparent 72%), + radial-gradient(ellipse 78% 52% at 50% -8%, rgba(255, 255, 255, 0.92), transparent 58%), + radial-gradient(ellipse 48% 42% at 8% 36%, rgba(255, 255, 255, 0.42), transparent 68%), + radial-gradient(ellipse 44% 40% at 92% 48%, rgba(18, 24, 32, 0.035), transparent 70%), + radial-gradient(ellipse 70% 48% at 50% 108%, rgba(18, 24, 32, 0.045), transparent 60%), var(--ai-bg); } +/* Full-page soft luminance — static (no animated blur layer) */ .ai-shell-bg__veil { - display: none; + display: block; + position: absolute; + inset: -4%; + pointer-events: none; + background: + radial-gradient(ellipse 46% 38% at 28% 24%, rgba(255, 255, 255, 0.55), transparent 70%), + radial-gradient(ellipse 42% 36% at 74% 32%, rgba(255, 255, 255, 0.35), transparent 72%), + radial-gradient(ellipse 50% 42% at 58% 78%, rgba(255, 255, 255, 0.22), transparent 74%), + radial-gradient(ellipse 40% 34% at 18% 72%, rgba(18, 24, 32, 0.035), transparent 70%); + opacity: 0.9; } /* 五区域氛围地图:左上欧盟 / 中间中国 / 右上美洲 / 左下东南亚 / 右下澳洲 */ @@ -405,7 +442,7 @@ body.command-home #ai-advisor-shell { .ai-stage-map { position: absolute; overflow: visible; - opacity: 0.22; + opacity: 0.28; pointer-events: none; transition: opacity 0.45s var(--ai-ease), @@ -763,23 +800,32 @@ body.command-home .ai-stage-map--eu { min-height: 88px; padding: 16px 16px 16px 24px; border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.72); - background: var(--ai-acrylic-bg); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); - box-shadow: none; + border: 1px solid var(--ai-glass-border); + background: var(--ai-glass-fill); + backdrop-filter: var(--ai-glass-blur); + -webkit-backdrop-filter: var(--ai-glass-blur); + box-shadow: var(--ai-glass-shadow); transition: border-color 0.2s var(--ai-ease), - background 0.2s var(--ai-ease); + background 0.2s var(--ai-ease), + box-shadow 0.2s var(--ai-ease); } .ai-composer::before { - display: none; + content: ''; + position: absolute; + inset: 0; + z-index: 0; + border-radius: inherit; + pointer-events: none; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 44%); + opacity: 0.7; + mix-blend-mode: soft-light; } .ai-composer:focus-within { - border-color: rgba(255, 255, 255, 0.92); - background: rgba(255, 255, 255, 0.44); + border-color: rgba(255, 255, 255, 0.94); + background: var(--ai-glass-fill-strong); } .ai-msg-row--assistant .ai-msg-bubble:not(:has(.ai-card))::before { @@ -857,7 +903,7 @@ body.command-home .ai-stage-map--eu { height: 100%; max-width: var(--ai-content-max); margin: 0 auto; - padding: 8px 20px 0; + padding: calc(var(--ai-header-h) + 8px) 20px 0; box-sizing: border-box; } @@ -881,11 +927,11 @@ body.command-home .ai-stage-map--eu { gap: 4px; padding: 4px; border-radius: 18px; - border: 1px solid rgba(255, 255, 255, 0.72); - background: var(--ai-acrylic-bg); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); - box-shadow: none; + border: 1px solid var(--ai-glass-border); + background: var(--ai-glass-fill); + backdrop-filter: var(--ai-glass-blur); + -webkit-backdrop-filter: var(--ai-glass-blur); + box-shadow: var(--ai-glass-shadow); } .ai-sidebar-toggle, @@ -1761,57 +1807,11 @@ body.command-home .ai-stage-map--eu { isolation: isolate; } -.ai-welcome__hero::before { - content: ''; - position: absolute; - top: -8px; - left: 50%; - z-index: 0; - width: min(920px, 108vw); - height: clamp(220px, 34vh, 320px); - transform: translateX(-50%); - pointer-events: none; - --ai-hero-grid-line: color-mix(in srgb, var(--ai-sky) 8%, var(--ai-border)); - background-image: - repeating-linear-gradient( - 0deg, - transparent 0, - transparent 47px, - var(--ai-hero-grid-line) 47px, - var(--ai-hero-grid-line) 48px - ), - repeating-linear-gradient( - 90deg, - transparent 0, - transparent 47px, - var(--ai-hero-grid-line) 47px, - var(--ai-hero-grid-line) 48px - ); - opacity: 0.18; - -webkit-mask-image: - radial-gradient(ellipse 70% 78% at 50% 46%, #000 0%, transparent 74%), - linear-gradient(to bottom, #000 0%, #000 48%, transparent 92%); - mask-image: - radial-gradient(ellipse 70% 78% at 50% 46%, #000 0%, transparent 74%), - linear-gradient(to bottom, #000 0%, #000 48%, transparent 92%); - -webkit-mask-composite: source-in; - mask-composite: intersect; -} - +/* Hero no longer owns the atmosphere — page shell does */ +.ai-welcome__hero::before, .ai-welcome__hero::after { - content: ''; - position: absolute; - top: -24px; - left: 50%; - z-index: 0; - width: min(980px, 110vw); - height: clamp(260px, 42vh, 420px); - transform: translateX(-50%); - pointer-events: none; - background: - radial-gradient(ellipse 46% 58% at 42% 48%, rgba(var(--ai-sky-rgb), 0.07), transparent 72%), - radial-gradient(ellipse 38% 48% at 62% 56%, rgba(var(--ai-gold-rgb), 0.045), transparent 74%); - opacity: 0.75; + content: none; + display: none; } .ai-welcome__stack { @@ -1884,7 +1884,11 @@ body.command-home .ai-stage-map--eu { gap: 16px 24px; margin-top: 22px; padding-top: 18px; - border-top: 1px solid color-mix(in srgb, var(--ai-border) 70%, transparent); + border-top: none; + background-image: var(--ai-hairline); + background-repeat: no-repeat; + background-position: top center; + background-size: 100% 1px; } .ai-welcome__command { @@ -1897,27 +1901,46 @@ body.command-home .ai-stage-map--eu { gap: 10px 14px; margin-top: 4px; padding-top: 18px; - border-top: 1px solid color-mix(in srgb, var(--ai-border) 50%, transparent); + border-top: none; + background-image: var(--ai-hairline); + background-repeat: no-repeat; + background-position: top center; + background-size: 100% 1px; } -/* 首页意图卡片 — 极简磨砂玻璃 */ +/* 首页意图卡片 — 半透明玻璃,折射全页明暗(无额外色块) */ .ai-welcome__command .ai-intent-door { overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.72); + border: 1px solid var(--ai-glass-border); border-radius: 20px; padding: 14px 14px; - background: var(--ai-acrylic-bg); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); - box-shadow: none; + background: var(--ai-glass-fill); + backdrop-filter: var(--ai-glass-blur); + -webkit-backdrop-filter: var(--ai-glass-blur); + box-shadow: var(--ai-glass-shadow); transition: - border-color 0.2s var(--ai-ease), - background 0.2s var(--ai-ease); + border-color 0.22s var(--ai-ease), + background 0.22s var(--ai-ease), + box-shadow 0.22s var(--ai-ease), + transform 0.22s var(--ai-ease); +} + +.ai-welcome__command .ai-intent-door::before { + display: block; + opacity: 0.8; + mix-blend-mode: soft-light; } -.ai-welcome__command .ai-intent-door::before, .ai-welcome__command .ai-intent-door::after { - display: none; + display: block; + opacity: 0.55; + filter: blur(14px); + background: radial-gradient( + circle at 36% 36%, + rgba(255, 255, 255, 0.78), + rgba(255, 255, 255, 0.12) 46%, + transparent 72% + ); } .ai-welcome__command .ai-intent-door__icon { @@ -1934,15 +1957,13 @@ body.command-home .ai-stage-map--eu { .ai-welcome__command .ai-intent-door.is-primary { position: relative; padding: 18px 16px 18px 18px; - background: - linear-gradient( - 145deg, - color-mix(in srgb, var(--ai-gold) 12%, rgba(255, 255, 255, 0.5)) 0%, - var(--ai-acrylic-bg-primary) 48%, - rgba(255, 255, 255, 0.36) 100% - ); - border-color: color-mix(in srgb, var(--ai-gold) 34%, rgba(255, 255, 255, 0.8)); - box-shadow: 0 8px 24px rgba(var(--ai-gold-rgb), 0.08); + background: var(--ai-glass-fill-strong); + border-color: rgba(255, 255, 255, 0.9); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.98), + inset 0 -1px 0 rgba(255, 255, 255, 0.22), + 0 14px 34px rgba(15, 23, 42, 0.08), + 0 0 0 1px rgba(18, 24, 32, 0.045); } .ai-welcome__command .ai-intent-door.is-primary .ai-intent-door__icon { @@ -1963,21 +1984,33 @@ body.command-home .ai-stage-map--eu { } .ai-welcome__command .ai-intent-door:hover { - border-color: rgba(255, 255, 255, 0.92); - background: rgba(255, 255, 255, 0.44); - box-shadow: none; - transform: none; + border-color: rgba(255, 255, 255, 0.95); + background: + linear-gradient( + 165deg, + rgba(255, 255, 255, 0.58) 0%, + rgba(255, 255, 255, 0.28) 50%, + rgba(255, 255, 255, 0.4) 100% + ); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.98), + 0 14px 32px rgba(15, 23, 42, 0.07), + 0 0 0 1px rgba(18, 24, 32, 0.04); + transform: translateY(-1px); } .ai-welcome__command .ai-intent-door.is-primary:hover { background: linear-gradient( 145deg, - color-mix(in srgb, var(--ai-gold) 16%, rgba(255, 255, 255, 0.55)) 0%, - rgba(255, 255, 255, 0.5) 100% + rgba(255, 255, 255, 0.66) 0%, + rgba(255, 255, 255, 0.36) 100% ); - border-color: color-mix(in srgb, var(--ai-gold) 42%, rgba(255, 255, 255, 0.9)); - box-shadow: 0 10px 28px rgba(var(--ai-gold-rgb), 0.12); + border-color: rgba(255, 255, 255, 0.96); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.98), + 0 16px 36px rgba(15, 23, 42, 0.08), + 0 0 0 1px rgba(18, 24, 32, 0.045); } .ai-welcome__command .ai-intent-door__title { @@ -2928,13 +2961,10 @@ body.command-home .ai-stage-map--eu { min-height: 72px; padding: 12px 14px 12px 18px; border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.72); - background: var(--ai-acrylic-bg); - box-shadow: none; } .ai-composer-wrap.is-welcome .ai-composer::before { - display: none; + opacity: 0.75; } .ai-composer-dock { @@ -3024,17 +3054,17 @@ body.command-home .ai-stage-map--eu { border-top: none; } -.ai-composer-wrap.is-welcome .ai-composer { - min-height: 72px; -} - .ai-composer-wrap.is-docked { padding: 10px 0 0; - border-top: 1px solid color-mix(in srgb, var(--ai-border) 45%, transparent); + border-top: none; + background-image: var(--ai-hairline); + background-repeat: no-repeat; + background-position: top center; + background-size: 100% 1px; } .ai-composer-wrap.is-docked .ai-composer { - box-shadow: none; + box-shadow: var(--ai-glass-shadow); } .ai-composer__caustic, @@ -3169,7 +3199,7 @@ body.command-home .ai-stage-map--eu { margin-left: calc(50% - 50vw); padding: 10px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); box-sizing: border-box; - border-top: 1px solid color-mix(in srgb, var(--ai-border) 55%, transparent); + border: none; color: var(--ai-text-3); font-size: 0.72rem; } @@ -3346,27 +3376,6 @@ body.command-home .ai-stage-map--eu { .ai-welcome-plane img { width: min(620px, 96vw); } - - .ai-welcome__hero::before { - width: min(680px, 112vw); - height: clamp(180px, 30vh, 260px); - opacity: 0.3; - background-image: - repeating-linear-gradient( - 0deg, - transparent 0, - transparent 39px, - var(--ai-hero-grid-line) 39px, - var(--ai-hero-grid-line) 40px - ), - repeating-linear-gradient( - 90deg, - transparent 0, - transparent 39px, - var(--ai-hero-grid-line) 39px, - var(--ai-hero-grid-line) 40px - ); - } } @media (max-width: 780px) { @@ -3392,7 +3401,7 @@ body.command-home .ai-stage-map--eu { @media (max-width: 640px) { .ai-advisor-layout { - padding: 6px 14px 0; + padding: calc(var(--ai-header-h) + 6px) 14px 0; } .ai-routes-panel {