/* ===================================================================== 易改特智能 · 企业官网首页样式 home.css —— 品牌 token 与 styles.css 保持一致(主蓝 #1c4e8a / 橙 #c2410c / PingFang SC),不另起一套配色。收口时若要单一源,可抽出 tokens.css 让 index.html 与 home.html 共用。此处先镜像同值。 ===================================================================== */ :root{ --bg:#ffffff; --bg-alt:#f4f6f9; /* 交替区块底色 */ --canvas:#ffffff; --card:#ffffff; --ink:#1c2127; --ink-soft:#5b6470; --ink-faint:#9aa3af; --line:#e3e6ea; --line-strong:#cdd2d9; --brand:#1c4e8a; /* 易改特主蓝 */ --brand-hi:#163f70; --brand-soft:#e8f0f9; --accent:#c2410c; /* 易改特橙(点睛) */ --accent-soft:#fbe9e0; --ok:#15803d; --shadow:0 1px 2px rgba(20,30,45,.06),0 8px 24px rgba(20,30,45,.06); --shadow-pop:0 10px 34px rgba(20,30,45,.14); --radius-sm:0.5rem; --radius-md:0.85rem; --radius-lg:1.25rem; --maxw:80rem; /* 1280px 内容最大宽(大屏更饱满,又不过宽伤可读)*/ } [data-theme="dark"]{ --bg:#15181d; --bg-alt:#1b1f25; --canvas:#1c2127; --card:#22272e; --ink:#e6e9ed; --ink-soft:#9aa3af; --ink-faint:#6b7480; --line:#2e353d; --line-strong:#3a424c; --brand:#5b9bd5; --brand-hi:#7db0e0; --brand-soft:#1e2c3c; --accent:#fb923c; --accent-soft:#2a2016; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shadow-pop:0 10px 34px rgba(0,0,0,.5); } *{box-sizing:border-box;} /* ★hidden 必须真隐藏:.model-card/.pd-dims 等设了 display:flex 会盖过浏览器默认的 [hidden]{display:none},导致筛选设了 hidden 仍显示。这条 !important 让隐藏永远生效。 */ [hidden]{display:none !important;} html{scroll-behavior:smooth;} body{ margin:0; font-family:"PingFang SC","Microsoft YaHei",-apple-system,system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} section{scroll-margin-top:5rem;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;} /* 语言切换:默认显示中文,加 .lang-en 到 时切英文 */ [data-en]{display:none;} html.lang-en [data-zh]{display:none;} html.lang-en [data-en]{display:inline;} html.lang-en [data-en].block{display:block;} /* 占位标记:提醒 owner 这块要替换真料 */ .ph{ display:inline-block;font-size:0.7rem;font-weight:700;letter-spacing:.03em; color:var(--accent);background:var(--accent-soft); border:1px dashed var(--accent);border-radius:999px; padding:.1rem .55rem;margin-left:.5rem;vertical-align:middle; } /* ============ 顶栏导航 ============ */ .nav{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); } .nav-inner{ max-width:var(--maxw);margin:0 auto;padding:.7rem 1.5rem; display:flex;align-items:center;gap:1.25rem; } .brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0;} .brand img{height:2.2rem;width:auto;} .brand-name{font-weight:800;font-size:1.05rem;letter-spacing:.01em;} .brand-name small{ display:block;font-size:.62rem;font-weight:600;color:var(--ink-faint); letter-spacing:.18em;line-height:1;margin-top:1px; } .nav-links{display:flex;gap:1.4rem;margin-left:1rem;} .nav-links a{ font-size:.95rem;color:var(--ink-soft);font-weight:600; padding:.2rem 0;border-bottom:2px solid transparent;transition:.15s; } .nav-links a:hover{color:var(--brand);} .nav-tools{margin-left:auto;display:flex;align-items:center;gap:.6rem;} .lang-btn,.theme-btn{ border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft); border-radius:999px;padding:.35rem .7rem;font-size:.82rem;font-weight:700; cursor:pointer;line-height:1;transition:.15s; } .lang-btn:hover,.theme-btn:hover{border-color:var(--brand);color:var(--brand);} .nav-cta{ background:var(--accent);color:#fff;border:none;border-radius:999px; padding:.5rem 1.1rem;font-size:.9rem;font-weight:800;cursor:pointer; box-shadow:var(--shadow);transition:.15s;white-space:nowrap; } .nav-cta:hover{filter:brightness(1.06);transform:translateY(-1px);} /* 移动端汉堡菜单 + 抽屉(单一实现:home.js 动态注入,全站共用;桌面隐藏,≤900px 启用)*/ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px; width:2.3rem;height:2.3rem;padding:0 .5rem;cursor:pointer; border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);} .nav-toggle span{display:block;height:2px;background:var(--ink-soft);border-radius:2px;transition:.22s;} .nav-drawer{display:none;} @media(max-width:900px){ .nav-toggle{display:inline-flex;} .nav-tools .nav-cta{display:none;} /* 顶栏 CTA 收进抽屉,腾出空间 */ .nav-drawer{display:block;max-height:0;overflow:hidden;background:var(--bg); border-top:1px solid transparent;transition:max-height .28s ease,border-color .28s;} html.nav-open .nav-drawer{max-height:82vh;overflow-y:auto;border-top-color:var(--line);} .nav-drawer-links{display:flex;flex-direction:column;padding:.4rem 1.5rem;margin:0;} .nav-drawer-links a{padding:.9rem 0;font-size:1.02rem;font-weight:700;color:var(--ink); border-bottom:1px solid var(--line);} .nav-drawer-cta{display:block;text-align:center;margin:1rem 1.5rem 1.4rem; background:var(--accent);color:#fff;border-radius:999px;padding:.85rem;font-weight:800;} html.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);} html.nav-open .nav-toggle span:nth-child(2){opacity:0;} html.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} } /* ============ Hero ============ */ .hero{ position:relative;overflow:hidden; background: radial-gradient(120% 90% at 80% -10%,var(--brand-soft) 0%,transparent 55%), linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%); border-bottom:1px solid var(--line); } .hero-inner{ max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.5rem 3rem; display:grid;grid-template-columns:1.05fr 1.15fr;gap:2.5rem;align-items:center; } .hero-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.8rem;font-weight:800;color:var(--brand); background:var(--brand-soft);border-radius:999px;padding:.35rem .85rem; letter-spacing:.02em; } .hero h1{ font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.18;margin:1.1rem 0 0; font-weight:900;letter-spacing:-.01em; } .hero h1 .hl{color:var(--brand);} .hero-sub{font-size:1.1rem;color:var(--ink-soft);margin:1rem 0 0;max-width:34ch;} .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;} .btn-primary,.btn-ghost{ display:inline-flex;align-items:center;gap:.5rem; border-radius:999px;padding:.8rem 1.5rem;font-size:1rem;font-weight:800; cursor:pointer;transition:.15s;border:2px solid transparent; } .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow);} .btn-primary:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:var(--shadow-pop);} .btn-ghost{background:transparent;color:var(--brand);border-color:var(--line-strong);} .btn-ghost:hover{border-color:var(--brand);background:var(--brand-soft);} .hero-trust{ margin-top:1.6rem;font-size:.85rem;color:var(--ink-faint); display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; } .hero-trust b{color:var(--ink-soft);font-weight:800;} .hero-art{position:relative;} .hero-art img{ width:100%;filter:drop-shadow(0 24px 40px rgba(20,30,45,.16)); } /* ============ 智能诊断差异化带(C位)============ */ .diag{ background:linear-gradient(135deg,var(--brand) 0%,var(--brand-hi) 100%); color:#fff;position:relative;overflow:hidden; } .diag::after{ content:"";position:absolute;inset:0; background:radial-gradient(80% 120% at 90% 10%,rgba(255,255,255,.12) 0%,transparent 50%); pointer-events:none; } .diag-inner{ max-width:var(--maxw);margin:0 auto;padding:3.2rem 1.5rem; display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center; position:relative;z-index:1; } .diag-tag{ display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.04em; background:rgba(255,255,255,.16);border-radius:999px;padding:.35rem .85rem; } .diag h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:1rem 0 0;font-weight:900;line-height:1.25;} .diag p{font-size:1.05rem;color:rgba(255,255,255,.88);margin:1rem 0 0;max-width:44ch;} .diag-steps{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 0;} .diag-step{ background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-sm);padding:.55rem .85rem;font-size:.9rem;font-weight:700; display:flex;align-items:center;gap:.45rem; } .diag-step span{ width:1.4rem;height:1.4rem;border-radius:50%;background:var(--accent); display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900; } .diag .btn-primary{margin-top:1.7rem;background:#fff;color:var(--brand);} .diag .btn-primary:hover{background:#fff;filter:none;color:var(--brand-hi);} .diag-shot{ border-radius:var(--radius-md);overflow:hidden; border:6px solid rgba(255,255,255,.9);box-shadow:var(--shadow-pop); transform:rotate(-1.5deg); } .diag-shot img{width:100%;} .diag-shot-cap{ background:#111;color:#fff;font-size:.78rem;padding:.5rem .8rem; display:flex;align-items:center;gap:.4rem;transform:rotate(0); } .diag-shot-cap b{color:var(--accent);} /* ============ 通用区块标题 ============ */ .sec{padding:3.5rem 0;} .sec.alt{background:var(--bg-alt);} .sec-head{text-align:center;max-width:42rem;margin:0 auto 2.2rem;} /* 靠左变体(产品选型板块用)*/ .sec-head.sec-head-left{text-align:left;max-width:none;margin:0 0 1.6rem;} .sec-head .kicker{ font-size:.82rem;font-weight:800;color:var(--accent);letter-spacing:.08em;text-transform:uppercase; } .sec-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.5rem 0 0;font-weight:900;} .sec-head p{color:var(--ink-soft);margin:.7rem 0 0;font-size:1.02rem;} /* ============ 产品 + 选型(数据驱动)============ */ .filter-bar{ display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 auto 1.8rem; } .filter-bar.filter-bar-left{justify-content:flex-start;} .filter-btn{ border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft); border-radius:999px;padding:.5rem 1.05rem;font-size:.9rem;font-weight:700; cursor:pointer;transition:.15s;font-family:inherit; } .filter-btn:hover{border-color:var(--brand);color:var(--brand);} .filter-btn.is-active{background:var(--brand);border-color:var(--brand);color:#fff;} .model-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem; } .model-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow);transition:.18s; display:flex;flex-direction:column; } .model-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop);border-color:var(--brand-soft);} .model-img{ height:9.5rem;background: radial-gradient(65% 65% at 50% 42%,var(--brand-soft) 0%,transparent 72%); display:flex;align-items:center;justify-content:center;padding:.7rem; } .model-img img{max-height:100%;width:auto;object-fit:contain; filter:drop-shadow(0 8px 14px rgba(20,30,45,.16));} .model-noimg{ font-size:.95rem;font-weight:800;color:var(--ink-faint);letter-spacing:.03em; border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:1.5rem 1rem; } .model-body{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem;flex:1;} .model-cat{font-size:.72rem;font-weight:800;color:var(--accent);letter-spacing:.03em;} .model-code{font-size:1.02rem;font-weight:800;letter-spacing:.01em;word-break:break-all;} .model-specs{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:.5rem 0 .1rem;} .model-specs .ms{font-size:.82rem;color:var(--ink-soft);white-space:nowrap;} .model-specs .ms b{color:var(--ink-faint);font-weight:700;margin-right:.25rem;} .model-desc{ font-size:.8rem;color:var(--ink-faint);line-height:1.5;margin-top:.5rem; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .model-status{text-align:center;color:var(--ink-faint);font-size:.9rem;margin:1.6rem 0 0;} /* ============ 服务能力(SVG 图标卡)============ */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;} .svc-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.5rem 1.3rem;box-shadow:var(--shadow);transition:.18s; } .svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);} .svc-ico{ width:3rem;height:3rem;border-radius:var(--radius-md); background:var(--brand-soft);color:var(--brand); display:flex;align-items:center;justify-content:center;margin-bottom:.9rem; } .svc-ico svg{width:1.6rem;height:1.6rem;stroke:currentColor;fill:none;stroke-width:1.8;} .svc-card h3{margin:0 0 .35rem;font-size:1.06rem;font-weight:800;} .svc-card p{color:var(--ink-soft);font-size:.9rem;margin:0;} /* ============ 关于 ============ */ .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;} .about-grid h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;margin:0 0 1rem;} .about-grid p{color:var(--ink-soft);font-size:1.02rem;margin:0 0 1rem;} .about-points{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem;} .about-points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem;} .about-points li::before{ content:"✓";color:#fff;background:var(--ok);border-radius:50%; width:1.3rem;height:1.3rem;flex-shrink:0;font-size:.8rem;font-weight:900; display:inline-flex;align-items:center;justify-content:center;margin-top:.15rem; } .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .stat{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md); padding:1.3rem;text-align:center;box-shadow:var(--shadow); } .stat .num{font-size:1.9rem;font-weight:900;color:var(--brand);line-height:1;} .stat .lbl{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem;} /* ============ 联系我们 ============ */ .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;} .contact-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.5rem 1.3rem;box-shadow:var(--shadow);text-align:center; } .contact-card .svc-ico{margin:0 auto .9rem;} .contact-card .k{font-size:.8rem;color:var(--ink-faint);font-weight:700;letter-spacing:.03em;} .contact-card .v{font-size:1rem;font-weight:800;margin-top:.25rem;word-break:break-word;} /* ============ 页脚 ============ */ .foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:2.5rem 0 1.5rem;} .foot-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;} .foot .brand-name{font-size:1rem;} .foot p{color:var(--ink-faint);font-size:.85rem;margin:.6rem 0 0;max-width:36ch;} .foot-note{ margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line); font-size:.8rem;color:var(--ink-faint);line-height:1.7; display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem; } .foot-note .agent-brands{font-weight:700;color:var(--ink-soft);} /* 站点地图式页脚 */ .foot-top{display:grid;grid-template-columns:1.25fr 2.75fr;gap:2.5rem;} .foot-tag{color:var(--ink-faint);font-size:.9rem;line-height:1.7;margin:.75rem 0 0;max-width:34ch;} .foot-tag b{color:var(--ink-soft);font-weight:800;font-size:.95rem;} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;} .foot-col h4{font-size:.9rem;font-weight:800;color:var(--ink);margin:0 0 .7rem;} .foot-col a{display:block;color:var(--ink-faint);font-size:.88rem;padding:.38rem 0;transition:.15s;} .foot-col a:hover{color:var(--brand);} @media(max-width:860px){ .foot-top{grid-template-columns:1fr;gap:1.6rem;} .foot-cols{grid-template-columns:1fr 1fr;} } /* ============ 悬浮联系(对标对手 WhatsApp 浮标)============ */ .float-contact{ position:fixed;right:1rem;bottom:1.3rem;z-index:60; display:flex;flex-direction:column;align-items:stretch;gap:.6rem; /* stretch:两胶囊等宽,对称 */ } .float-contact a{ height:3.2rem;border-radius:999px;padding:0 1.2rem; background:var(--brand);color:#fff;box-shadow:var(--shadow-pop); display:flex;align-items:center;justify-content:center;gap:.5rem; font-weight:700;font-size:.95rem;white-space:nowrap;transition:.15s; } .float-contact a.wa{background:#25d366;} /* WhatsApp 绿 */ .float-contact a:hover{transform:scale(1.05);} .float-contact svg{width:1.5rem;height:1.5rem;flex:none;fill:currentColor;} .float-contact a.wa svg{fill:#fff;} /* WhatsApp 官方 glyph:白色实心 */ .float-contact a.diag svg{fill:none;stroke:currentColor;} /* 听诊器:线性描边(内联 fill/stroke 已带,兜底防被上面 fill 覆盖) */ /* ============ 响应式 ============ */ @media(max-width:1000px){ .model-grid{grid-template-columns:repeat(3,1fr);} } @media(max-width:900px){ .hero-inner,.diag-inner,.about-grid{grid-template-columns:1fr;} .hero-art{order:-1;max-width:30rem;margin:0 auto;} .svc-grid,.contact-grid{grid-template-columns:1fr 1fr;} .model-grid{grid-template-columns:repeat(2,1fr);} .nav-links{display:none;} } @media(max-width:560px){ .svc-grid,.contact-grid,.about-stats{grid-template-columns:1fr;} .model-grid{grid-template-columns:repeat(2,1fr);} .hero-inner{padding-top:2.5rem;} .brand-name small{display:none;} } /* 跟随系统深色(用户没手动切时) */ @media(prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#15181d;--bg-alt:#1b1f25;--canvas:#1c2127;--card:#22272e; --ink:#e6e9ed;--ink-soft:#9aa3af;--ink-faint:#6b7480; --line:#2e353d;--line-strong:#3a424c; --brand:#5b9bd5;--brand-hi:#7db0e0;--brand-soft:#1e2c3c; --accent:#fb923c;--accent-soft:#2a2016; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shadow-pop:0 10px 34px rgba(0,0,0,.5); } }