/* ============================================================ VITERN / Thermal Topology direction Local concept layer: dark technical proof + luminous engineering paper ============================================================ */ .theme-thermal { --paper: #f4f7fb; --paper-bright: #fbfdff; --paper-blue: #edf4fc; --paper-line: rgba(16, 48, 84, 0.13); --paper-line-strong: rgba(16, 48, 84, 0.24); --ink: #071426; --ink-dim: #42556d; --ink-mute: #6c7d92; background: #03070c; } /* 固定噪点会在滚动时让整屏持续重绘;新版本以真实的明暗层级替代颗粒。 */ .theme-thermal::after { display: none; } /* ---------- Hero / thermal topology ---------- */ .theme-thermal .hero { min-height: var(--hero-height); background: #02070c; } .theme-thermal .hero::before { z-index: 0; background: linear-gradient(90deg, rgba(2, 7, 13, 0.58) 0%, rgba(2, 7, 13, 0.38) 34%, rgba(2, 7, 13, 0.12) 57%, rgba(2, 7, 13, 0.02) 100%), linear-gradient(180deg, rgba(2, 7, 13, 0.02), rgba(2, 7, 13, 0.24)); } .theme-thermal .hero::after { z-index: 0; background: linear-gradient(180deg, transparent 78%, rgba(3, 8, 14, 0.58) 100%); } .theme-thermal .hero-media { filter: none; } .theme-thermal .hero-cad-image { opacity: 0.78; } .theme-thermal .hero-cad-focus { display: none; } .theme-thermal .hero-cad-stage { will-change: auto; } .theme-thermal .hero-cad-image { animation: none; transform: none; } .theme-thermal .hero-cad-scan, .theme-thermal .hero-cad-node { display: none; } .theme-thermal .hero-cad-status::after { animation: none; transform: scaleX(1); } /* 05 方向:完整数据中心等距架构 + 蓝色冷却路径, 不叠加抽象节点、扫描框和假数据标签。 */ .theme-thermal .hero-cad-image { opacity: 1; object-position: center center; } .theme-thermal .hero-media::before { opacity: 0.08; } .theme-thermal .hero-grid { grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr); } .theme-thermal .hero-copy { max-width: 650px; text-shadow: 0 4px 32px rgba(0, 0, 0, 0.8); } .theme-thermal .hero-title { font-size: clamp(44px, 4.65vw, 76px); } .theme-thermal .hero-sub { max-width: 47ch; } .theme-thermal .hero .btn-primary { background: #1678ef; color: #fff; } .theme-thermal .hero .btn-primary:hover { background: #2b8cff; } /* ---------- Shared light engineering-paper sections ---------- */ .theme-thermal .architecture, .theme-thermal .capabilities, .theme-thermal .partners { --text: var(--ink); --text-dim: var(--ink-dim); --text-mute: var(--ink-mute); --line: var(--paper-line); --line-strong: var(--paper-line-strong); color: var(--ink); background-color: var(--paper); background-image: linear-gradient(rgba(38, 91, 148, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 91, 148, 0.035) 1px, transparent 1px), radial-gradient(circle at 76% 8%, rgba(74, 159, 255, 0.09), transparent 30%); background-size: 72px 72px, 72px 72px, auto; border-color: var(--paper-line); } .theme-thermal .architecture .eyebrow, .theme-thermal .capabilities .eyebrow, .theme-thermal .partners .eyebrow { color: var(--ink-mute); } .theme-thermal .architecture .eyebrow-tag::after, .theme-thermal .capabilities .eyebrow-tag::after, .theme-thermal .partners .eyebrow-tag::after { background: var(--paper-line-strong); } /* ---------- System architecture on white ---------- */ .theme-thermal .architecture { background-color: var(--paper-bright); border-top: 0; } .theme-thermal .architecture::before { left: auto; right: -9%; top: -10%; width: min(68vw, 900px); height: min(68vw, 900px); border: 1px solid rgba(43, 120, 205, 0.08); background: repeating-radial-gradient(circle, rgba(43, 120, 205, 0.06) 0 1px, transparent 1px 42px); } .theme-thermal .architecture-note { color: var(--ink-dim); font-size: 17px; } .theme-thermal .architecture-route { color: #47617d; } .theme-thermal .architecture-route span { border-color: rgba(14, 102, 198, 0.17); background: rgba(255, 255, 255, 0.7); } .theme-thermal .architecture-route i { color: #0875e1; } .theme-thermal .hero-stack { padding: clamp(18px, 2vw, 30px); color: #eaf2fb; border: 1px solid rgba(119, 184, 245, 0.22); background: radial-gradient(circle at 54% 42%, rgba(24, 104, 197, 0.17), transparent 44%), linear-gradient(155deg, #08192b, #030a12 74%); box-shadow: 0 28px 78px rgba(8, 30, 54, 0.22); } .theme-thermal .stack-wrap::before { background: radial-gradient(52% 46% at 52% 46%, rgba(37, 125, 220, 0.13), transparent 70%); } .theme-thermal .sp-item { color: #8195ad; } .theme-thermal .sp-item:hover { color: #d9e9f8; } .theme-thermal .sp-item.is-active { color: #f2f8ff; border-color: rgba(104, 195, 255, 0.28); background: rgba(18, 106, 201, 0.14); } .theme-thermal .sp-item.is-active i { color: #69d5ff; } .theme-thermal .stack-tags span { color: #9db3ca; } /* ---------- Dark solution rail ---------- */ /* ---------- Company story / pale topology ---------- */ .theme-thermal .value-panel { color: #edf5ff; border-color: rgba(116, 188, 255, 0.22); background: radial-gradient(circle at 8% 10%, rgba(43, 128, 213, 0.2), transparent 34%), linear-gradient(145deg, #0a1b2f, #040c16); box-shadow: 0 32px 90px rgba(10, 35, 61, 0.22); } .theme-thermal .value-panel::before { -webkit-text-stroke-color: rgba(121, 202, 255, 0.07); } .theme-thermal .value-lead { border-color: rgba(116, 188, 255, 0.16); } .theme-thermal .value-kicker { color: #69d5ff; } .theme-thermal .value-lead > p:last-child { color: #aebed0; } /* ---------- Product index on white ---------- */ .theme-thermal .capabilities { background-color: var(--paper-bright); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); } .theme-thermal .cap-list { color: #edf5ff; padding: 0 clamp(18px, 3vw, 38px); border: 1px solid rgba(116, 188, 255, 0.2); background: radial-gradient(circle at 78% 0%, rgba(23, 112, 214, 0.16), transparent 32%), linear-gradient(155deg, #08192b, #030a12 72%); box-shadow: 0 30px 85px rgba(16, 42, 70, 0.18); } .theme-thermal .cap-row { border-color: rgba(116, 188, 255, 0.14); } .theme-thermal .cap-row:hover { background: rgba(38, 128, 224, 0.08); } .theme-thermal .cap-row.is-current { background: linear-gradient(90deg, rgba(38, 128, 224, 0.12), transparent 72%); } .theme-thermal .cap-row.is-current .cap-num { color: #69d5ff; text-shadow: none; } .theme-thermal .cap-title-en { color: #8196ae; } .theme-thermal .cap-desc { color: #aebed0; } .theme-thermal .cap-meta span { color: #8fa5bd; border-color: rgba(116, 188, 255, 0.14); background: rgba(15, 39, 65, 0.48); } .theme-thermal .cap-row:hover .cap-meta span { border-color: rgba(116, 188, 255, 0.32); color: #d3e2f2; } .theme-thermal .cap-arrow { color: #7e94ab; } .theme-thermal .cap-row:hover .cap-arrow { color: #69d5ff; } .theme-thermal .cap-glyph { color: #69d5ff; } .theme-thermal .cap-row::after { background: linear-gradient(90deg, rgba(8, 117, 225, 0), rgba(8, 117, 225, 0.5) 48%, rgba(8, 117, 225, 0)); } /* ---------- Dark validation dashboard ---------- */ .theme-thermal .proof { --text: var(--ink); --text-dim: var(--ink-dim); --text-mute: var(--ink-mute); --line: var(--paper-line); --line-strong: var(--paper-line-strong); color: var(--ink); position: relative; background: radial-gradient(circle at 76% 12%, rgba(17, 105, 204, 0.09), transparent 28%), var(--paper-bright); } .theme-thermal .proof-grid { color: #edf5ff; border-color: rgba(120, 174, 229, 0.2); background: rgba(120, 174, 229, 0.18); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34); } .theme-thermal .proof-card { min-height: 400px; color: #edf5ff; } .theme-thermal .proof-card .proof-desc { color: #aebed0; } .theme-thermal .proof-card .proof-meta { color: #74cfff; border-color: rgba(116, 188, 255, 0.15); } .theme-thermal .proof-card:nth-child(4) { background: linear-gradient(160deg, rgba(11, 35, 61, 0.98), rgba(4, 11, 20, 0.98)); } .theme-thermal .proof-principles { border-color: rgba(113, 177, 238, 0.2); background: rgba(113, 177, 238, 0.2); } /* ---------- Applications on luminous paper ---------- */ .theme-thermal .partners { background-color: var(--paper-blue); background-image: radial-gradient(circle at 86% 80%, rgba(45, 145, 240, 0.1), transparent 28%), linear-gradient(rgba(38, 91, 148, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 91, 148, 0.035) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; } .theme-thermal .partner-list { color: #edf5ff; counter-reset: application; padding: 0 clamp(18px, 3vw, 38px); border: 1px solid rgba(116, 188, 255, 0.2); background: radial-gradient(circle at 86% 0%, rgba(23, 112, 214, 0.16), transparent 34%), linear-gradient(155deg, #08192b, #030a12 72%); box-shadow: 0 30px 85px rgba(16, 42, 70, 0.18); } .theme-thermal .partner-row { position: relative; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); border-color: rgba(116, 188, 255, 0.14); padding-left: clamp(54px, 6vw, 92px); } .theme-thermal .partner-row::before { counter-increment: application; content: "0" counter(application); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 12px; color: #0875e1; } .theme-thermal .partner-row:hover { background: rgba(38, 128, 224, 0.08); } .theme-thermal .partner-row p { color: #aebed0; font-size: 16px; } /* ---------- Dark inquiry ending ---------- */ .theme-thermal .contact { --text: var(--ink); --text-dim: var(--ink-dim); --text-mute: var(--ink-mute); --line: var(--paper-line); --line-strong: var(--paper-line-strong); color: var(--ink); background: radial-gradient(circle at 76% 30%, rgba(20, 108, 211, 0.09), transparent 30%), var(--paper-blue); } .theme-thermal .contact-band { --text: #edf5ff; --text-dim: #aebed0; --text-mute: #8196ae; --line: rgba(116, 188, 255, 0.14); --line-strong: rgba(116, 188, 255, 0.3); color: #edf5ff; border-color: rgba(119, 181, 238, 0.2); background: linear-gradient(110deg, rgba(8, 26, 46, 0.96), rgba(4, 11, 20, 0.98)), var(--panel); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3); } .theme-thermal .contact .btn-primary { background: #1678ef; color: #fff; } .theme-thermal .contact .btn-primary:hover { background: #2b8cff; } .theme-thermal .cond-panel { background: rgba(2, 8, 15, 0.58); border-color: rgba(119, 181, 238, 0.18); } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .theme-thermal .hero::before { background: linear-gradient(180deg, rgba(2, 7, 13, 0.18) 0%, rgba(2, 7, 13, 0.05) 36%, rgba(2, 7, 13, 0.20) 72%, rgba(2, 7, 13, 0.42) 100%), linear-gradient(90deg, rgba(2, 7, 13, 0.24), rgba(2, 7, 13, 0.04)); } .theme-thermal .hero::after { background: linear-gradient(180deg, rgba(2, 7, 13, 0.16), transparent 30%); } .theme-thermal .hero-media { filter: brightness(1.18) saturate(1.05); } .theme-thermal .hero-grid { grid-template-columns: 1fr; } .theme-thermal .hero-stack { padding: 10px; } .theme-thermal .partner-row { grid-template-columns: 1fr; padding-left: 50px; } } @media (max-width: 480px) { .theme-thermal .architecture-note { font-size: 16px; } } /* ============================================================ Continuous page composition Replace isolated black rectangles with one connected tonal field. ============================================================ */ .theme-thermal main { background: var(--paper-bright); } .theme-thermal .architecture, .theme-thermal .capabilities, .theme-thermal .proof, .theme-thermal .partners, .theme-thermal .contact { border-top: 0; border-bottom: 0; } /* Hero dark field dissolves into engineering paper instead of cutting to white. */ .theme-thermal .architecture { background-color: var(--paper-bright); background-image: linear-gradient(180deg, #03080e 0%, #15283a 4%, #8196aa 10%, #d7e2ec 16%, rgba(251, 253, 255, 0.98) 25%), linear-gradient(rgba(38, 91, 148, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 91, 148, 0.035) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; } .theme-thermal .architecture::before { right: -18%; top: 8%; width: min(78vw, 1040px); height: min(78vw, 1040px); border: 0; background: repeating-radial-gradient(circle, rgba(43, 120, 205, 0.06) 0 1px, transparent 1px 46px); mask-image: radial-gradient(circle, #000 0 52%, transparent 78%); } /* The four-layer drawing is no longer a framed black poster. */ .theme-thermal .hero-stack { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; isolation: isolate; } .theme-thermal .hero-stack::before { content: ""; position: absolute; z-index: -1; inset: 9% -8% 5%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(28, 85, 137, 0.16), rgba(28, 85, 137, 0.05) 45%, transparent 74%); filter: blur(18px); } .theme-thermal .stack-wrap { -webkit-mask-image: radial-gradient(ellipse 82% 92% at 50% 50%, #000 58%, rgba(0, 0, 0, 0.82) 72%, transparent 100%); mask-image: radial-gradient(ellipse 82% 92% at 50% 50%, #000 58%, rgba(0, 0, 0, 0.82) 72%, transparent 100%); } .theme-thermal .sp-item { color: #5d7187; } .theme-thermal .sp-item:hover { color: #173b5c; } .theme-thermal .sp-item.is-active { color: #0d3458; border-color: rgba(8, 117, 225, 0.2); background: rgba(255, 255, 255, 0.56); box-shadow: 0 10px 30px rgba(27, 73, 116, 0.08); } .theme-thermal .sp-item.is-active i { color: #0875e1; } .theme-thermal .stack-tags span { color: #516981; } /* Core products become an open technical rail on a full-width tonal transition. */ /* About section rises out of the dark rail gradually. */ /* One deep editorial anchor, with the four values left open on paper. */ .theme-thermal .value-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; gap: clamp(18px, 3vw, 42px); } .theme-thermal .value-panel::before { display: none; } .theme-thermal .value-lead { overflow: hidden; min-height: 520px; border: 0; border-radius: 56px 10px 56px 10px; background: radial-gradient(circle at 10% 8%, rgba(46, 139, 229, 0.25), transparent 38%), linear-gradient(148deg, #102b45, #06111d 72%); box-shadow: 0 34px 85px rgba(19, 53, 82, 0.22); } /* Product index and application index are lines, not dark containers. */ .theme-thermal .capabilities { position: relative; overflow: hidden; background: radial-gradient(ellipse at 104% 52%, rgba(8, 38, 64, 0.18), transparent 34%), linear-gradient(180deg, var(--paper-blue), var(--paper-bright)); } .theme-thermal .cap-list, .theme-thermal .partner-list { padding: 0; color: var(--ink); border: 0; background: transparent; box-shadow: none; } .theme-thermal .cap-list { border-top: 1px solid var(--paper-line-strong); } .theme-thermal .cap-row { border-color: var(--paper-line); background: transparent; } .theme-thermal .cap-row:hover { background: linear-gradient(90deg, rgba(8, 117, 225, 0.075), transparent 72%); } .theme-thermal .cap-row.is-current { background: linear-gradient(90deg, rgba(8, 117, 225, 0.095), transparent 72%); } .theme-thermal .cap-row.is-current .cap-num, .theme-thermal .cap-row:hover .cap-num { color: #0875e1; } .theme-thermal .cap-title { color: #102c47; } .theme-thermal .cap-title-en { color: #7b8da1; } .theme-thermal .cap-desc { color: #4d6278; } .theme-thermal .cap-meta span { color: #5b7188; border-color: rgba(16, 72, 126, 0.13); background: rgba(255, 255, 255, 0.5); } .theme-thermal .cap-row:hover .cap-meta span { color: #214c72; border-color: rgba(8, 117, 225, 0.24); } .theme-thermal .cap-arrow { color: #75889d; } .theme-thermal .cap-row:hover .cap-arrow { color: #0875e1; } /* Manufacturing flow reads as an open sequence rather than a 3x2 black wall. */ .theme-thermal .proof { overflow: hidden; background: radial-gradient(ellipse at 100% 42%, rgba(20, 76, 126, 0.14), transparent 34%), radial-gradient(ellipse at 0% 88%, rgba(80, 161, 230, 0.1), transparent 31%), linear-gradient(180deg, var(--paper-bright), #edf4fa); } .theme-thermal .proof-principles { gap: 16px; border: 0; background: transparent; } .theme-thermal .proof-principles span { min-height: 72px; padding: 14px 0; border-top: 1px solid var(--paper-line-strong); background: transparent; } .theme-thermal .proof-principles b { color: #0875e1; } .theme-thermal .proof-principles em { color: #294761; } .theme-thermal .proof-grid { gap: 0 clamp(24px, 4vw, 58px); overflow: visible; color: var(--ink); border: 0; background: transparent; box-shadow: none; } .theme-thermal .proof-card, .theme-thermal .proof-card:nth-child(4), .theme-thermal .proof-card:hover { min-height: 350px; padding: clamp(28px, 3vw, 42px) 0; color: var(--ink); border-top: 1px solid var(--paper-line-strong); background: transparent; } .theme-thermal .proof-card .proof-val { color: #173b5c; } .theme-thermal .proof-card .proof-name { color: #122e48; } .theme-thermal .proof-card .proof-desc { color: #4d6278; } .theme-thermal .proof-card .proof-meta { color: #2679bd; border-color: var(--paper-line); } .theme-thermal .partners { position: relative; overflow: hidden; background-color: var(--paper-blue); background-image: radial-gradient(ellipse at -6% 44%, rgba(7, 38, 65, 0.13), transparent 32%), linear-gradient(rgba(38, 91, 148, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 91, 148, 0.035) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; } .theme-thermal .partner-list { border-top: 1px solid var(--paper-line-strong); } .theme-thermal .partner-row { color: var(--ink); border-color: var(--paper-line); } .theme-thermal .partner-row:hover { background: linear-gradient(90deg, rgba(8, 117, 225, 0.07), transparent 72%); } .theme-thermal .partner-row::before { color: #0875e1; } .theme-thermal .partner-row h3 { color: #122e48; } .theme-thermal .partner-row p { color: #4d6278; } /* The final CTA becomes the page transition into the footer, not another card. */ .theme-thermal .contact { color: #edf5ff; background: radial-gradient(ellipse at 84% 56%, rgba(31, 108, 181, 0.2), transparent 36%), linear-gradient(180deg, var(--paper-blue) 0%, #cbd8e3 8%, #71879a 17%, #2d465d 27%, #102538 41%, #071522 64%, #050e18 100%); } .theme-thermal .contact-band { color: #edf5ff; border: 0; background: transparent; box-shadow: none; } .theme-thermal .contact .eyebrow, .theme-thermal .contact-mail { color: #aebed0; } .theme-thermal .cond-panel { border-color: rgba(153, 210, 255, 0.2); border-radius: 32px 8px 32px 8px; background: rgba(4, 17, 30, 0.34); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14); } .theme-thermal .footer { border-color: rgba(122, 180, 230, 0.1); background: #050e18; } @media (max-width: 768px) { .theme-thermal .architecture { background-image: linear-gradient(180deg, #03080e 0%, #6f8498 7%, #e7eef5 14%, rgba(251, 253, 255, 0.98) 23%), linear-gradient(rgba(38, 91, 148, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 91, 148, 0.035) 1px, transparent 1px); } .theme-thermal .stack-wrap { -webkit-mask-image: radial-gradient(ellipse 94% 94% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 94% 94% at 50% 50%, #000 62%, transparent 100%); } .theme-thermal .value-lead { min-height: 430px; } .theme-thermal .proof-grid { gap: 0 24px; } }