/* ============================================================ BoliBoli · shared stylesheet Semantic classes, no inline styles. Dark cosmic theme. ============================================================ */ /* ---------- reset & base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #080808; color: #fafafa; font-family: "Noto Sans SC", -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: #8a93ff; color: #080808; } a { color: #cacaca; text-decoration: none; transition: color .3s ease; } a:hover { color: #fafafa; } :focus-visible { outline: 2px solid #8a93ff; outline-offset: 3px; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: #080808; } ::-webkit-scrollbar-thumb { background: #222; border-radius: 9px; } ::-webkit-scrollbar-thumb:hover { background: #333; } .font-outfit { font-family: "Outfit", sans-serif; } .font-grotesk { font-family: "Space Grotesk", monospace; } /* ---------- page scaffold ---------- */ .page-bg { position: relative; min-height: 100vh; background: #080808; } .stars-layer, .trail-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } .stars-layer { z-index: 0; } .trail-layer { z-index: 90; } .ambient-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 15% -10%, rgba(255,255,255,.05), transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(138,147,255,.05), transparent 60%); } .page-content { position: relative; z-index: 2; } .container { max-width: 1200px; margin: 0 auto; } .container-1080 { max-width: 1080px; margin: 0 auto; } .container-1000 { max-width: 1000px; margin: 0 auto; } .container-900 { max-width: 900px; margin: 0 auto; } .container-820 { max-width: 820px; margin: 0 auto; } /* ---------- reveal / word animations ---------- */ /* Reveals are visible by default; JS opts them into the animation by adding .reveal-on to , so if JS ever fails the content still shows. */ .reveal { transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); } .reveal-on .reveal { opacity: 0; transform: translateY(30px); } .reveal-on .reveal.in { opacity: 1; transform: none; } .word, .word2 { transition: opacity .7s ease; } .reveal-on .word, .reveal-on .word2 { opacity: .13; } .reveal-on .word.in, .reveal-on .word2.in { opacity: 1; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 32px; font-size: 15px; font-weight: 600; font-family: inherit; white-space: nowrap; cursor: pointer; border: none; } .btn-gap { gap: 12px; } .btn-primary { background: #fafafa; color: #080808; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,255,255,.12); color: #080808; } .btn-secondary { background: transparent; color: #fafafa; border: 1px solid #333; font-weight: 500; transition: border-color .3s ease, background .3s ease, transform .3s ease; } .btn-secondary:hover { border-color: #555; background: rgba(255,255,255,.04); color: #fafafa; } /* dot-morph indicator */ .dots { display: inline-flex; align-items: center; gap: 5px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: block; box-shadow: 0 0 0 0 transparent; transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, opacity .38s ease; } .dotbtn:hover .dots i:nth-child(2) { transform: scale(0); opacity: 0; } .dotbtn:hover .dots i:nth-child(1) { box-shadow: 0 0 0 2.5px currentColor; transform: scale(.55); } /* pill / eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid #262626; border-radius: 999px; font-size: 12px; letter-spacing: .06em; color: #999; } .eyebrow-dot { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border: 1px solid #262626; border-radius: 999px; font-size: 12px; letter-spacing: .06em; color: #999; background: rgba(255,255,255,.02); } .eyebrow-dot .dot, .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #8a93ff; box-shadow: 0 0 8px #8a93ff; } .eyebrow-violet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid #2e2e34; border-radius: 999px; font-size: 12px; letter-spacing: .1em; color: #a9adde; background: rgba(138,147,255,.05); } .kicker { font-family: "Space Grotesk", monospace; font-size: 12px; letter-spacing: .16em; color: #6a6a6a; text-transform: uppercase; } /* ---------- nav / header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 120; padding: 22px clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 11px; color: #fafafa; } .brand-img { display: block; height: 40px; width: auto; } .menu-brand .brand-img { height: 30px; } .foot-brand .brand-img { height: 32px; } .navpill { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 22px; border: 1px solid #212121; border-radius: 999px; background: rgba(13,13,13,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .navlinks-desk { display: flex; align-items: center; gap: 20px; margin-right: 12px; } .navlink { position: relative; color: #cacaca; font-size: 14px; transition: color .3s ease; white-space: nowrap; } .navlink:hover { color: #fafafa; } .navlink::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: #fafafa; transition: width .35s cubic-bezier(.2,.7,.2,1); } .navlink:hover::after { width: 100%; } .navlink.navlink-active { color: #fafafa; } .navlink.navlink-active::after { width: 100%; } .nav-cta { height: 44px; padding: 0 22px; border-radius: 999px; background: #fafafa; color: #080808; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; } .nav-cta:hover { color: #080808; } .menu-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #2a2a2a; background: transparent; color: #fafafa; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; } .menu-toggle .tdot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } /* ---------- hero (home) ---------- */ .hero-sec { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px clamp(20px, 4vw, 40px) 90px; overflow: hidden; } .hero-wordmark { position: relative; text-align: center; } .hero-meta { position: absolute; right: 0; top: clamp(-72px, -5vw, -48px); text-align: right; font-size: clamp(11px, 1vw, 15px); line-height: 1.9; } .hero-meta .copyright { font-family: "Outfit", sans-serif; color: #bdbdbd; } .hero-meta .tagline { color: #7a7a7a; white-space: nowrap; } .hero-wordmark h1 { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .18em .28em; font-family: "Noto Sans SC", -apple-system, sans-serif; font-size: clamp(36px, 7.2vw, 118px); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; background: linear-gradient(180deg, #fdfdfd 12%, #bdbdbd 55%, #5f5f5f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-wordmark h1 .lite { font-family: "Outfit", sans-serif; font-weight: 300; font-size: .52em; letter-spacing: .02em; } .scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: #6a6a6a; animation: bb-cue 2.4s ease-in-out infinite; } @keyframes bb-cue { 0%,100% { transform: translate(-50%,0); opacity: .45; } 50% { transform: translate(-50%,9px); opacity: 1; } } /* ---------- statement (word reveal) ---------- */ .stmt { padding: clamp(120px,20vw,280px) clamp(20px,4vw,40px); text-align: center; position: relative; } .stmt-text { font-family: "Outfit", sans-serif; font-size: clamp(28px,5vw,64px); line-height: 1.3; font-weight: 400; color: #fafafa; } /* ---------- generic section spacing ---------- */ .section { padding: clamp(60px,9vw,140px) clamp(20px,4vw,40px); } .section-tight { padding: clamp(60px,9vw,120px) clamp(20px,4vw,40px); } .section-pad { padding: clamp(80px,12vw,180px) clamp(20px,4vw,40px); } .section-band { padding: clamp(50px,7vw,90px) clamp(20px,4vw,40px); border-top: 1px solid #161616; border-bottom: 1px solid #161616; } .section-hairline-top { border-top: 1px solid #161616; } .text-center { text-align: center; } /* ---------- intro grid ---------- */ .intro-sec { padding: clamp(60px,9vw,140px) clamp(20px,4vw,40px) clamp(70px,9vw,120px); } .herogrid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(32px,5vw,72px); align-items: center; } .hero-title { margin-top: 26px; font-size: clamp(38px,5.6vw,74px); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; color: #fafafa; text-wrap: balance; } .hero-title .lite { font-family: "Outfit", sans-serif; font-weight: 300; } .lede { margin-top: 26px; max-width: 520px; font-size: clamp(15px,1.15vw,17px); line-height: 1.85; color: #a8a8a8; } .btn-row { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } .check-list { margin-top: 34px; display: flex; flex-direction: column; gap: 11px; } .check-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #888; } /* product matrix window (hero visual) */ .matrix-window { position: relative; } .window-card { border: 1px solid #232323; border-radius: 18px; background: linear-gradient(180deg,#111,#0b0b0b); overflow: hidden; } .window-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #1c1c1c; } .window-dot { width: 9px; height: 9px; border-radius: 50%; background: #2b2b2b; } .window-bar .win-title { margin-left: 10px; font-size: 12px; color: #7a7a7a; } .window-body { padding: 22px; display: grid; grid-template-columns: 1fr .82fr; gap: 16px; } .matrix-head { font-size: 14px; font-weight: 600; color: #fafafa; } .matrix-head .lite { font-family: "Outfit", sans-serif; font-weight: 400; } .matrix-sub { font-size: 11px; color: #7a7a7a; margin-top: 3px; } .matrix-list { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; } .matrix-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #1e1e1e; border-radius: 9px; background: #0d0d0d; } .matrix-row .bullet { width: 5px; height: 5px; border-radius: 50%; background: #4a4a4a; flex: none; } .matrix-row .label { font-size: 12px; color: #bdbdbd; white-space: nowrap; } .matrix-row-hi { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid #2e2e34; border-radius: 9px; background: rgba(138,147,255,.05); } .matrix-row-hi .bullet { width: 5px; height: 5px; border-radius: 50%; background: #8a93ff; box-shadow: 0 0 8px #8a93ff; flex: none; } .matrix-row-hi .label { font-size: 12px; color: #e2e2e2; font-weight: 500; } .render-pane { border: 1px solid #1c1c1c; border-radius: 11px; background: repeating-linear-gradient(135deg,#0e0e0e,#0e0e0e 9px,#121212 9px,#121212 18px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 16px 12px; position: relative; } .render-pane .render-label { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-family: "Space Grotesk", monospace; font-size: 9px; letter-spacing: .1em; color: #5a5a5a; } .render-pane .render-cap { margin-top: 14px; font-size: 10px; color: #8a8a8a; text-align: center; line-height: 1.4; } .matrix-glow { position: absolute; top: -14px; right: -14px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(138,147,255,.12), transparent 70%); z-index: -1; filter: blur(10px); } /* ---------- trust ---------- */ .trustgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .trust-cell { text-align: center; } .trust-k { font-size: clamp(26px,3.2vw,42px); font-weight: 600; color: #fafafa; letter-spacing: -.01em; } .trust-v { margin-top: 9px; font-size: 13px; color: #888; } /* ---------- industries ---------- */ .ind-wrap { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .indpill { padding: 10px 22px; border: 1px solid #242424; border-radius: 999px; font-size: 14px; color: #bdbdbd; background: rgba(255,255,255,.01); transition: border-color .3s ease, color .3s ease, background .3s ease; } .indpill:hover { border-color: #444; color: #fafafa; background: rgba(255,255,255,.03); } .ind-more { padding: 10px 16px; color: #555; font-size: 14px; align-self: center; } .muted-note { margin-top: 22px; font-size: 14px; color: #7a7a7a; } /* ---------- banner cards ---------- */ .banner { position: relative; border: 1px solid #232323; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg,#101010,#0a0a0a); padding: clamp(40px,6vw,72px) clamp(24px,5vw,64px); text-align: center; } .banner-glow { position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% 0%, rgba(138,147,255,.06), transparent 60%); pointer-events: none; } .banner-inner { position: relative; } .banner h2, .cta-panel h2 { font-size: clamp(24px,3.4vw,40px); font-weight: 600; letter-spacing: -.01em; color: #fafafa; } .banner .lite, .section-title .lite { font-family: "Outfit", sans-serif; font-weight: 400; } .banner p { margin: 20px auto 0; max-width: 640px; font-size: 15px; line-height: 1.8; color: #a2a2a2; } .banner .fineprint { margin-top: 22px; font-size: 12px; letter-spacing: .04em; color: #6c6c6c; } .center-btn-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* ---------- section titles ---------- */ .section-head { text-align: center; max-width: 820px; margin: 0 auto; } .section-title { margin-top: 22px; font-size: clamp(26px,3.8vw,48px); line-height: 1.28; font-weight: 600; letter-spacing: -.01em; color: #fafafa; text-wrap: balance; } .section-desc { margin-top: 20px; font-size: 15px; line-height: 1.7; color: #8f8f8f; } /* ---------- before/after ---------- */ .ba-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; } .ba-title { margin-top: 16px; font-size: clamp(22px,2.8vw,34px); font-weight: 600; color: #fafafa; letter-spacing: -.01em; } .ba-note { max-width: 340px; font-size: 13px; line-height: 1.7; color: #8a8a8a; } .ba-frame { position: relative; width: 100%; aspect-ratio: 16/9; border: 1px solid #232323; border-radius: 16px; overflow: hidden; user-select: none; background: #0b0b0b; touch-action: pan-y; } .ba-pane { position: absolute; inset: 0; } .ba-after { background: url("img/ba-after.jpg") center/cover no-repeat #101010; } .ba-top { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 1px solid rgba(255,255,255,.35); } .ba-before { position: absolute; top: 0; left: 0; height: 100%; width: var(--baw,100vw); min-width: 100%; background: url("img/ba-before.jpg") center/cover no-repeat #0c0c0c; } .ba-tag { position: absolute; top: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(8,8,8,.7); border: 1px solid #2a2a2a; font-size: 11px; color: #cacaca; font-family: "Outfit", sans-serif; } .ba-tag-before { left: 16px; } .ba-tag-after { right: 16px; } .bahandle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 44px; display: flex; align-items: center; justify-content: center; z-index: 5; cursor: ew-resize; touch-action: none; } .bahandle .ba-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.4); } .bahandle .ba-knob { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3a3a3a; background: rgba(13,13,13,.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; gap: 2px; color: #fafafa; } /* ---------- product grid ---------- */ .pgrid { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .pcard { border: 1px solid #202020; border-radius: 14px; background: #0c0c0c; padding: 22px 20px 24px; display: flex; flex-direction: column; min-height: 190px; transition: border-color .45s ease, background .45s ease, transform .45s ease; } .pcard:hover { border-color: #3a3a3a; background: #111; } .pcard .p-tag { font-family: "Space Grotesk", monospace; font-size: 10px; letter-spacing: .08em; color: #6a6a6a; } .pcard .p-title { margin-top: 14px; font-size: 17px; font-weight: 600; color: #fafafa; } .pcard .p-body { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: #8a8a8a; } .center-more { margin-top: 44px; text-align: center; } .link-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 28px; border-radius: 32px; } /* ---------- The One ---------- */ .theone-sec { padding: clamp(80px,12vw,180px) clamp(20px,4vw,40px); border-top: 1px solid #161616; background: linear-gradient(180deg,#0a0a0a,#080808); } .theone-title { margin-top: 22px; font-size: clamp(26px,3.6vw,46px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #fafafa; } .theone-p { margin: 24px auto 0; max-width: 680px; font-size: 15px; line-height: 1.9; color: #9a9a9a; } .theone-emph { margin-top: 20px; font-size: 16px; font-weight: 600; color: #e8e8e8; } .oneline { margin-top: clamp(48px,7vw,90px); } .oneline-text { font-size: clamp(28px,4.6vw,60px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: #fafafa; } .oneline-note { margin: 20px auto 0; max-width: 560px; font-size: 13px; line-height: 1.8; color: #7a7a7a; } .onegrid { margin-top: 44px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; text-align: left; } .lcard { border: 1px solid #1f1f1f; border-radius: 13px; background: #0c0c0c; padding: 20px; transition: border-color .4s ease, background .4s ease; } .lcard:hover { border-color: #333; background: #101010; } .lcard .l-q { font-size: 13px; font-weight: 600; color: #d8d8d8; } .lcard .l-a { margin-top: 11px; font-size: 12.5px; line-height: 1.7; color: #8a8a8a; } .mt-40 { margin-top: 40px; } .mt-44 { margin-top: 44px; } .subtle-cta-note { margin-top: 18px; font-size: 12.5px; color: #9a9a9a; } /* F14 折中：可读 CTA 说明句提至 AA */ /* ---------- free diagnosis CTA panel ---------- */ .cta-panel { position: relative; border: 1px solid #232323; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg,#101014,#0a0a0a); padding: clamp(48px,7vw,88px) clamp(24px,5vw,64px); text-align: center; } .cta-panel h2 { font-size: clamp(26px,3.8vw,48px); } .cta-panel .cta-p { margin: 18px auto 0; max-width: 520px; font-size: 15px; line-height: 1.8; color: #9a9a9a; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid #161616; padding: clamp(50px,7vw,80px) clamp(20px,4vw,40px) 40px; } .footgrid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 32px; } .foot-brand { display: flex; align-items: center; gap: 10px; } .foot-tagline { margin-top: 16px; max-width: 280px; font-size: 12.5px; line-height: 1.7; color: #7a7a7a; } .foot-tagline .lite { font-family: "Outfit", sans-serif; letter-spacing: .04em; } .foot-col-h { font-size: 13px; font-weight: 600; color: #cacaca; } .foot-links { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .footlink { font-size: 13px; color: #7a7a7a; } .foot-bottom { max-width: 1200px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid #161616; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12px; color: #5f5f5f; } .foot-bottom .beian { color: inherit; text-decoration: none; } .foot-bottom .beian:hover { color: #a2a2a2; text-decoration: underline; } /* ---------- fullscreen overlay menu ---------- */ .menuwrap { position: fixed; inset: 0; z-index: 200; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s cubic-bezier(.4,0,.1,1), visibility .55s; background: rgba(6,6,6,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .menuwrap.open { opacity: 1; visibility: visible; pointer-events: auto; } .menu-inner { position: absolute; inset: 0; padding: clamp(24px,4vw,44px); display: flex; flex-direction: column; } .menu-top { display: flex; align-items: center; justify-content: space-between; } .menu-brand { display: flex; align-items: center; gap: 10px; color: #fafafa; } .menu-close { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #2a2a2a; background: transparent; color: #fafafa; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* menu-mid 不用 justify-content:center 居中——内容超高时 flex 居中 + overflow 会把 顶部裁到不可滚（经典陷阱）；改用子元素 margin:auto 0，矮时居中、超高时可滚到头尾。 */ .menu-mid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; max-width: 1200px; width: 100%; margin: 0 auto; padding: clamp(14px,2.5vh,28px) 0; } .menuitems { display: flex; flex-direction: column; margin: auto 0; } .menurow { position: relative; overflow: hidden; flex: none; display: flex; align-items: baseline; gap: 16px; padding: clamp(8px,1.2vh,16px) 0; color: #bdbdbd; border-bottom: 1px solid #141414; opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), padding-left .5s cubic-bezier(.2,.7,.2,1), color .4s ease; } .menuwrap.open .menuitems .menurow { opacity: 1; transform: none; } .menurow:hover { padding-left: 26px; color: #fafafa; } .menurow .mrbg { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(circle at center, rgba(255,255,255,.9) .6px, transparent .7px); background-size: 22px 22px; transition: opacity .5s ease; pointer-events: none; } .menurow:hover .mrbg { opacity: .10; } .menurow .mrnum { position: relative; font-family: "Outfit", sans-serif; font-size: 13px; color: #8a93ff; opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .menurow:hover .mrnum { opacity: 1; transform: translateX(0); } /* 字号跟视口高度走（垂直列表 8 项要在一屏内放下），vw 主导在宽扁屏上必溢出 */ .menurow .mrlabel { position: relative; font-size: clamp(22px,4.6vh,56px); font-weight: 600; letter-spacing: -.01em; } .menu-contacts { display: flex; flex-wrap: wrap; gap: 12px; } .menu-contact { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border: 1px solid #222; border-radius: 12px; background: #0c0c0c; } .menu-contact .mc-k { font-family: "Space Grotesk", monospace; font-size: 10px; letter-spacing: .08em; color: #6a6a6a; } .menu-contact .mc-v { font-size: 13px; color: #cacaca; } /* ---------- interior page header ---------- */ .int-header { padding: clamp(120px,16vh,178px) clamp(20px,4vw,40px) clamp(28px,4vw,44px); } .ihead { display: flex; justify-content: space-between; align-items: flex-start; gap: 36px; flex-wrap: wrap; } .ihead-main { max-width: 780px; } .pill-soft { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid #262626; border-radius: 999px; font-size: 12px; letter-spacing: .03em; color: #9a9a9a; background: rgba(255,255,255,.02); } .int-title { margin-top: 22px; font-size: clamp(34px,5vw,66px); line-height: 1.14; font-weight: 600; letter-spacing: -.01em; color: #fafafa; } .int-title .lite { font-family: "Outfit", sans-serif; font-weight: 300; } .int-lede { margin-top: 24px; max-width: 680px; font-size: clamp(14px,1.1vw,16px); line-height: 1.9; } .int-lede .strong { color: #a8a8a8; } .int-lede .dim { color: #9a9a9a; } /* F14 折中：可读说明句提至 AA(~6.9:1)，非装饰微文本 */ .int-btn-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; } .imeta { text-align: right; font-family: "Space Grotesk", monospace; font-size: 12px; letter-spacing: .06em; line-height: 1.8; padding-top: 8px; } .imeta .im1 { color: #7a7a7a; white-space: nowrap; } .imeta .im2 { color: #4a4a4a; white-space: nowrap; } /* ---------- sticky sub-nav ---------- */ .subnav { position: sticky; top: 80px; z-index: 80; background: rgba(8,8,8,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #161616; border-bottom: 1px solid #161616; } .subnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px); } .subnav-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 13px 0; scrollbar-width: none; } .subnav-scroll::-webkit-scrollbar { display: none; } .subtab { white-space: nowrap; padding: 8px 15px; border-radius: 999px; border: 1px solid #222; font-size: 13px; color: #9a9a9a; background: rgba(255,255,255,.01); transition: border-color .3s ease, color .3s ease, background .3s ease; } .subtab:hover { border-color: #444; color: #fafafa; background: rgba(255,255,255,.03); } /* ---------- product detail cards ---------- */ .mcard-stack { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(26px,3.5vw,44px); } .mcard { border: 1px solid #202020; border-radius: 18px; background: #0b0b0b; padding: clamp(26px,3.8vw,46px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(24px,4vw,44px); align-items: center; scroll-margin-top: 150px; transition: border-color .4s ease, background .4s ease; } .mcard:hover { border-color: #333; background: #101010; } .mcard-h { margin-top: 18px; font-size: clamp(21px,2.5vw,31px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: #fafafa; text-wrap: balance; } .mcard-paras { margin-top: 16px; display: flex; flex-direction: column; gap: 13px; } .mcard-paras p { font-size: 14px; line-height: 1.85; color: #9a9a9a; } .mcard-checks { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 20px; } .mcheck { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #7a7a7a; } .mcard-visual { border: 1px solid #1c1c1c; border-radius: 14px; background: linear-gradient(180deg,#0f0f0f,#0b0b0b); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; justify-content: center; overflow: hidden; } .chatbub { max-width: 90%; padding: 11px 15px; border-radius: 14px; font-size: 12.5px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chatbub.u { align-self: flex-end; background: #e6e6e6; color: #141414; border-bottom-right-radius: 4px; } .chatbub.a { align-self: flex-start; background: #141414; color: #c4c4c4; border: 1px solid #222; border-bottom-left-radius: 4px; white-space: normal; } /* terminal hardware card visuals */ .term-visual { display: flex; flex-direction: column; gap: 12px; } .term-hero { border: 1px solid #1c1c1c; border-radius: 12px; background: #0e0e0e; overflow: hidden; display: flex; flex-direction: column; } .term-hero .th-k { font-family: "Space Grotesk", monospace; font-size: 9px; letter-spacing: .14em; color: #5a5a5a; } .term-hero .th-n { font-size: 14px; font-weight: 600; color: #e0e0e0; } .term-hero .th-d { font-size: 11px; color: #8a8a8a; } .term-img { width: 100%; height: 150px; object-fit: cover; display: block; } .term-img-hero { height: 200px; } .term-meta { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; } .term-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .term-cell { border: 1px solid #1c1c1c; border-radius: 12px; background: #0e0e0e; overflow: hidden; display: flex; flex-direction: column; } .term-cell .tc-n { font-size: 13px; font-weight: 600; color: #dedede; font-family: "Outfit", sans-serif; } .term-cell .tc-d { font-size: 10.5px; line-height: 1.5; color: #7f7f7f; } @media (max-width: 820px) { .mcard, .mcardgrid { grid-template-columns: 1fr !important; } .ihead { flex-direction: column; } .imeta { text-align: left !important; } } /* ---------- cases page ---------- */ .statrow { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; } .stat-k { font-size: clamp(26px,3.2vw,42px); font-weight: 600; color: #fafafa; letter-spacing: -.01em; } .stat-v { margin-top: 9px; font-size: 13px; color: #888; } .csgrid { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .case-card { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; } .case-tag { align-self: flex-start; padding: 5px 12px; border: 1px solid #262626; border-radius: 999px; font-size: 11px; letter-spacing: .03em; color: #a9a9a9; background: rgba(255,255,255,.02); } .case-name { font-size: 18px; font-weight: 600; color: #fafafa; } .case-p { font-size: 13px; line-height: 1.8; color: #8f8f8f; } .case-p .lead { color: #c4c4c4; } .e2grid { margin-top: clamp(36px,5vw,56px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .endorse-card { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; } .endorse-icon { width: 46px; height: 46px; border-radius: 12px; border: 1px solid #262626; background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: center; } .endorse-name { font-size: 18px; font-weight: 600; color: #fafafa; } .endorse-p { font-size: 13px; line-height: 1.85; color: #8f8f8f; } @media (max-width: 900px) { .csgrid { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 640px) { .csgrid { grid-template-columns: 1fr !important; } .e2grid { grid-template-columns: 1fr !important; } .statrow { grid-template-columns: repeat(2,1fr) !important; gap: 30px 16px !important; } } /* ---------- diagnosis page ---------- */ .d3grid { margin-top: clamp(36px,5vw,56px); display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .diag-checks { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; } .out-card { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; } .out-num { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #2a2a2a; background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-size: 16px; color: #cacaca; } .out-t { font-size: 18px; font-weight: 600; color: #fafafa; } .out-d { font-size: 13px; line-height: 1.85; color: #8f8f8f; } .step-card { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; overflow: hidden; } .step-top { height: 90px; background: linear-gradient(135deg,#1e1e1e,#0e0e0e); border-bottom: 1px solid #1c1c1c; } .step-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; } .step-k { align-self: flex-start; padding: 5px 12px; border: 1px solid #262626; border-radius: 999px; font-size: 11px; letter-spacing: .06em; color: #a9a9a9; background: rgba(255,255,255,.02); } .step-t { font-size: 18px; font-weight: 600; color: #fafafa; } .step-d { font-size: 13px; line-height: 1.85; color: #8f8f8f; } /* booking form */ .form-card { margin-top: 36px; border: 1px solid #202020; border-radius: 18px; background: #0b0b0b; padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; gap: 20px; } .field-label { display: block; font-size: 13px; font-weight: 600; color: #cacaca; margin-bottom: 8px; } .fld { width: 100%; padding: 13px 15px; border: 1px solid #222; border-radius: 10px; background: #0e0e0e; color: #eaeaea; font-size: 14px; font-family: inherit; outline: none; transition: border-color .3s ease; } .fld::placeholder { color: #5a5a5a; } .fld:focus { border-color: #4a4a4a; background: #111; } .fld-textarea { resize: vertical; min-height: 88px; } .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.6; color: #8a8a8a; cursor: pointer; } .consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: #8a93ff; flex: none; } .consent a { color: #a9adde; text-decoration: underline; } .form-submit { height: 48px; border-radius: 32px; background: #fafafa; color: #080808; font-size: 15px; font-weight: 600; border: none; cursor: pointer; width: 100%; } .form-note { text-align: center; font-size: 12px; color: #9a9a9a; } /* F14 折中：表单说明句提至 AA */ /* FAQ (native details) */ .faq-list { margin-top: clamp(32px,4vw,48px); display: flex; flex-direction: column; gap: 12px; } details.faq { border: 1px solid #1f1f1f; border-radius: 12px; background: #0b0b0b; transition: border-color .4s ease; } details.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; color: #eaeaea; } details.faq summary::-webkit-details-marker { display: none; } details.faq .chev { color: #7a7a7a; font-size: 18px; flex: none; transition: transform .35s ease; } details.faq[open] .chev { transform: rotate(90deg); } details.faq[open] { border-color: #333; } .faq-a { padding: 0 22px 20px; font-size: 13px; line-height: 1.85; color: #8f8f8f; } @media (max-width: 820px) { .d3grid { grid-template-columns: 1fr !important; } } /* ---------- download page ---------- */ .dl-hero-title { margin-top: 22px; font-family: "Outfit", sans-serif; font-weight: 500; font-size: clamp(42px,6.4vw,90px); line-height: 1.05; letter-spacing: -.01em; color: #fafafa; } .dl-tabs { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; } .filtab { padding: 9px 20px; border-radius: 999px; border: 1px solid #262626; background: rgba(255,255,255,.01); color: #9a9a9a; font-size: 14px; font-family: inherit; cursor: pointer; transition: border-color .3s ease, color .3s ease, background .3s ease; } .filtab:hover { border-color: #444; color: #fafafa; } .filtab.filtab-active { border-color: #fafafa; background: #fafafa; color: #080808; font-weight: 600; } .dlgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .dlcard { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 24px; display: flex; flex-direction: column; transition: border-color .4s ease, background .4s ease; } .dlcard:hover { border-color: #333; background: #101010; } .dl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .dl-ident { display: flex; align-items: center; gap: 13px; } .dl-ic { width: 46px; height: 46px; border-radius: 12px; border: 1px solid #262626; background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 500; font-size: 18px; color: #cacaca; } .dl-name { font-size: 16px; font-weight: 600; color: #fafafa; } .dl-ver { font-family: "Space Grotesk", monospace; font-size: 12px; color: #6a6a6a; margin-top: 3px; } .dl-tier { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid #262626; border-radius: 999px; font-size: 11px; color: #a9a9a9; white-space: nowrap; } .dl-tier .dot { width: 5px; height: 5px; border-radius: 50%; background: #8a93ff; } .dl-desc { margin-top: 18px; font-size: 12.5px; line-height: 1.8; color: #8f8f8f; flex: 1; } .dl-meta { margin-top: 18px; display: flex; align-items: center; gap: 14px; font-family: "Space Grotesk", monospace; font-size: 12px; color: #6a6a6a; } .dlbtn { margin-top: 16px; height: 44px; border-radius: 999px; background: #161616; border: 1px solid #2a2a2a; color: #fafafa; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; font-family: inherit; transition: border-color .3s ease, background .3s ease; } .dlbtn:hover { border-color: #454545; background: #1c1c1c; } .dl-empty { display: none; text-align: center; color: #6a6a6a; font-size: 14px; padding: 40px 0; } .faq-title { font-size: clamp(24px,3vw,36px); font-weight: 600; letter-spacing: -.01em; color: #fafafa; } .faq-bullet { display: flex; gap: 9px; margin-top: 9px; } .faq-bullet .b-dot { color: #8a93ff; flex: none; } .faq-bullet .b-k { color: #d8d8d8; font-weight: 600; } @media (max-width: 900px) { .dlgrid { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 620px) { .dlgrid { grid-template-columns: 1fr !important; } } /* ---------- about page ---------- */ .abgrid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .abgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .prose { max-width: 820px; margin: 0 auto; } .prose-h { font-size: clamp(24px,3vw,36px); font-weight: 600; letter-spacing: -.01em; color: #fafafa; } .prose-body { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; } .prose-body p { font-size: 15px; line-height: 1.95; color: #a2a2a2; } .value-card { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 28px 26px; display: flex; flex-direction: column; gap: 15px; } .value-icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #262626; background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: center; color: #cacaca; } .value-h { font-size: 18px; font-weight: 600; color: #fafafa; } .value-p { font-size: 13px; line-height: 1.85; color: #8f8f8f; } .stat-panel { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; border: 1px solid #1c1c1c; border-radius: 18px; background: #0b0b0b; padding: clamp(32px,4vw,48px) 24px; } .about-endorse { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 26px; display: flex; flex-direction: column; gap: 14px; } .contact-card { border: 1px solid #202020; border-radius: 16px; background: #0b0b0b; padding: 24px; min-height: 150px; display: flex; flex-direction: column; gap: 12px; } .contact-k { font-family: "Space Grotesk", monospace; font-size: 11px; letter-spacing: .08em; color: #6a6a6a; } .contact-v { font-size: 16px; font-weight: 600; color: #eaeaea; } .contact-v:hover { color: #fafafa; } .qr { width: 96px; height: 96px; border-radius: 10px; border: 1px solid #232323; background: repeating-linear-gradient(45deg,#111,#111 5px,#0c0c0c 5px,#0c0c0c 10px); display: flex; align-items: center; justify-content: center; } .qr span { font-family: "Space Grotesk", monospace; font-size: 9px; letter-spacing: .1em; color: #5a5a5a; } .qr img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } @media (max-width: 820px) { .abgrid3 { grid-template-columns: 1fr !important; } .abgrid2 { grid-template-columns: 1fr !important; } } @media (max-width: 600px) { .stat-panel { grid-template-columns: repeat(2,1fr) !important; gap: 30px 16px !important; } } /* ---------- responsive ---------- */ @media (max-width: 900px) { .deskonly { display: none !important; } } @media (max-width: 1150px) { .navlinks-desk { display: none !important; } /* F7: 登录态账户入口在移动端顶栏仍可见（.account-nav 由 main.js 控制 hidden）； 仅在账户入口激活时（download.html 登录态）覆盖，营销页/登出态保持隐藏——零回归。 */ .navlinks-desk:has(.account-nav:not([hidden])) { display: flex !important; } .navlinks-desk:has(.account-nav:not([hidden])) > .navlink { display: none !important; } } @media (min-width: 901px) { .mobonly { display: none !important; } } @media (max-width: 900px) { .navpill { padding: 6px !important; gap: 0 !important; } } @media (max-width: 700px) { .hero-desc { position: static !important; max-width: 100% !important; margin-top: 44px; } .scrollcue { display: none; } } @media (max-width: 600px) { .herogrid { grid-template-columns: 1fr !important; gap: 38px !important; } .trustgrid { grid-template-columns: repeat(2,1fr) !important; gap: 30px 16px !important; } .pgrid { grid-template-columns: 1fr !important; } .onegrid { grid-template-columns: 1fr !important; } .footgrid { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; } .stmt { padding-top: 88px !important; padding-bottom: 88px !important; } .section-pad { padding-top: 72px !important; padding-bottom: 72px !important; } .indpill { padding: 13px 22px !important; } .footlink { padding: 8px 0 !important; } .hero-sec { padding-top: 104px !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .word, .word2 { opacity: 1 !important; transition: none !important; } * { animation-duration: .001ms !important; } } /* ── 客服浮窗（真实后端接线，main.js 渲染 .support-widget__message 系列） ── */ .support-widget { bottom: max(28px, env(safe-area-inset-bottom)); display: block; position: fixed; right: max(28px, env(safe-area-inset-right)); z-index: 150; } .support-widget[hidden] { display: none; } .support-widget__launcher { align-items: center; background: #fafafa; border: none; border-radius: 999px; box-shadow: 0 14px 40px rgba(0,0,0,.5); color: #080808; cursor: pointer; display: flex; flex-direction: row; gap: 9px; height: 48px; justify-content: center; line-height: 1; min-width: 0; padding: 0 20px; white-space: nowrap; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .support-widget__launcher:hover { background: #e6e6e6; box-shadow: 0 18px 46px rgba(0,0,0,.55); transform: translateY(-2px); } .support-widget__launcher:active { transform: translateY(0); } .support-widget__launcher-icon { align-items: center; display: inline-flex; flex: 0 0 auto; height: 18px; width: 18px; } .support-widget__launcher svg { height: 17px; width: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .support-widget__launcher strong { font-size: 14px; font-weight: 600; } .support-widget__panel { background: #0d0d0d; border: 1px solid #262626; border-radius: 16px; bottom: 64px; box-shadow: 0 30px 70px rgba(0,0,0,.6); display: grid; gap: 12px; grid-template-rows: auto minmax(0,1fr) auto auto; height: min(560px, calc(100vh - 160px)); max-height: min(640px, calc(100vh - 160px)); overflow: hidden; padding: 18px; position: absolute; right: 0; width: min(370px, calc(100vw - 32px)); } .support-widget__panel[hidden] { display: none; } .support-widget__head { align-items: start; display: flex; justify-content: space-between; gap: 12px; } .support-widget__head h2 { color: #fafafa; font-size: 16px; font-weight: 600; margin: 0; } .support-widget__head p { color: #999; font-size: 12px; margin: 2px 0 0; } .support-widget__head p::before { background: #30d158; border-radius: 999px; content: ""; display: inline-block; height: 7px; margin-right: 6px; width: 7px; } .support-widget__head p[data-state="processing"]::before { background: #8a93ff; } .support-widget__head p[data-state="waiting_fizz"]::before { background: #ff9f0a; } .support-widget__head p[data-state="fizz_joined"]::before { background: #0a84ff; } .support-widget__close { align-items: center; background: transparent; border: 1px solid #2a2a2a; border-radius: 999px; color: #cacaca; cursor: pointer; display: flex; font-size: 18px; height: 30px; justify-content: center; line-height: 1; width: 30px; } .support-widget__close:hover { border-color: #454545; color: #fafafa; } .support-widget__messages { background: #0b0b0b; border: 1px solid #1f1f1f; border-radius: 12px; display: grid; gap: 10px; max-height: 250px; min-height: 0; overflow-y: auto; padding: 14px; } .support-widget__empty { align-self: center; color: #6a6a6a; font-size: 13px; justify-self: center; margin: 0; } .support-widget__suggestions-title, .support-widget__privacy-hint { color: #9a9a9a; font-size: 11px; } /* F14 折中：安全警示/建议标题提至 AA */ .support-widget__suggestions, .support-widget__next-steps { display: flex; flex-wrap: wrap; gap: 6px; } .support-widget__quick-prompts { display: grid; gap: 6px; } .support-widget__quick-prompts[hidden] { display: none; } .support-widget__quick-prompts > span, .support-widget__next-steps-label { color: #8a8a8a; flex-basis: 100%; font-size: 12px; } .support-widget__quick-prompts > div { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex-wrap: wrap; } .support-widget__quick-prompts button { background: transparent; border: 1px solid #262626; border-radius: 999px; color: #bdbdbd; cursor: pointer; flex: 0 0 auto; font: inherit; font-size: 12px; padding: 6px 13px; } .support-widget__suggestion, .support-widget__next-step { background: transparent; border: 1px solid #262626; border-radius: 999px; color: #eaeaea; cursor: pointer; font: inherit; font-size: 11px; padding: 6px 9px; } .support-widget__suggestion:hover, .support-widget__next-step:hover, .support-widget__suggestion:focus-visible, .support-widget__next-step:focus-visible { border-color: #8a93ff; outline: none; } .support-widget__message { display: grid; gap: 4px; } .support-widget__message-detail { color: #8f8f8f; } .support-widget__message span, .support-widget__message-meta { color: #8f8f8f; font-size: 11px; line-height: 1.35; max-width: 100%; overflow-wrap: anywhere; } .support-widget__message .support-widget__message-badge { color: #30d158; font-size: 10px; font-weight: 700; letter-spacing: .02em; } .support-widget__message--user .support-widget__message-meta { display: none; } .support-widget__message p { border-radius: 12px; color: #eaeaea; font-size: 13px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; padding: 9px 13px; white-space: pre-wrap; } .support-widget__message--user { justify-items: end; } .support-widget__message--user p { background: #e6e6e6; color: #141414; border-bottom-right-radius: 4px; } .support-widget__message--admin { justify-items: start; } .support-widget__message--admin p { background: #131316; border: 1px solid #222; border-bottom-left-radius: 4px; } .support-widget__message--agent { justify-items: start; } .support-widget__message--agent p { background: #131316; border: 1px solid #222; border-left: 2px solid #8a93ff; border-bottom-left-radius: 4px; } .support-widget__message--pending p { border-style: dashed; } .support-widget__processing { align-items: center; color: #8f8f8f; display: flex; gap: 8px; padding: 2px 4px; } .support-widget__processing > span { display: flex; gap: 3px; } .support-widget__processing i { animation: support-pulse 1s ease-in-out infinite; background: #8a93ff; border-radius: 999px; display: block; height: 5px; width: 5px; } .support-widget__processing i:nth-child(2) { animation-delay: 120ms; } .support-widget__processing i:nth-child(3) { animation-delay: 240ms; } .support-widget__processing p { font-size: 11px; margin: 0; } @keyframes support-pulse { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } .support-widget__form { display: grid; gap: 10px; } .support-widget__field { display: grid; gap: 6px; } .support-widget__field span { color: #bdbdbd; font-size: 12px; font-weight: 600; } .support-widget__field textarea { background: #0b0b0b; border: 1px solid #262626; border-radius: 10px; color: #eaeaea; font: inherit; min-height: 78px; outline: none; padding: 10px 12px; resize: vertical; } .support-widget__field textarea:focus { border-color: #4a4a4a; } .support-widget__actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .support-widget__error { background: rgba(255,107,87,.1); border-radius: 8px; color: #ff8a75; font-size: 12px; margin: 0; padding: 8px 12px; } .support-widget__actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .support-widget__actions .btn--ghost { color: #fafafa; background: transparent; border-color: #333; } .support-widget__actions .btn--ghost:hover { border-color: #555; background: rgba(255,255,255,.04); } .support-widget__actions .btn--primary { color: #080808; background: #fafafa; } .support-widget__actions .btn--primary:hover { background: #e6e6e6; } /* 表单反机器人蜜罐（training/diagnosis 共用） */ .form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* phase5: skip-link + form focus + training section utilities + CLS */ .skip-link { position: absolute; left: 12px; top: 12px; z-index: 10000; padding: 10px 14px; border-radius: 8px; background: #8a93ff; color: #080808; font-weight: 600; text-decoration: none; transform: translateY(-160%); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 3px solid #fafafa; outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid #8a93ff; outline-offset: 2px; } .section-pad { padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 40px) 0; } .section-pad--band { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(40px, 6vw, 70px); } .section-pad--signup { padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 40px) 0; margin-top: clamp(80px, 12vw, 160px); } .section-pad--host { padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 40px) clamp(60px, 9vw, 120px); } .container--1100 { max-width: 1100px; margin-left: auto; margin-right: auto; } .section-head--760 { max-width: 760px; } .mt-20 { margin-top: 20px; } .mt-14 { margin-top: 14px; } .mt-8 { margin-top: 8px; } .mt-0 { margin-top: 0; } .t-cert-img { width: 100%; height: auto; aspect-ratio: 1200 / 415; border-radius: 10px; border: 1px solid #202020; display: block; object-fit: cover; } .brand-img { aspect-ratio: 600 / 216; }