/* CanvaFlow 主题覆盖层 —— 由 theme.cjs 生成，勿手改 * 源: nesh-staging.webflow.shared.bea9f6170.min.css * 只输出颜色类声明，布局属性一律不输出。 * 分两部分： * 1) 强调色「黄→红」—— 无主题前缀，深浅两个主题都把原站荧光黄换成品牌红。 * 2) 深色主题其余配色（底色/表面/文字/边框）—— 限定 html[data-theme="dark"]，浅色零覆盖。 */ /* ===== 1) 强调色兜底层（黄色已由 recolor.cjs 在源头改红，此层通常为空）===== */ /* ===== 2) 深色主题其余配色 ===== */ html[data-theme="dark"] mark{color:rgba(255,255,255,.9)} html[data-theme="dark"] body{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-button{color:rgba(255,255,255,.9);background-color:#3b82f6} html[data-theme="dark"] .w-webflow-badge{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.4);color:rgba(255,255,255,.6)!important;background-color:rgba(255,255,255,.06)!important} html[data-theme="dark"] blockquote{border-left:5px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-form-done{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-form-fail{background-color:rgba(255,0,68,.15)} html[data-theme="dark"] .w-input,html[data-theme="dark"] .w-select{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-input::placeholder,html[data-theme="dark"] .w-select::placeholder{color:rgba(255,255,255,.6)} html[data-theme="dark"] .w-input:focus,html[data-theme="dark"] .w-select:focus{border-color:#FF0044} html[data-theme="dark"] .w-input[disabled]:not(.w-input-disabled),html[data-theme="dark"] .w-select[disabled]:not(.w-input-disabled),html[data-theme="dark"] .w-input[readonly],html[data-theme="dark"] .w-select[readonly],html[data-theme="dark"] fieldset[disabled]:not(.w-input-disabled) .w-input,html[data-theme="dark"] fieldset[disabled]:not(.w-input-disabled) .w-select{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-select{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-file-upload-default,html[data-theme="dark"] .w-file-upload-uploading,html[data-theme="dark"] .w-file-upload-success{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-file-upload-uploading-btn{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-file-upload-file{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-file-upload-error-msg{color:#ef4444} html[data-theme="dark"] .w-file-upload-label{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-widget-twitter-count-shim{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-widget-twitter-count-shim .w-widget-twitter-count-inner{color:rgba(255,255,255,.6)} html[data-theme="dark"] .w-widget-twitter-count-shim:not(.w--vertical):before{border-color:#75869600 rgba(255,255,255,.08) #75869600 #75869600} html[data-theme="dark"] .w-widget-twitter-count-shim:not(.w--vertical):after{border-color:#fff0 rgba(255,255,255,.12) #fff0 #fff0} html[data-theme="dark"] .w-widget-twitter-count-shim.w--vertical:before{border-color:rgba(255,255,255,.08) #75869600 #75869600} html[data-theme="dark"] .w-widget-twitter-count-shim.w--vertical:after{border-color:rgba(255,255,255,.12) #fff0 #fff0} html[data-theme="dark"] .w-background-video{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-slider{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-slider-nav.w-shadow>div{box-shadow:0 0 3px rgba(0,0,0,.4)} html[data-theme="dark"] .w-slider-nav-invert{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-slider-nav-invert>div{background-color:rgba(255,255,255,.12)} html[data-theme="dark"] .w-slider-nav-invert>div.w-active{background-color:#16181c} html[data-theme="dark"] .w-slider-dot{background-color:rgba(255,255,255,.08)} html[data-theme="dark"] .w-slider-dot.w-active{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-slider-dot:focus{box-shadow:0 0 0 2px rgba(255,255,255,.08)} html[data-theme="dark"] .w-slider-arrow-left,html[data-theme="dark"] .w-slider-arrow-right{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-dropdown-btn,html[data-theme="dark"] .w-dropdown-toggle,html[data-theme="dark"] .w-dropdown-link{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-dropdown-list{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-dropdown-link{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-dropdown-link.w--current{color:#3b82f6} html[data-theme="dark"] .w-lightbox-backdrop{color:rgba(255,255,255,.9);background-color:rgba(0,0,0,.75)} html[data-theme="dark"] .w-lightbox-thumbnail{background-color:#16181c} html[data-theme="dark"] .w-lightbox-spinner{border:5px solid rgba(255,255,255,.08)} html[data-theme="dark"] .w-lightbox-spinner:after{border-bottom-color:rgba(255,255,255,.12)} html[data-theme="dark"] .w-nav{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-nav-brand{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-nav-link{color:rgba(255,255,255,.9)} html[data-theme="dark"] .w-nav-link.w--current{color:#3b82f6} html[data-theme="dark"] [data-nav-menu-open]{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-nav-button.w--open{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-tab-link{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-tab-link.w--current{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .w-dyn-empty{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] body{color:rgba(255,255,255,.9);background-color:#0a0a0a} html[data-theme="dark"] h1{color:rgba(255,255,255,.9)} html[data-theme="dark"] .hero-card-1{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .hero-card-2{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.07)} html[data-theme="dark"] .hero-card-3{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.07);border:1px rgba(255,255,255,.08)} html[data-theme="dark"] .hero-navigation-sep{background-color:#16181c} html[data-theme="dark"] .social-link{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .social-path-white{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .nav-stats-sep{background-color:rgba(0,0,0,.4)} html[data-theme="dark"] .nav-comapny-wrap{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .nav-button{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .nav-email-wrap{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .nav-email-item{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.05)} html[data-theme="dark"] .nav-email-item:hover{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .hero-card-2-bg{background-color:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .hero-card-2-shadow{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.08)} html[data-theme="dark"] .nav-webflow-bg{background-color:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .nav-experience-bg{background-color:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .nav-top-bg{background-color:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .nav-stats-bg{background-color:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .nav-menu-bg{background-color:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .nav-item-bg{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .label{border:.14vw solid rgba(255,255,255,.12)} html[data-theme="dark"] .label.is-secondary{border-color:rgba(255,255,255,.12)} html[data-theme="dark"] .about-card{background-color:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .about-card-bottom-text{color:rgba(255,255,255,.5)} html[data-theme="dark"] .about-card-button{background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .about-card-point-line{background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.03) 44%,#2e200600 95%)} html[data-theme="dark"] .about-card-point-circle{border:2px solid rgba(255,255,255,.08)} html[data-theme="dark"] .last-year-active-dot{background-color:#10b981;border:.14vw solid rgba(255,255,255,.08)} html[data-theme="dark"] .work_section{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .work-sticky{background-image:linear-gradient(#16181c,#16181c 44%)} html[data-theme="dark"] .work-card-content{background-image:linear-gradient(rgba(0,0,0,.35),rgba(255,255,255,.03) 50%,#0006)} html[data-theme="dark"] .work-label{background-color:#16181c;border:1px solid rgba(255,255,255,.12)} html[data-theme="dark"] .work-card-arrow-wrap{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .capa-card-item{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .service-wrap{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .service-card.is-first{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .cta-span-heading{color:rgba(255,255,255,.6)} html[data-theme="dark"] .cta-chat{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .cta-button{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .swiper-pagination{background-color:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .swiper-card{background-color:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .swiper-heading{color:rgba(255,255,255,.6)} html[data-theme="dark"] .client-text-small{color:rgba(255,255,255,.6)} html[data-theme="dark"] .client-text-link{color:rgba(255,255,255,.6)} html[data-theme="dark"] .faq{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .popup-card{color:rgba(255,255,255,.9);background-image:linear-gradient(201deg,#16181c,#16181c 48%,#16181c 98%);border:1px solid rgba(255,255,255,.12)} html[data-theme="dark"] .popup-close{color:rgba(255,255,255,.6);background-color:#16181c} html[data-theme="dark"] .popup-close:hover{color:rgba(255,255,255,.9)} html[data-theme="dark"] .work_section-bg{color:var(--rgba(255,255,255,.9));background-image:linear-gradient(#16181c,#16181c 44.35%)} html[data-theme="dark"] .cta-chat-typing-wrap{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .swiper-bullet{background-color:#16181c} html[data-theme="dark"] .nav-button-secondary{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .text-color-white{color:rgba(255,255,255,.9)} html[data-theme="dark"] .clipboard-item{color:rgba(255,255,255,.9);background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .nav-button-mobile{color:var(--rgba(255,255,255,.9))} html[data-theme="dark"] .drag-wrap{color:rgba(255,255,255,.9)} html[data-theme="dark"] .drag-circle{color:rgba(255,255,255,.6)} html[data-theme="dark"] .popup-close-path-1{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .popup-close-path-2{background-color:rgba(255,255,255,.06)} @media screen and (max-width:767px){ html[data-theme="dark"] .nav-item-bg{border:1px solid rgba(255,255,255,.08)} html[data-theme="dark"] .about-card-point-line{background-color:#16181c} html[data-theme="dark"] .service-wrap{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .service-card{background-color:rgba(18,18,22,.95)} html[data-theme="dark"] .mobile-menu{background-color:rgba(255,255,255,.06)} html[data-theme="dark"] .capa-overview-wrap{background-color:rgba(0,0,0,.6)} html[data-theme="dark"] .nav-menu-wrap{background-color:rgba(18,18,22,.95)} } /* ================= 变量层 ================= * 上半段是浅色默认值 —— 全部照抄原站，所以浅色主题等于原版。 * script.js 里那些写死的色值也在这里登记（见 patchScript）， * 它读的是这些变量，于是 JS 动画也跟着主题走。 */ :root { /* 强调色全局改红（深浅两个主题都用品牌红，只有底色不同） */ --yellow: #FF0044; --brand: #FF0044; /* 剪贴板按钮点击态 */ --black: black; --white: white; /* 下面这批原本硬编码在 script.js 里，浅色保持原站值 */ --reveal-from: #E0DFC5; /* TextReveal 起始字色 */ --reveal-to: black; /* TextReveal 结束字色 */ --chip-bg: #EBEADA; /* .social-link / .nav-item-bg / .clipboard-item 底 */ --chip-bg-2: #C9C8BA; /* .nav-email-item 底 */ --chip-bg-dark: #393939; /* 深色区块上的 .social-link 底 */ --text-on-light: #000000; /* 导航浮层在浅色区块上的字色 */ } html[data-theme="dark"] { /* --yellow / --brand 已在 :root 全局设为红，这里不重复 */ /* --black / --white 在原站只用作 color:（全在按钮和箭头徽章上），不是底色， * 所以两个都映射成浅色 —— 把 --black 映射成深底会让按钮文字消失 */ --black: #fff; --white: rgba(255,255,255,.9); --reveal-from: rgba(255,255,255,.22); --reveal-to: rgba(255,255,255,.92); --chip-bg: rgba(255,255,255,.06); --chip-bg-2: rgba(255,255,255,.08); --chip-bg-dark: rgba(255,255,255,.06); --text-on-light: rgba(255,255,255,.9); color-scheme: dark; } html[data-theme="dark"] .about-card,html[data-theme="dark"] .hero-card-1,html[data-theme="dark"] .hero-card-2,html[data-theme="dark"] .hero-card-3,html[data-theme="dark"] .hero-card-2-bg,html[data-theme="dark"] .nav-webflow-bg,html[data-theme="dark"] .nav-experience-bg,html[data-theme="dark"] .nav-comapny-wrap,html[data-theme="dark"] .nav-email-wrap,html[data-theme="dark"] .nav-top-bg,html[data-theme="dark"] .nav-menu-bg,html[data-theme="dark"] .swiper-card{ -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } /* ---- 卡片质感（design-system 第一节「节点卡」+ 第八节「节点内嵌高光」）---- * 描边一律用 inset box-shadow 而不是 border：border 会给盒子多出 2px， * 原本没有描边的卡片会被撑大，整页跟着位移。inset 环不占布局空间。 * backdrop-filter 也只加在原本就有的元素上 —— 它会成为绝对定位子元素的 * 包含块，凭空加上去会让卡片内的定位元素跑位。 */ html[data-theme="dark"] .about-card, html[data-theme="dark"] .hero-card-1, html[data-theme="dark"] .hero-card-2, html[data-theme="dark"] .hero-card-3, html[data-theme="dark"] .hero-card-2-bg, html[data-theme="dark"] .nav-webflow-bg, html[data-theme="dark"] .nav-experience-bg, html[data-theme="dark"] .nav-comapny-wrap, html[data-theme="dark"] .nav-email-wrap, html[data-theme="dark"] .nav-top-bg, html[data-theme="dark"] .nav-stats-bg, html[data-theme="dark"] .nav-menu-bg, html[data-theme="dark"] .service-wrap, html[data-theme="dark"] .capa-card-item, html[data-theme="dark"] .cta-chat, html[data-theme="dark"] .cta-chat-typing-wrap, html[data-theme="dark"] .mobile-menu, html[data-theme="dark"] .faq, html[data-theme="dark"] .swiper-card, html[data-theme="dark"] .client-card { background-image: linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.07) 45%,rgba(255,255,255,.04) 100%) !important; background-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.15),0 8px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3) !important; } html[data-theme="dark"] .social-link, html[data-theme="dark"] .nav-email-item, html[data-theme="dark"] .about-card-button, html[data-theme="dark"] .nav-item-bg, html[data-theme="dark"] .clipboard-item { background-image: none !important; background-color: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.30) !important; } /* ---- 主 CTA：品牌渐变 + FAB 阴影（全局，深浅都用红，替代原站黄底按钮）---- */ .hero-button, .cta-button, .hero-cta-button, .nav-button, .nav-button-mobile, .work-card-arrow-wrap, .capa-card-arrow-wrap, .about-card-point-circle { background-image: linear-gradient(135deg,#cc0033,#FF0044) !important; background-color: #FF0044 !important; color: #fff !important; box-shadow: 0 4px 20px rgba(255,0,68,.50) !important; } .hero-button:hover, .cta-button:hover, .hero-cta-button:hover, .nav-button:hover, .nav-button-mobile:hover { box-shadow: 0 6px 28px rgba(255,0,68,.70) !important; } /* ---- 次级按钮：不抢主 CTA，用输入框表面 + 默认描边 ---- */ html[data-theme="dark"] .nav-button-secondary, html[data-theme="dark"] .about-card-button { background-image: none !important; background-color: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.9) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.30) !important; } html[data-theme="dark"] .nav-button-secondary:hover, html[data-theme="dark"] .about-card-button:hover { background-color: rgba(255,255,255,.12) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.30) !important; } /* ---- SVG 里写死的黄已由 recolor.cjs 在源头改红，这里无需处理 ---- * 只剩：黑色图形在深色底下要变白（浅色底下黑图形本就正常） */ html[data-theme="dark"] [fill="black"] { fill: rgba(255,255,255,.9) !important; } /* ---- Logo 不要静态覆盖颜色 ---- * .nav-logo 里装的就是首屏那个巨型 NESH，GSAP Flip 把它缩成导航小药丸。 * 字色/底色由 data-tl 动画负责（深色时的两端色值在 patchScript 里改写）， * 这里再写死 color 会让巨型 logo 一直是白的。 */ /* ---- 底色（仅深色）---- */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #0a0a0a !important; color: rgba(255,255,255,.9) !important; } /* 选中高亮全局红 */ ::selection { background: rgba(255,0,68,.20); color: #fff; } /* ================= 右上角主题切换按钮 ================= */ .cf-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 2147483000; width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; padding: 0; background: rgba(255,255,255,.72); color: #111; box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; } .cf-theme-toggle:hover { transform: scale(1.06); } .cf-theme-toggle svg { width: 19px; height: 19px; display: block; } .cf-theme-toggle .cf-moon { display: none; } html[data-theme="dark"] .cf-theme-toggle { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.30); } html[data-theme="dark"] .cf-theme-toggle:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 20px rgba(255,0,68,.50); } html[data-theme="dark"] .cf-theme-toggle .cf-sun { display: none; } html[data-theme="dark"] .cf-theme-toggle .cf-moon { display: block; } /* ---- 内联