/* ========================================================================== 念安科技官网 v3.0 · 设计系统 浅蓝玻璃拟态（Light-blue Glassmorphism）+ 蓝白科技 —— 主体明亮通透，深蓝仅用于 Hero 点缀 / CTA / 页脚 压场 ========================================================================== */ /* ---------- 1. 设计令牌 ---------- */ :root{ /* 蓝阶 */ --blue:#0b5cff; --blue2:#2f7dff; --blue3:#6aa4ff; --blue4:#b7d2ff; --blue5:#e2edff; --navy:#0a2f6e; --navy2:#06193b; --accent:#0090e8; /* 中性 */ --ink:#0d1b2e; --dim:#5a6b83; --dim2:#8b9cb4; --dim3:#aab9cc; --line:#dce8fa; --line2:#c7dbf7; /* 玻璃 */ --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.9); --glass-line:rgba(255,255,255,.85); --blur:blur(20px) saturate(150%); /* 阴影 */ --sd:0 16px 42px rgba(11,92,255,.10); --sd-hi:0 26px 62px rgba(11,92,255,.18); --sd-in:inset 0 1px 0 rgba(255,255,255,.92); /* 尺寸 */ --r:14px; --r-sm:10px; --r-lg:22px; --nav-h:76px; --sub-h:54px; --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; } /* ---------- 2. 基础 ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif; background:#f7faff;color:var(--ink);line-height:1.95;overflow-x:hidden; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; padding-top:var(--nav-h); } a{text-decoration:none;color:inherit} ul{list-style:none} img{max-width:100%;display:block} button{font-family:inherit} .wrap{width:min(1240px,90%);margin:0 auto} ::selection{background:rgba(11,92,255,.18)} /* 全局浅蓝渐变网格底纹（多彩版 · 让毛玻璃有东西可"磨"） */ body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(820px 620px at 3% -8%,rgba(11,92,255,.24),transparent 60%), radial-gradient(680px 520px at 101% 2%,rgba(0,196,255,.20),transparent 60%), radial-gradient(780px 580px at 86% 38%,rgba(112,92,255,.15),transparent 62%), radial-gradient(900px 640px at 8% 72%,rgba(0,144,232,.16),transparent 62%), radial-gradient(1000px 720px at 52% 108%,rgba(61,130,255,.20),transparent 64%), linear-gradient(180deg,#f7fbff 0%,#edf5ff 44%,#f4faff 100%)} body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6; background-image:linear-gradient(rgba(11,92,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(11,92,255,.055) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(circle at 50% 26%,#000 8%,transparent 76%); mask-image:radial-gradient(circle at 50% 26%,#000 8%,transparent 76%)} /* 滚动进度条 */ .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:300; background:linear-gradient(90deg,#0b5cff,#6aa4ff);box-shadow:0 0 14px rgba(11,92,255,.55); transition:width .1s linear} /* ---------- 3. 头部导航 ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h); background:rgba(255,255,255,.72);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border-bottom:1px solid rgba(199,219,247,.75);transition:background .3s,box-shadow .3s} header.solid{background:rgba(255,255,255,.92);box-shadow:0 10px 34px rgba(13,27,46,.07)} header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(11,92,255,.5),transparent)} .nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);position:relative} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand .logo{width:40px;height:40px;filter:drop-shadow(0 6px 14px rgba(11,92,255,.28))} .brand .name b{display:block;font-size:19px;font-weight:400;letter-spacing:4px;color:var(--navy);line-height:1.2} .brand .name span{display:block;font-size:9px;letter-spacing:2px;color:var(--dim2)} /* 一级导航 */ .nav>nav>ul{display:flex;align-items:center;gap:2px} .nav>nav>ul>li{position:relative} .nav>nav>ul>li>a{position:relative;display:flex;align-items:center;gap:6px; padding:10px 16px;font-size:14.5px;color:var(--ink);transition:.25s;white-space:nowrap;border-radius:8px} .nav>nav>ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--blue3));transform:scaleX(0);transition:transform .28s ease} .nav>nav>ul>li>a:hover,.nav>nav>ul>li>a.on{color:var(--blue)} .nav>nav>ul>li>a:hover::after,.nav>nav>ul>li>a.on::after{transform:scaleX(1)} .nav>nav>ul>li>a.on{font-weight:600} /* 二级菜单（悬浮展开） */ .caret{width:9px;height:9px;flex:none;margin-top:-3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg);transition:transform .28s;opacity:.65} .has-sub:hover>.caret,.has-sub.open>.caret{transform:rotate(225deg);margin-top:3px} .sub{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,10px); min-width:300px;padding:10px;border-radius:var(--r);z-index:10; background:rgba(255,255,255,.9);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-line);box-shadow:0 26px 60px rgba(11,92,255,.18); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s,transform .26s,visibility .26s} .sub::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px; background:rgba(255,255,255,.94);border-left:1px solid var(--glass-line);border-top:1px solid var(--glass-line);transform:rotate(45deg)} .sub::after{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--blue3),transparent)} .has-sub:hover>.sub,.has-sub:focus-within>.sub,.has-sub.open>.sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .sub a{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);transition:.25s} .sub a+a{margin-top:2px} .sub a:hover{background:linear-gradient(120deg,rgba(11,92,255,.09),rgba(106,164,255,.06))} .sub a i{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,rgba(11,92,255,.16),rgba(106,164,255,.06)); border:1px solid rgba(106,164,255,.4);color:var(--blue);transition:.25s} .sub a:hover i{background:linear-gradient(150deg,var(--blue2),var(--blue));color:#fff;border-color:transparent} .sub a i svg{width:17px;height:17px} .sub a b{display:block;font-size:14px;font-weight:400;letter-spacing:2px;color:var(--navy);line-height:1.5} .sub a span{display:block;font-size:11.5px;color:var(--dim2);line-height:1.7;letter-spacing:.5px} .sub a:hover b{color:var(--blue)} #menuBtn{display:none;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:8px; color:var(--navy);font-size:18px;line-height:1;padding:8px 12px;cursor:pointer;transition:.25s} #menuBtn:hover{border-color:var(--blue3);color:var(--blue)} /* ---------- 4. 页内锚点导航 ---------- */ .subnav{position:sticky;top:var(--nav-h);z-index:120;height:var(--sub-h); background:rgba(255,255,255,.66);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border-bottom:1px solid rgba(199,219,247,.7)} .subnav .wrap{display:flex;align-items:center;gap:6px;height:var(--sub-h);overflow-x:auto;scrollbar-width:none} .subnav .wrap::-webkit-scrollbar{display:none} .subnav .sn-label{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim3);padding-right:14px;margin-right:8px;border-right:1px solid var(--line)} .subnav a{position:relative;flex:none;padding:7px 15px;font-size:13.5px;color:var(--dim);border-radius:20px;white-space:nowrap;transition:.25s;border:1px solid transparent} .subnav a:hover{color:var(--blue);background:rgba(11,92,255,.06)} .subnav a.on{color:var(--blue);font-weight:600;background:linear-gradient(120deg,rgba(11,92,255,.12),rgba(106,164,255,.08));border-color:rgba(106,164,255,.42)} /* ---------- 5. 通用骨架 ---------- */ .sec{position:relative;padding:100px 0} .sec.tight{padding:76px 0} .sec>.wrap{position:relative;z-index:2} .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)} .reveal.show{opacity:1;transform:none} /* 标题体系 */ .sec-title{margin-bottom:46px;max-width:900px} .sec-title.center{margin-left:auto;margin-right:auto;text-align:center} .sec-title .en{display:flex;align-items:center;gap:12px;font-family:var(--mono); font-size:11.5px;letter-spacing:4px;color:var(--blue2);text-transform:uppercase} .sec-title .en::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue3));flex:none} .sec-title.center .en{justify-content:center} .sec-title.center .en::after{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue3),var(--blue));flex:none} .sec-title h2{font-size:clamp(25px,3.2vw,42px);font-weight:300;letter-spacing:5px;color:var(--ink);margin-top:14px;line-height:1.4} .sec-title h2 em{font-style:normal;font-size:.46em;letter-spacing:2px;color:var(--blue3);margin-left:14px;vertical-align:middle;font-family:var(--mono)} .sec-title .rule{width:60px;height:2px;border-radius:2px;margin-top:22px; background:linear-gradient(90deg,var(--blue) 0%,var(--blue3) 52%,transparent 100%)} .sec-title.center .rule{margin-left:auto;margin-right:auto} .sec-title p.desc{color:var(--dim);font-size:14.5px;max-width:840px;margin-top:18px} .sec-title.center p.desc{margin-left:auto;margin-right:auto} .idx{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--blue3);margin-bottom:6px} /* 玻璃卡片 */ .glass{background:linear-gradient(155deg,var(--glass-hi) 0%,var(--glass) 100%); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-line);border-radius:var(--r); box-shadow:var(--sd),var(--sd-in)} .card{position:relative;overflow:hidden;padding:30px 26px;border-radius:var(--r); background:linear-gradient(155deg,var(--glass-hi) 0%,var(--glass) 100%); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-line);box-shadow:var(--sd),var(--sd-in); transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s} .card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px 2px 0 0; background:linear-gradient(90deg,var(--blue),var(--blue3),transparent);background-size:220% 100%; opacity:.55;transition:opacity .38s} .card::after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,rgba(11,92,255,.16),transparent 70%);opacity:0;transition:.45s} .card:hover{transform:translateY(-8px);box-shadow:var(--sd-hi),var(--sd-in);border-color:rgba(106,164,255,.55)} .card:hover::before{opacity:1} .card:hover::after{opacity:1} .card .no{font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--blue3)} .card .ico{position:relative;width:54px;height:54px;margin:18px 0 18px;border-radius:13px; display:flex;align-items:center;justify-content:center;color:var(--blue); background:linear-gradient(150deg,rgba(11,92,255,.16),rgba(106,164,255,.05)); border:1px solid rgba(106,164,255,.42);transition:.35s} .card:hover .ico{background:linear-gradient(150deg,var(--blue2),var(--blue));color:#fff;border-color:transparent; box-shadow:0 12px 26px rgba(11,92,255,.3)} .card h3,.card h4{font-weight:400;color:var(--navy)} .card h4{font-size:16.5px;letter-spacing:2px;margin-bottom:9px} .card p{font-size:13.2px;color:var(--dim);line-height:1.9} .card .en-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--dim3);margin-top:6px} /* 栅格 */ .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)} /* 数字行 */ .stat-bar{display:grid;grid-template-columns:repeat(5,1fr);border-radius:var(--r);overflow:hidden} .stat-bar>div{padding:30px 14px;text-align:center;position:relative;transition:.3s} .stat-bar>div+div::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(180deg,transparent,var(--line2),transparent)} .stat-bar>div::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2px; border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue3));transition:.4s} .stat-bar>div:hover{background:rgba(232,240,255,.6)} .stat-bar>div:hover::after{width:62%} .stat-bar b{display:block;font-family:var(--mono);font-size:clamp(22px,2.4vw,31px);font-weight:400;color:var(--navy);letter-spacing:.5px} .stat-bar b em{font-style:normal;font-size:14px;color:var(--accent);margin-left:2px} .stat-bar span{display:block;font-size:12.5px;color:var(--dim);letter-spacing:1px} /* 按钮 */ .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 32px;font-size:14.5px;letter-spacing:3px; border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.28s;line-height:1.4} .btn.main{background:linear-gradient(120deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 14px 32px rgba(11,92,255,.3)} .btn.main:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(11,92,255,.4);background:linear-gradient(120deg,var(--navy),var(--blue))} .btn.ghost{background:rgba(255,255,255,.66);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border-color:rgba(106,164,255,.6);color:var(--blue)} .btn.ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(11,92,255,.18)} .btn.sm{padding:10px 22px;font-size:13.5px;letter-spacing:2px;border-radius:8px} .link-entry{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:12px 22px;border-radius:10px; font-size:13.5px;letter-spacing:2px;color:var(--blue);transition:.28s; background:rgba(255,255,255,.6);border:1px solid rgba(106,164,255,.5);backdrop-filter:var(--blur)} .link-entry small{font-family:var(--mono);font-size:10.5px;color:var(--blue3);letter-spacing:1px} .link-entry:hover{background:linear-gradient(120deg,var(--blue),var(--blue2));color:#fff;border-color:transparent; box-shadow:0 16px 34px rgba(11,92,255,.3)} .link-entry:hover small{color:rgba(255,255,255,.8)} /* 标签 chip */ .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .tags span{position:relative;padding:8px 18px 8px 30px;font-size:12.5px;color:var(--blue);border-radius:20px; background:rgba(255,255,255,.7);border:1px solid rgba(106,164,255,.45);backdrop-filter:var(--blur);transition:.3s} .tags span::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:1px; background:var(--blue2);box-shadow:0 0 8px rgba(11,92,255,.7);transition:.3s} .tags span:hover{background:#fff;box-shadow:0 10px 24px rgba(11,92,255,.16);transform:translateY(-2px)} /* ---------- 6. HERO（浅色玻璃 + 右侧图框） ---------- */ .hero{position:relative;overflow:hidden;padding:56px 0 84px} .hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-glow::before{content:"";position:absolute;width:520px;height:520px;left:-140px;top:-120px;border-radius:50%; background:radial-gradient(circle,rgba(11,92,255,.2),transparent 68%);animation:floatY 12s ease-in-out infinite} .hero-glow::after{content:"";position:absolute;width:440px;height:440px;right:-120px;bottom:-160px;border-radius:50%; background:radial-gradient(circle,rgba(0,144,232,.18),transparent 68%);animation:floatY 15s ease-in-out infinite reverse} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.6vw,64px);align-items:center} .hero.flip .hero-grid{grid-template-columns:.94fr 1.06fr} .hero.flip .hero-txt{order:2} .hero.flip .hero-art{order:1} .crumb{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim2);letter-spacing:1px;margin-bottom:22px} .crumb a:hover{color:var(--blue)} .crumb i{width:5px;height:5px;border-radius:1px;background:var(--blue3);transform:rotate(45deg);font-style:normal;flex:none} .en-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:5px; color:var(--blue);text-transform:uppercase;padding-bottom:12px;position:relative} .en-label::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--blue3),transparent)} .hero h1{font-size:clamp(30px,4.4vw,58px);font-weight:200;letter-spacing:7px;line-height:1.34;color:var(--navy);margin-top:20px} .hero h1 b{font-weight:400;background:linear-gradient(120deg,var(--blue),var(--blue2) 60%,var(--accent)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero h1 .h1-sub{display:block;font-size:.4em;font-weight:400;letter-spacing:4px;line-height:1.75;margin-top:14px; color:var(--blue);-webkit-text-fill-color:var(--blue)} .hero .slogan{display:inline-block;margin-top:18px;padding:8px 20px;border-radius:20px;font-size:13.5px;letter-spacing:3px; color:var(--blue);background:rgba(255,255,255,.72);border:1px solid rgba(106,164,255,.5);backdrop-filter:var(--blur)} .hero .sub{margin-top:22px;font-size:clamp(14px,1.4vw,16.5px);letter-spacing:2px;color:var(--dim);max-width:620px;line-height:2.05} .hero .btns{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap} /* Hero 右侧图框 */ .hero-art{position:relative;padding:12px;border-radius:var(--r-lg); background:linear-gradient(155deg,rgba(255,255,255,.8),rgba(255,255,255,.44)); border:1px solid var(--glass-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); box-shadow:0 30px 70px rgba(11,92,255,.2),var(--sd-in)} .hero-art .frame{position:relative;overflow:hidden;border-radius:calc(var(--r-lg) - 10px);aspect-ratio:16/10;background:var(--blue5)} .hero-art .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease} .hero-art:hover .frame img{transform:scale(1.045)} .hero-art .frame::after{content:"";position:absolute;inset:0; background:linear-gradient(200deg,rgba(11,92,255,.2) 0%,rgba(11,92,255,0) 52%), linear-gradient(0deg,rgba(6,25,59,.3),transparent 46%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} .hero-art .corner{position:absolute;width:26px;height:26px;border:2px solid var(--blue3);opacity:.85} .hero-art .corner.tl{top:16px;left:16px;border-right:0;border-bottom:0;border-radius:6px 0 0 0} .hero-art .corner.br{bottom:16px;right:16px;border-left:0;border-top:0;border-radius:0 0 6px 0} .art-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:22px; font-size:12px;letter-spacing:1px;color:var(--navy);white-space:nowrap; background:rgba(255,255,255,.86);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-line);box-shadow:0 14px 34px rgba(11,92,255,.16)} .art-chip i{width:7px;height:7px;border-radius:50%;background:var(--blue2);box-shadow:0 0 10px rgba(11,92,255,.9); font-style:normal;animation:blip 2.4s ease-in-out infinite} .art-chip.c1{top:26px;left:-26px;animation:floatY 6.5s ease-in-out infinite} .art-chip.c2{bottom:64px;right:-22px;animation:floatY 7.5s ease-in-out infinite .6s} .art-chip.c3{bottom:-16px;left:34px;animation:floatY 8.5s ease-in-out infinite 1.2s} /* Hero 数据条 */ .hero-stats{position:relative;z-index:2;margin-top:56px} .hero-stats .stat-bar{background:linear-gradient(155deg,rgba(255,255,255,.84),rgba(255,255,255,.56)); border:1px solid var(--glass-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur); box-shadow:var(--sd),var(--sd-in)} /* ---------- 7. 组件：分屏图文 ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(26px,4vw,60px)} .split.rev .sp-img{order:2} .split .sp-img{position:relative;padding:10px;border-radius:var(--r-lg); background:linear-gradient(155deg,rgba(255,255,255,.82),rgba(255,255,255,.46)); border:1px solid var(--glass-line);backdrop-filter:var(--blur);box-shadow:0 26px 60px rgba(11,92,255,.17),var(--sd-in)} .split .sp-img .in{position:relative;overflow:hidden;border-radius:calc(var(--r-lg) - 8px);aspect-ratio:3/2;background:var(--blue5)} .split .sp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s ease} .split:hover .sp-img img{transform:scale(1.04)} .split .sp-img .in::after{content:"";position:absolute;inset:0; background:linear-gradient(200deg,rgba(11,92,255,.16),transparent 54%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)} .pro-txt .badge-line{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:3px; color:var(--blue2);margin-bottom:16px;text-transform:uppercase} .pro-txt .badge-line::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)} /* 品牌荣耀「知识产权」证书卡片标题行：mono 前缀 + 弹性线 + 动态数量 + 单位 */ .cert-line{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:3px; color:var(--blue2);text-transform:uppercase} .cert-line::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)} .cert-line b{font-size:24px;font-weight:400;color:var(--navy);letter-spacing:.5px} .cert-line em{font-style:normal;font-size:13px;color:var(--accent);margin-left:2px} .pro-txt h3{font-size:clamp(22px,2.6vw,34px);font-weight:300;letter-spacing:3px;line-height:1.5;color:var(--navy)} .pro-txt h3 em{font-style:normal;color:var(--blue2)} .pro-txt .en-name{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--dim3);margin:10px 0 20px} .pro-txt p.body{color:var(--dim);font-size:14.4px;text-align:justify;line-height:2.05} .pro-txt p.body b{color:var(--blue);font-weight:600} /* 特征列表 */ .feat-list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px} .feat-list li{position:relative;display:flex;gap:12px;padding:12px 14px 12px 18px;border-radius:10px; font-size:13.3px;color:var(--ink);background:rgba(255,255,255,.56);border:1px solid rgba(220,232,250,.9);transition:.3s} .feat-list li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--blue2)} .feat-list li:hover{background:#fff;box-shadow:0 12px 28px rgba(11,92,255,.13);transform:translateX(3px)} .feat-list li i{flex:none;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--blue3);letter-spacing:1px;margin-top:3px} .feat-list li span small{display:block;font-size:11.5px;color:var(--dim2);margin-top:2px} /* ---------- 8. 组件：时间轴（品牌大事记） ---------- */ .tl{position:relative;padding:8px 0} .tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:2px; background:linear-gradient(180deg,transparent,rgba(11,92,255,.42) 8%,rgba(106,164,255,.5) 50%,rgba(11,92,255,.42) 92%,transparent)} .tl-item{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;margin-bottom:22px} .tl-item:last-child{margin-bottom:0} .tl-item .tl-card{position:relative;padding:24px 26px;border-radius:var(--r); background:linear-gradient(155deg,rgba(255,255,255,.86),rgba(255,255,255,.6)); border:1px solid var(--glass-line);backdrop-filter:var(--blur);box-shadow:var(--sd),var(--sd-in); transition:transform .36s,box-shadow .36s,border-color .36s} .tl-item .tl-card:hover{transform:translateY(-6px);box-shadow:var(--sd-hi),var(--sd-in);border-color:rgba(106,164,255,.55)} .tl-item .tl-card h4{font-size:15.5px;font-weight:400;letter-spacing:2px;color:var(--navy);margin-bottom:8px} .tl-item .tl-card p{font-size:13.2px;color:var(--dim);line-height:1.95} .tl-item:nth-of-type(odd) .tl-card{grid-column:1} .tl-item:nth-of-type(even) .tl-card{grid-column:3} .tl-item .tl-node{grid-column:2;position:relative;display:flex;align-items:center;justify-content:center} .tl-item .tl-node b{position:relative;z-index:2;display:flex;align-items:center;justify-content:center; width:78px;height:78px;border-radius:50%;font-family:var(--mono);font-size:16px;font-weight:400;color:#fff;letter-spacing:1px; background:linear-gradient(140deg,var(--blue2),var(--blue));box-shadow:0 14px 30px rgba(11,92,255,.34)} .tl-item:nth-of-type(even) .tl-node b{background:linear-gradient(140deg,var(--blue3),var(--blue2))} .tl-item .tl-node::before{content:"";position:absolute;width:78px;height:78px;border-radius:50%; border:1px solid rgba(106,164,255,.6);animation:pulseRing 3.6s ease-in-out infinite} .tl-item:nth-of-type(even) .tl-card::after{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px; width:14px;height:14px;background:rgba(255,255,255,.92);border-left:1px solid var(--glass-line); border-bottom:1px solid var(--glass-line);transform:rotate(45deg)} .tl-item:nth-of-type(odd) .tl-card::after{content:"";position:absolute;right:-7px;top:50%;margin-top:-7px; width:14px;height:14px;background:rgba(255,255,255,.92);border-right:1px solid var(--glass-line); border-top:1px solid var(--glass-line);transform:rotate(45deg)} /* 「节点之间的内容」：副标题留空时不生成节点圆点，渲染成通栏说明块（