@wil-works/evoke-ui 0.1.0 → 0.2.0

package/dist/evoke-ui.css

@@ -267,6 +267,15 @@ html.dark {
 
   --ew-focus-ring: 0 0 0 2px rgba(var(--ew-color-primary-rgb), 0.45);
 }
+
+/* ═══ 磨砂（glass）配方令牌：容器 is-glass 态取值，明暗共用；
+   全局开关 = ConfigProvider glass / useThemeConfig.setGlass（html[data-ew-glass]） ═══ */
+:root {
+  --ew-glass-blur: 16px;
+  --ew-glass-saturate: 1.5;
+  /* 磨砂底色一次配好：color-mix 的百分比不能走 var()，必须整体出令牌 */
+  --ew-glass-bg: color-mix(in srgb, var(--ew-bg-container) 72%, transparent);
+}
 /* 工具类（容器/焦点/滚动条/reveal 浮现） */
 /* ============================================
    Evoke UI — 工具类与通用层
@@ -494,6 +503,11 @@ to { transform: rotate(360deg);
   transform: scale(0.98);
 }
 
+/* ─── 链接形态（href 传入时渲染为 <a>） ─── */
+a.ew-button {
+  text-decoration: none;
+}
+
 /* ─── 尺寸 ─── */
 .ew-button--small {
   height: 32px;
@@ -914,6 +928,17 @@ html.dark .ew-icon-button.is-dark:hover {
   box-shadow: var(--ew-shadow-3);
   border-color: var(--ew-border-color);
 }
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-card.is-glass,
+  html[data-ew-glass='on'] .ew-card:not(.no-glass) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+}
+}
 /* EwSection — 内容区块 */
 .ew-section {
   margin-bottom: 96px;
@@ -969,9 +994,26 @@ html.dark .ew-icon-button.is-dark:hover {
   padding-top: 0;
   border-top: none;
   font-size: clamp(26px, 3vw, 34px);
+  font-weight: var(--ew-display-weight);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
 }
 .ew-section .ew-section__description {
   margin: 0;
+  font-size: var(--ew-font-size-md);
+  line-height: 1.75;
+  color: var(--ew-text-secondary);
+}
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-section.is-glass,
+  html[data-ew-glass='on'] .ew-section:not(.no-glass) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+}
 }
 /* EwNavbar — 站点导航 */
 .ew-navbar {
@@ -1061,6 +1103,37 @@ html.dark .ew-icon-button.is-dark:hover {
   color: var(--ew-color-primary);
 }
 
+/* <a> 形态的自防御：宿主页（浏览器默认样式、文档站 .vp-doc a）会给链接
+   加下划线、链接色和 500 字重，这里的优先级必须压得过 .vp-doc a / .vp-doc a:hover */
+.ew-navbar a.ew-navbar__logo,
+.ew-navbar a.ew-navbar__link,
+.ew-navbar a.ew-navbar__mobile-link {
+  text-decoration: none;
+}
+.ew-navbar a.ew-navbar__logo {
+  color: var(--ew-text-primary);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+}
+.ew-navbar a.ew-navbar__link {
+  color: var(--ew-text-regular);
+  font-weight: var(--ew-font-weight-regular);
+}
+.ew-navbar a.ew-navbar__link:hover {
+  color: var(--ew-text-primary);
+}
+.ew-navbar a.ew-navbar__link.is-active {
+  color: var(--ew-color-primary);
+}
+.ew-navbar a.ew-navbar__mobile-link {
+  color: var(--ew-text-regular);
+  font-weight: var(--ew-font-weight-medium);
+}
+.ew-navbar a.ew-navbar__mobile-link:hover {
+  color: var(--ew-text-primary);
+  background-color: var(--ew-bg-hover);
+}
+
 /* ─── 右侧动作区 ─── */
 .ew-navbar__actions {
   display: flex;
@@ -1114,6 +1187,17 @@ html.dark .ew-icon-button.is-dark:hover {
   opacity: 0;
   transform: translateY(-6px);
 }
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-navbar.is-glass,
+  html[data-ew-glass='on'] .ew-navbar:not(.no-glass) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+}
+}
 /* EwFooter — 站点页脚 */
 .ew-footer {
   padding: 80px 0 40px;
@@ -1206,10 +1290,37 @@ html.dark .ew-icon-button.is-dark:hover {
 .ew-footer .ew-footer__slogan {
   margin: var(--ew-space-3) 0 0;
   font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
 }
 .ew-footer .ew-footer__col-title {
   margin: 0 0 var(--ew-space-2);
   font-size: var(--ew-font-size-xs);
+  font-weight: var(--ew-font-weight-medium);
+  letter-spacing: 0.14em;
+  color: var(--ew-text-secondary);
+}
+
+/* 链接渲染为 <a>：压过宿主链接样式的颜色/下划线/字重 */
+.ew-footer a.ew-footer__link {
+  font-size: var(--ew-font-size-sm);
+  font-weight: var(--ew-font-weight-regular);
+  color: var(--ew-text-secondary);
+  text-decoration: none;
+}
+.ew-footer a.ew-footer__link:hover {
+  color: var(--ew-text-primary);
+}
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-footer.is-glass,
+  html[data-ew-glass='on'] .ew-footer:not(.no-glass) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+}
 }
 /* EwHero — 首屏区块 */
 .ew-hero {
@@ -1309,6 +1420,8 @@ html.dark .ew-icon-button.is-dark:hover {
 .ew-hero .ew-hero__description {
   margin: var(--ew-space-5) 0 0;
   font-size: 17px;
+  line-height: 1.75;
+  color: var(--ew-text-secondary);
 }
 /* EwSelect — 下拉选择 */
 .ew-select {
@@ -1495,8 +1608,34 @@ html.dark .ew-icon-button.is-dark:hover {
   outline-offset: 2px;
   border-radius: var(--ew-radius-sm);
 }
+
+/* ─── 边框激活波纹：聚焦时边框向外扩散两圈涟漪；
+   全局关闭 html[data-ew-ripple='off']；prefers-reduced-motion 自动停用 ─── */
+.ew-select::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, var(--ew-color-primary) 45%, transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+html:not([data-ew-ripple='off']) .ew-select:focus-within, .ew-select.is-open::after {
+    animation: ew-border-ripple 0.7s ease-out 2;
+}
+}
+@keyframes ew-border-ripple {
+0% { opacity: 0.9; transform: scale(1);
+}
+70% { opacity: 0.25;
+}
+100% { opacity: 0; transform: scale(1.04);
+}
+}
 /* EwSearchBox — 大搜索框（remixicon 签名组件） */
 .ew-search-box {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--ew-space-4);
@@ -1575,6 +1714,87 @@ html.dark .ew-icon-button.is-dark:hover {
   padding-left: var(--ew-space-4);
   border-left: 1px solid var(--ew-border-color-light);
 }
+
+/* ─── 边框激活波纹：聚焦时边框向外扩散两圈涟漪；
+   全局关闭 html[data-ew-ripple='off']；prefers-reduced-motion 自动停用 ─── */
+/* 定位锚点：波纹环定位参考 */
+.ew-search-box {
+  position: relative;
+}
+.ew-search-box::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, var(--ew-color-primary) 45%, transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+html:not([data-ew-ripple='off']) .ew-search-box:focus-within::after {
+    animation: ew-border-ripple 0.7s ease-out 2;
+}
+}
+@keyframes ew-border-ripple {
+0% { opacity: 0.9; transform: scale(1);
+}
+70% { opacity: 0.25;
+}
+100% { opacity: 0; transform: scale(1.04);
+}
+}
+
+/* ─── 远程搜索结果下拉（select 菜单同款语言） ─── */
+.ew-search-box__dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: var(--ew-z-index-overlay, 2000);
+  margin: 0;
+  padding: 5px;
+  list-style: none;
+  border: 1px solid var(--ew-border-color-light);
+  border-radius: var(--ew-radius-md);
+  background-color: var(--ew-bg-container);
+  box-shadow: var(--ew-shadow-2);
+  max-height: 320px;
+  overflow-y: auto;
+}
+.ew-search-box__option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  border-radius: var(--ew-radius-sm);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.ew-search-box__option-title {
+  font-size: var(--ew-font-size-sm);
+  font-weight: var(--ew-font-weight-medium);
+  color: var(--ew-text-primary);
+}
+.ew-search-box__option-desc {
+  font-size: var(--ew-font-size-xs);
+  color: var(--ew-text-secondary);
+}
+.ew-search-box__option.is-active {
+  background-color: var(--ew-color-primary-light-9);
+}
+.ew-search-box__option.is-active .ew-search-box__option-title {
+  color: var(--ew-color-primary);
+}
+.ew-search-box__option.is-state {
+  padding: 12px;
+  text-align: center;
+  font-size: var(--ew-font-size-sm);
+  color: var(--ew-text-secondary);
+  cursor: default;
+}
 /* EwIconGrid — 可搜索图标网格（remixicon 核心界面语言） */
 .ew-icon-grid__search {
   margin-bottom: 56px;
@@ -1699,6 +1919,10 @@ html.dark .ew-icon-button.is-dark:hover {
 .ew-icon-grid .ew-icon-grid__title {
   margin: 0 0 var(--ew-space-5);
   font-size: var(--ew-font-size-md);
+  font-weight: var(--ew-font-weight-regular);
+  letter-spacing: 0;
+  line-height: 1.7;
+  color: var(--ew-text-primary);
 }
 /* EwFeatureGrid — 特性展示 */
 
@@ -1945,16 +2169,37 @@ html.dark .ew-icon-button.is-dark:hover {
 .ew-pricing-card .ew-pricing-card__title {
   margin: 0;
   font-size: var(--ew-font-size-xl);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
 }
 .ew-pricing-card .ew-pricing-card__description {
   margin: var(--ew-space-2) 0 0;
   font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
 }
 .ew-pricing-card .ew-pricing-card__features {
   margin: var(--ew-space-5) 0;
   padding: 0;
   list-style: none;
 }
+.ew-pricing-card .ew-pricing-card__feature {
+  margin: 0;
+  padding: 0;
+}
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-pricing-card.is-glass:not(.is-featured),
+  html[data-ew-glass='on'] .ew-pricing-card:not(.no-glass):not(.is-featured) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+}
+}
 /* EwFaq — 常见问题手风琴 */
 .ew-faq {
   display: flex;
@@ -2384,6 +2629,15 @@ html.dark .ew-alert.is-pill .ew-alert__icon {
   border: none;
   font-size: var(--ew-font-size-base);
 }
+
+/* <a> 形态来源链接：压过宿主链接样式（.vp-doc a 的下划线与链接色） */
+.ew-quote a.ew-quote__source {
+  color: var(--ew-color-primary);
+  text-decoration: none;
+}
+.ew-quote a.ew-quote__source:hover {
+  color: var(--ew-color-primary-dark-2);
+}
 /* EwConfigProvider — 局部换肤包裹 */
 .ew-config-provider {
   display: block;
@@ -2703,10 +2957,16 @@ html.dark .ew-alert.is-pill .ew-alert__icon {
 .ew-timeline .ew-timeline__title {
   margin: 0;
   font-size: var(--ew-font-size-md);
+  font-weight: var(--ew-font-weight-medium);
+  letter-spacing: 0;
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
 }
 .ew-timeline .ew-timeline__description {
   margin: var(--ew-space-1) 0 0;
   font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
 }
 /* EwComparisonTable — 功能对比表 */
 .ew-comparison-table {
@@ -2936,6 +3196,9 @@ html.dark .ew-alert.is-pill .ew-alert__icon {
 .ew-logo-cloud .ew-logo-cloud__title {
   margin: 0 0 var(--ew-space-6);
   font-size: var(--ew-font-size-sm);
+  letter-spacing: 0.08em;
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
 }
 /* EwVideo — 视频区块 */
 .ew-video {
@@ -3179,6 +3442,66 @@ html.dark .ew-audio__badge {
   width: 18px;
   background-color: var(--ew-color-primary);
 }
+
+/* ─── image / banner 形态 ─── */
+/* 内部链路高度全部填满视口（aspect-ratio 决定可见高度），
+   保证 caption 的 bottom:0 锚定在可见区域内而不被裁掉 */
+.ew-carousel.is-media .ew-carousel__track,
+.ew-carousel.is-media .ew-carousel__slide,
+.ew-carousel.is-media .ew-carousel__banner,
+.ew-carousel.is-media .ew-carousel__img {
+  height: 100%;
+}
+.ew-carousel__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ew-carousel__banner {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.ew-carousel__caption {
+  position: absolute;
+  inset: auto 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 64px 24px 18px;
+  background: linear-gradient(180deg, rgba(10, 14, 24, 0) 0%, rgba(10, 14, 24, 0.78) 78%, rgba(10, 14, 24, 0.85) 100%);
+  text-align: left;
+}
+.ew-carousel__caption-title {
+  margin: 0;
+  font-size: var(--ew-font-size-xl);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  color: #ffffff;
+}
+.ew-carousel__caption-desc {
+  margin: 0;
+  font-size: var(--ew-font-size-sm);
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+/* ─── 宿主环境屏蔽：文档站 .vp-doc h3/p 的字号/颜色/边距侵入注释区 ─── */
+.ew-carousel .ew-carousel__caption-title {
+  margin: 0;
+  font-size: var(--ew-font-size-xl);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: #ffffff;
+}
+.ew-carousel .ew-carousel__caption-desc {
+  margin: 0;
+  font-size: var(--ew-font-size-sm);
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.88);
+}
 /* EwArticleCard — 文章卡 */
 .ew-article-card {
   display: flex;
@@ -3271,10 +3594,34 @@ html.dark .ew-audio__badge {
 .ew-article-card .ew-article-card__title {
   margin: 0;
   font-size: var(--ew-font-size-md);
+  font-weight: var(--ew-font-weight-medium);
+  letter-spacing: 0;
+  line-height: 1.4;
+  color: var(--ew-text-primary);
 }
 .ew-article-card .ew-article-card__excerpt {
   margin: 0;
   font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
+}
+
+/* 根元素渲染为 <a>（href 传入）时，压过宿主链接样式的字重/颜色/下划线 */
+a.ew-article-card {
+  font-weight: var(--ew-font-weight-regular);
+  color: inherit;
+  text-decoration: none;
+}
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-article-card.is-glass,
+  html[data-ew-glass='on'] .ew-article-card:not(.no-glass) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+}
 }
 /* EwProfileCard — 个人名片 */
 .ew-profile-card {
@@ -3331,55 +3678,504 @@ html.dark .ew-audio__badge {
 .ew-profile-card .ew-profile-card__name {
   margin: 0;
   font-size: var(--ew-font-size-lg);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
 }
 .ew-profile-card .ew-profile-card__role {
   margin: 4px 0 0;
   font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
 }
 .ew-profile-card .ew-profile-card__bio {
   margin: var(--ew-space-3) 0 0;
   font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-regular);
 }
-/* EwMarquee — 无限滚动横幅 */
-.ew-marquee {
-  position: relative;
-  overflow: hidden;
-  /* 两端淡出 */
-  --ew-marquee-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-  -webkit-mask-image: var(--ew-marquee-mask);
-  mask-image: var(--ew-marquee-mask);
-}
-.ew-marquee__track {
-  display: flex;
-  width: max-content;
-  animation: ew-marquee-scroll var(--ew-marquee-duration) linear infinite;
-}
-.ew-marquee.is-reverse .ew-marquee__track {
-  animation-direction: reverse;
+
+/* ─── 磨砂（glass）：ConfigProvider 全局开关（html[data-ew-glass]）或组件 glass prop；
+   backdrop-filter 不可用时整条不生效，自动回落实底 ─── */
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.ew-profile-card.is-glass:not(.is-plain),
+  html[data-ew-glass='on'] .ew-profile-card:not(.no-glass):not(.is-plain) {
+    background-color: var(--ew-glass-bg);
+    -webkit-backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
+    backdrop-filter: blur(var(--ew-glass-blur)) saturate(var(--ew-glass-saturate));
 }
-.ew-marquee.is-pausable:hover .ew-marquee__track {
-  animation-play-state: paused;
 }
-.ew-marquee__group {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  gap: var(--ew-space-6);
-  padding-right: var(--ew-space-6);
+/* EwArticle — 文章内容（长文阅读排版） */
+.ew-article {
+  max-width: 760px;
+  margin: 0 auto;
 }
 
-/* ══════ 文本模式：商场 LED 大字横幅 ══════ */
-.ew-marquee__text {
-  font-size: var(--ew-marquee-text-size, clamp(32px, 5vw, 56px));
-  font-weight: var(--ew-display-weight-strong);
-  letter-spacing: -0.02em;
+/* ─── 页头 ─── */
+.ew-article__eyebrow {
+  margin-bottom: var(--ew-space-3);
+  font-size: var(--ew-font-size-xs);
+  font-weight: var(--ew-font-weight-medium);
+  letter-spacing: 0.16em;
   text-transform: uppercase;
-  white-space: nowrap;
-  color: var(--ew-text-primary);
-  line-height: 1.15;
+  color: var(--ew-text-secondary);
 }
-
-/* 描边字（奇数项）：空心 + 描边，商场横幅的节奏感来源 */
+.ew-article__title {
+  margin: 0 0 var(--ew-space-3);
+  font-size: clamp(28px, 3.4vw, 38px);
+  font-weight: var(--ew-display-weight);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
+}
+.ew-article__description {
+  margin: 0 0 var(--ew-space-5);
+  font-size: var(--ew-font-size-lg);
+  line-height: 1.7;
+  color: var(--ew-text-secondary);
+}
+.ew-article__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--ew-space-3);
+  padding-bottom: var(--ew-space-5);
+  margin-bottom: var(--ew-space-6);
+  border-bottom: 1px solid var(--ew-border-color-light);
+  font-size: var(--ew-font-size-sm);
+  color: var(--ew-text-secondary);
+}
+.ew-article__author {
+  font-weight: var(--ew-font-weight-medium);
+  color: var(--ew-text-primary);
+}
+.ew-article__tag {
+  padding: 2px 10px;
+  border-radius: var(--ew-radius-full);
+  background-color: var(--ew-color-primary-light-9);
+  color: var(--ew-color-primary);
+  font-size: var(--ew-font-size-xs);
+}
+
+/* ─── 正文阅读排版（作用域收敛，不外溢） ─── */
+.ew-article__body {
+  font-size: var(--ew-font-size-md);
+  line-height: 1.85;
+  color: var(--ew-text-regular);
+}
+.ew-article__body h2,
+.ew-article__body h3 {
+  margin: 2em 0 0.6em;
+  font-weight: var(--ew-display-weight);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
+}
+.ew-article__body h2 {
+  font-size: var(--ew-font-size-2xl, 24px);
+}
+.ew-article__body h3 {
+  font-size: var(--ew-font-size-xl);
+}
+.ew-article__body p {
+  margin: 0 0 1.1em;
+}
+.ew-article__body a {
+  color: var(--ew-color-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.ew-article__body blockquote {
+  margin: 1.4em 0;
+  padding: 10px 18px;
+  border-left: 3px solid var(--ew-color-primary-light-5);
+  border-radius: 0 var(--ew-radius-md) var(--ew-radius-md) 0;
+  background-color: var(--ew-color-primary-light-9);
+  color: var(--ew-text-secondary);
+}
+.ew-article__body blockquote p {
+  margin: 0.2em 0;
+}
+.ew-article__body ul,
+.ew-article__body ol {
+  margin: 0 0 1.1em;
+  padding-left: 1.4em;
+}
+.ew-article__body li {
+  margin: 0.3em 0;
+}
+.ew-article__body code {
+  padding: 2px 6px;
+  border-radius: var(--ew-radius-sm);
+  background-color: var(--ew-color-primary-light-9);
+  color: var(--ew-color-primary-dark-2);
+  font-family: var(--ew-font-family-mono, monospace);
+  font-size: 0.9em;
+}
+.ew-article__body img {
+  max-width: 100%;
+  border-radius: var(--ew-radius-md);
+}
+.ew-article__body hr {
+  margin: 2em 0;
+  border: none;
+  border-top: 1px solid var(--ew-border-color-light);
+}
+.ew-article__body strong {
+  color: var(--ew-text-primary);
+}
+
+/* ─── 页脚 ─── */
+.ew-article__footer {
+  margin-top: var(--ew-space-6);
+  padding-top: var(--ew-space-5);
+  border-top: 1px solid var(--ew-border-color-light);
+}
+/* EwExecCard — 高管/团队介绍卡 */
+.ew-exec-card {
+  --ew-exec-portrait-h: 190px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--ew-border-color-light);
+  border-radius: var(--ew-radius-lg);
+  background-color: var(--ew-bg-container);
+  text-align: center;
+  transition: transform var(--ew-duration-base) var(--ew-ease-smooth),
+    box-shadow var(--ew-duration-base) var(--ew-ease-in-out),
+    border-color var(--ew-duration-base) var(--ew-ease-in-out);
+}
+.ew-exec-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--ew-border-color);
+  box-shadow: var(--ew-shadow-2);
+}
+
+/* ─── 人物舞台：渐变底 + 透明 PNG 锚定底边 ─── */
+.ew-exec-card__stage {
+  position: relative;
+  height: var(--ew-exec-portrait-h);
+  background-image: var(--ew-gradient-hero);
+  overflow: hidden;
+}
+.ew-exec-card__portrait {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  max-width: 78%;
+  height: 96%;
+  object-fit: contain;
+  object-position: bottom;
+  color: var(--ew-color-primary-light-5);
+  transition: transform var(--ew-duration-slow) var(--ew-ease-smooth);
+}
+.ew-exec-card:hover .ew-exec-card__portrait {
+  transform: translateX(-50%) translateY(-4px);
+}
+
+/* ─── 介绍文本：展示体标题 + 小标签职务 + 次级简介 ─── */
+.ew-exec-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ew-space-2);
+  padding: var(--ew-space-5) var(--ew-space-5) var(--ew-space-6);
+}
+.ew-exec-card__name {
+  margin: 0;
+  font-size: var(--ew-font-size-lg);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
+}
+.ew-exec-card__role {
+  margin: 0;
+  font-size: var(--ew-font-size-xs);
+  font-weight: var(--ew-font-weight-medium);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ew-text-secondary);
+}
+.ew-exec-card__description {
+  margin: var(--ew-space-1) 0 0;
+  font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-regular);
+}
+.ew-exec-card__actions {
+  display: flex;
+  gap: var(--ew-space-2);
+  margin-top: var(--ew-space-2);
+}
+
+/* ─── 宿主环境屏蔽 ───
+   文档站等宿主的元素级排版（.vp-doc h3/p）会以更高优先级侵入，这里双类重申 */
+.ew-exec-card .ew-exec-card__name {
+  margin: 0;
+  font-size: var(--ew-font-size-lg);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  line-height: var(--ew-display-line-height);
+  color: var(--ew-text-primary);
+}
+.ew-exec-card .ew-exec-card__role {
+  margin: 0;
+  font-size: var(--ew-font-size-xs);
+  font-weight: var(--ew-font-weight-medium);
+  letter-spacing: 0.14em;
+  color: var(--ew-text-secondary);
+}
+.ew-exec-card .ew-exec-card__description {
+  margin: var(--ew-space-1) 0 0;
+  font-size: var(--ew-font-size-sm);
+  line-height: 1.7;
+  color: var(--ew-text-regular);
+}
+/* EwImagePreview — 图片预览灯箱 */
+.ew-image-preview {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ew-z-index-overlay, 2000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 14, 24, 0.82);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.ew-image-preview__stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin: 0 72px;
+  max-width: min(1080px, calc(100vw - 144px));
+}
+.ew-image-preview__img {
+  max-width: 100%;
+  max-height: calc(100vh - 140px);
+  border-radius: var(--ew-radius-md);
+  box-shadow: var(--ew-shadow-4);
+  object-fit: contain;
+}
+.ew-image-preview__caption {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  font-size: var(--ew-font-size-sm);
+  color: rgba(255, 255, 255, 0.85);
+}
+.ew-image-preview__close,
+.ew-image-preview__arrow {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: var(--ew-radius-full);
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  transition: background-color var(--ew-duration-base) var(--ew-ease-in-out);
+}
+.ew-image-preview__close:hover,
+.ew-image-preview__arrow:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+.ew-image-preview__close {
+  top: 20px;
+  right: 24px;
+}
+.ew-image-preview__arrow.is-prev {
+  left: 24px;
+}
+.ew-image-preview__arrow.is-next {
+  right: 24px;
+}
+
+/* ─── 进出场 ─── */
+.ew-image-preview-enter-active,
+.ew-image-preview-leave-active {
+  transition: opacity var(--ew-duration-base) var(--ew-ease-in-out);
+}
+.ew-image-preview-enter-active .ew-image-preview__img,
+.ew-image-preview-leave-active .ew-image-preview__img {
+  transition: transform var(--ew-duration-base) var(--ew-ease-smooth);
+}
+.ew-image-preview-enter-from,
+.ew-image-preview-leave-to {
+  opacity: 0;
+}
+.ew-image-preview-enter-from .ew-image-preview__img {
+  transform: scale(0.94);
+}
+/* EwImageWall — 图片墙 */
+.ew-image-wall {
+  display: grid;
+}
+.ew-image-wall__item {
+  padding: 0;
+  border: none;
+  border-radius: var(--ew-image-wall-radius, 12px);
+  background: var(--ew-fill-1);
+  overflow: hidden;
+  cursor: zoom-in;
+}
+.ew-image-wall__item img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  transition: transform var(--ew-duration-slow) var(--ew-ease-smooth);
+}
+.ew-image-wall__item:hover img,
+.ew-image-wall__item:focus-visible img {
+  transform: scale(1.04);
+}
+.ew-image-wall__item:focus-visible {
+  outline: 2px solid var(--ew-color-primary);
+  outline-offset: 2px;
+}
+/* EwModal — 弹出层 */
+.ew-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ew-z-index-overlay, 2000);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 10vh 16px 24px;
+  background: rgba(10, 14, 24, 0.5);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  overflow-y: auto;
+}
+.ew-modal__panel {
+  position: relative;
+  width: 560px;
+  max-width: 100%;
+  border: 1px solid var(--ew-border-color-light);
+  border-radius: var(--ew-radius-lg);
+  background-color: var(--ew-bg-container);
+  box-shadow: var(--ew-shadow-4);
+  outline: none;
+}
+.ew-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ew-space-4);
+  padding: var(--ew-space-5) var(--ew-space-6) 0;
+}
+.ew-modal__title {
+  margin: 0;
+  font-size: var(--ew-font-size-xl);
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: var(--ew-display-letter-spacing);
+  color: var(--ew-text-primary);
+}
+.ew-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-left: auto;
+  border: none;
+  border-radius: var(--ew-radius-full);
+  background: transparent;
+  color: var(--ew-text-secondary);
+  cursor: pointer;
+  transition: background-color var(--ew-duration-base) var(--ew-ease-in-out),
+    color var(--ew-duration-base) var(--ew-ease-in-out);
+}
+.ew-modal__close:hover {
+  background-color: var(--ew-fill-1);
+  color: var(--ew-text-primary);
+}
+.ew-modal__body {
+  padding: var(--ew-space-4) var(--ew-space-6) var(--ew-space-6);
+  font-size: var(--ew-font-size-md);
+  line-height: 1.7;
+  color: var(--ew-text-regular);
+}
+.ew-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ew-space-3);
+  padding: 0 var(--ew-space-6) var(--ew-space-6);
+}
+
+/* ─── 进出场：遮罩淡入 + 面板上浮 ─── */
+.ew-modal-enter-active,
+.ew-modal-leave-active {
+  transition: opacity var(--ew-duration-base) var(--ew-ease-in-out);
+}
+.ew-modal-enter-active .ew-modal__panel,
+.ew-modal-leave-active .ew-modal__panel {
+  transition: transform var(--ew-duration-base) var(--ew-ease-smooth),
+    opacity var(--ew-duration-base) var(--ew-ease-in-out);
+}
+.ew-modal-enter-from,
+.ew-modal-leave-to {
+  opacity: 0;
+}
+.ew-modal-enter-from .ew-modal__panel {
+  transform: translateY(14px) scale(0.98);
+  opacity: 0;
+}
+.ew-modal-leave-to .ew-modal__panel {
+  transform: translateY(8px);
+  opacity: 0;
+}
+/* EwMarquee — 无限滚动横幅 */
+.ew-marquee {
+  position: relative;
+  overflow: hidden;
+  /* 两端淡出 */
+  --ew-marquee-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  -webkit-mask-image: var(--ew-marquee-mask);
+  mask-image: var(--ew-marquee-mask);
+}
+.ew-marquee__track {
+  display: flex;
+  width: max-content;
+  animation: ew-marquee-scroll var(--ew-marquee-duration) linear infinite;
+}
+.ew-marquee.is-reverse .ew-marquee__track {
+  animation-direction: reverse;
+}
+.ew-marquee.is-pausable:hover .ew-marquee__track {
+  animation-play-state: paused;
+}
+.ew-marquee__group {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--ew-space-6);
+  padding-right: var(--ew-space-6);
+}
+
+/* ══════ 文本模式：商场 LED 大字横幅 ══════ */
+.ew-marquee__text {
+  font-size: var(--ew-marquee-text-size, clamp(32px, 5vw, 56px));
+  font-weight: var(--ew-display-weight-strong);
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--ew-text-primary);
+  line-height: 1.15;
+}
+
+/* 描边字（奇数项）：空心 + 描边，商场横幅的节奏感来源 */
 .ew-marquee__text.is-outline {
   color: transparent;
   -webkit-text-stroke: 1.5px var(--ew-marquee-stroke, var(--ew-text-secondary));
@@ -3399,6 +4195,52 @@ to { transform: translateX(-50%);
     animation: none;
 }
 }
+/* EwBorderBeam — 边框流光 */
+
+/* 角度可插值注册：不支持的浏览器退化为静态渐变细环（不影响内容） */
+@property --ew-beam-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+.ew-border-beam {
+  position: relative;
+  isolation: isolate;
+}
+
+/* 光带环：conic 渐变沿角度旋转，mask 只保留边框宽度一圈 */
+.ew-border-beam::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  padding: var(--ew-beam-width);
+  background: conic-gradient(
+    from var(--ew-beam-angle),
+    var(--ew-beam-from) 0deg,
+    var(--ew-beam-from) 250deg,
+    var(--ew-beam-to) 310deg,
+    var(--ew-beam-from) 360deg
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  animation: ew-beam-spin var(--ew-beam-duration) var(--ew-beam-direction) linear infinite;
+  animation-delay: var(--ew-beam-delay);
+  pointer-events: none;
+}
+@keyframes ew-beam-spin {
+to {
+    --ew-beam-angle: 360deg;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.ew-border-beam::before {
+    animation: none;
+}
+}
 /* EwInput — 文本输入 */
 .ew-input {
   display: inline-flex;
@@ -3487,6 +4329,35 @@ to { transform: translateX(-50%);
   background-color: var(--ew-fill-3);
   color: var(--ew-text-primary);
 }
+
+/* ─── 边框激活波纹：聚焦时边框向外扩散两圈涟漪；
+   全局关闭 html[data-ew-ripple='off']；prefers-reduced-motion 自动停用 ─── */
+/* 定位锚点：波纹环与清空按钮的定位参考 */
+.ew-input {
+  position: relative;
+}
+.ew-input::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, var(--ew-color-primary) 45%, transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+html:not([data-ew-ripple='off']) .ew-input:focus-within::after {
+    animation: ew-border-ripple 0.7s ease-out 2;
+}
+}
+@keyframes ew-border-ripple {
+0% { opacity: 0.9; transform: scale(1);
+}
+70% { opacity: 0.25;
+}
+100% { opacity: 0; transform: scale(1.04);
+}
+}
 /* EwTextarea — 多行文本 */
 .ew-textarea {
   position: relative;
@@ -3536,6 +4407,31 @@ to { transform: translateX(-50%);
   padding-left: 4px;
   pointer-events: none;
 }
+
+/* ─── 边框激活波纹：聚焦时边框向外扩散两圈涟漪；
+   全局关闭 html[data-ew-ripple='off']；prefers-reduced-motion 自动停用 ─── */
+.ew-textarea::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, var(--ew-color-primary) 45%, transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+html:not([data-ew-ripple='off']) .ew-textarea:focus-within::after {
+    animation: ew-border-ripple 0.7s ease-out 2;
+}
+}
+@keyframes ew-border-ripple {
+0% { opacity: 0.9; transform: scale(1);
+}
+70% { opacity: 0.25;
+}
+100% { opacity: 0; transform: scale(1.04);
+}
+}
 /* EwField — 表单字段包装 */
 .ew-field {
   display: flex;