/* ========================================================================== 艾科智能 / AIKOTEK — 官网 v2「深色赛博光效」 设计语言: 深色 + 品牌蓝光效 + 粒子/网格 + 发光卡片 色板来源: docs/brand/brand-tokens.json(v0.3-w0d3),深色专用 token 见 README §3 作者: 艾薇 (design / Phase 3-4 官网视觉设计 第 2 批 v2) 说明: 纯视觉静态稿,无后端。全部动效尊重 prefers-reduced-motion。 ========================================================================== */ /* ---------- 1. 深色专用 Token(品牌蓝为主,不偏离主色系) ---------- :root 即默认(夜间深色,no-JS 兜底);白天浅色见 `[data-theme="light"]`(§24)。 */ :root{ color-scheme:dark; /* 品牌核心色(原样复用 brand-tokens.json) */ --primary:#1B4FA1; --primary-hover:#2A66C4; --primary-active:#143D80; --primary-light:#8FB0E6; /* 深底正文/图形专用(7.36:1 AAA) */ --primary-tint:#E8F0FB; --secondary-1:#0F766E; /* 深青 teal */ --secondary-2:#A16207; /* 哑金,仅装饰 */ --success:#15803D; --warning:#C2410C; --error:#B3261E; --info:#0E6EBA; /* 深色表面阶(新增,自品牌中性色推导,不偏离主色系) */ --bg-base:#0A0E1A; /* 页面底(nav 底色再深) */ --bg-elev:#0F1626; /* 卡片 / 面板 */ --bg-elev-2:#141D31; /* 悬浮 / 更高层级 */ --bg-inset:#0B1020; /* 输入框 / 内嵌 */ --border:rgba(143,176,230,.16); --border-strong:rgba(143,176,230,.38); /* 深底文字(全部 ≥4.5:1) */ --text-hi:#F2F6FF; /* 标题 / 关键数字 */ --text:#C7D2E8; /* 正文 */ --text-mid:#8FB0E6; /* primaryLight 次强调 / 标签 */ --text-low:#96A6C0; /* 弱化文字(≥4.5:1) */ --text-faint:#6E7D96; /* 仅占位符 / disabled */ /* 光效 */ --glow-primary:0 0 26px rgba(27,79,161,.5), 0 0 70px rgba(27,79,161,.22); --glow-soft:0 0 18px rgba(27,79,161,.30); --glow-cyan:0 0 26px rgba(14,110,186,.42); --shadow-card:0 14px 34px rgba(2,6,16,.5); /* 字体(复用 brand-tokens typography) */ --font-heading:'Inter','Source Han Sans SC','思源黑体','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; --font-body:'Inter','Source Han Sans SC','思源黑体','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; --font-mono:'Sarasa Mono SC','JetBrains Mono','SFMono-Regular','Menlo','Consolas',monospace; /* 字号 token(fluid) */ --fs-display:clamp(42px,6vw,64px); --fs-h1:clamp(32px,4vw,44px); --fs-h2:clamp(24px,2.6vw,32px); --fs-h3:20px; --fs-h4:15px; --fs-body:16px; --fs-caption:12px; /* 间距 / 圆角 / 布局 */ --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px; --sp-3xl:64px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:9999px; --container-w:1180px; --header-h:72px; --section-pad:96px; } /* ---------- 1b. 浅色(白天)Token 覆盖 ---------- 保持科技感: 极浅冷蓝底 + 品牌主蓝作光效/强调 + 白卡 + 深色文字。 深色仍为默认,仅在有 data-theme="light" 时切换(script.js §7 + 内联)。 */ [data-theme="light"]{ color-scheme:light; --primary-light:#1B4FA1; /* 浅底强调文字/图标用主蓝(非浅蓝 #8FB0E6) */ --bg-base:#F4F8FF; /* 极浅冷蓝白 */ --bg-elev:#FFFFFF; /* 卡片白 */ --bg-elev-2:#F3F8FF; /* hover 微蓝白 */ --bg-inset:#E9EFFC; /* 输入框 / 内嵌 */ --border:rgba(27,79,161,.14); --border-strong:rgba(27,79,161,.30); --text-hi:#10203A; /* 近黑海军蓝 */ --text:#33415C; --text-mid:#1B4FA1; /* 品牌蓝强调 */ --text-low:#5B6B84; --text-faint:#6C7B93; --glow-primary:0 0 20px rgba(27,79,161,.25), 0 0 54px rgba(27,79,161,.10); --glow-soft:0 0 14px rgba(27,79,161,.16); --glow-cyan:0 0 18px rgba(14,110,186,.18); --shadow-card:0 14px 34px rgba(31,52,97,.13); } [data-theme="light"] ::selection{background:var(--primary);color:#fff} /* ---------- 2. Reset / 基础 ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg-base); color:var(--text); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--primary-light);color:#0A0E1A} a{color:var(--text-mid);text-decoration:none;transition:color .18s ease} a:hover{color:var(--text-hi)} img{max-width:100%;display:block} svg{display:block} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{margin:0;color:var(--text-hi);font-family:var(--font-heading);line-height:1.25;letter-spacing:-.01em} p{margin:0} button{font-family:inherit} :focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:4px} /* 滚动条(深色) */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--bg-base)} ::-webkit-scrollbar-thumb{background:#1C2A44;border-radius:99px;border:2px solid var(--bg-base)} ::-webkit-scrollbar-thumb:hover{background:#2A3D5E} .container{max-width:var(--container-w);margin:0 auto;padding:0 24px} .container--narrow{max-width:860px} .svg-defs{position:absolute;width:0;height:0;overflow:hidden} /* ---------- 3. 通用组件 ---------- */ .section{padding:var(--section-pad) 0;position:relative} .section--dark{ background: radial-gradient(52% 60% at 50% 0%, rgba(27,79,161,.20), transparent 70%), var(--bg-base); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .section--subtle{background:var(--bg-elev);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .section--glow{background:radial-gradient(60% 70% at 50% 0%, rgba(27,79,161,.16), transparent 72%), var(--bg-base)} .section-head{max-width:720px;margin-bottom:48px} .section-head--center{margin-left:auto;margin-right:auto;text-align:center} .section-head h2{font-size:var(--fs-h2);margin-bottom:14px} .section-head .lead{color:var(--text);font-size:17px} .section-foot{margin-top:40px;text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono); font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--text-mid); } .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--primary-light),rgba(143,176,230,.1));box-shadow:0 0 8px rgba(143,176,230,.5)} .eyebrow--light::before{background:linear-gradient(90deg,var(--primary-light),rgba(143,176,230,.1));box-shadow:0 0 8px rgba(143,176,230,.5)} .eyebrow--center{justify-content:center} .section-head--center .eyebrow{justify-content:center} .section-head .eyebrow{margin-bottom:18px} .lead{color:var(--text);font-size:17px} /* 按钮 */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:var(--r-md); font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.2; border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .18s ease; } .btn .icon{width:16px;height:16px} .btn--primary{ background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%); color:#fff;box-shadow:var(--glow-soft); } .btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--glow-primary);background:linear-gradient(135deg,#2059AE 0%,#3276D4 100%)} .btn--outline{border-color:var(--primary-light);color:var(--primary-light);background:transparent} .btn--outline:hover{color:var(--text-hi);border-color:var(--primary-light);background:rgba(143,176,230,.10);box-shadow:var(--glow-soft)} .btn--outline-light{border-color:rgba(255,255,255,.32);color:#fff;background:transparent} .btn--outline-light:hover{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);box-shadow:0 0 18px rgba(143,176,230,.28)} .btn--ghost-light{color:var(--primary-light);background:transparent} .btn--ghost-light:hover{color:var(--text-hi);background:rgba(143,176,230,.08)} .btn--lg{padding:15px 30px;font-size:17px;border-radius:var(--r-lg)} .btn--lg .icon{width:18px;height:18px} .btn--sm{padding:9px 16px;font-size:14px} .btn--block{width:100%} /* 图标 */ .icon{width:20px;height:20px;flex:none} .icon--sm{width:16px;height:16px} /* Chip 标签 */ .chip{ display:inline-flex;align-items:center;gap:6px; padding:4px 11px;border-radius:var(--r-full); font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.02em; border:1px solid var(--border);color:var(--text-mid);background:rgba(143,176,230,.08); white-space:nowrap; } .chip--muted{color:var(--text-mid);background:rgba(143,176,230,.07);border-color:var(--border)} .chip--teal{color:#5EEAD4;background:rgba(15,118,110,.20);border-color:rgba(94,234,212,.30)} /* 语义色 chip —— 深底白字(≥4.5:1) */ .chip--success{color:#fff;background:var(--success);border-color:transparent} .chip--warning{color:#fff;background:var(--warning);border-color:transparent} .chip--error{color:#fff;background:var(--error);border-color:transparent} .chip--info{color:#fff;background:var(--info);border-color:transparent} .chip--outline{border-color:var(--border-strong);color:var(--text-hi);background:transparent} /* 卡片 */ .card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; transition:transform .22s ease,border-color .25s ease,box-shadow .3s ease,background .25s ease; } .card--hover:hover{ transform:translateY(-5px); border-color:var(--border-strong); box-shadow:var(--shadow-card),var(--glow-soft); background:var(--bg-elev-2); } .card--glow{border-color:var(--border-strong);box-shadow:var(--shadow-card),var(--glow-soft)} .link-btn{ display:inline-flex;align-items:center;gap:6px;color:var(--primary-light);font-weight:600;font-size:14px; } .link-btn .icon{width:15px;height:15px;transition:transform .2s ease} .link-btn:hover{color:#fff} .link-btn:hover .icon{transform:translateX(3px)} /* 栅格 */ .grid{display:grid;gap:24px} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} /* ---------- 4. 页头 / 抽屉 / 走查条 ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(10,14,26,.82); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-bottom:1px solid var(--border); } .brand-band{height:4px; background:linear-gradient(90deg,var(--primary),var(--primary-hover),var(--primary-light)); box-shadow:0 1px 12px rgba(27,79,161,.55)} .header-inner{display:flex;align-items:center;gap:28px;height:var(--header-h)} .brand{display:flex;align-items:center;flex:none} .brand-wordmark{height:44px;width:auto} .brand-logo-mobile{display:none;height:36px;width:auto} .main-nav{display:flex;align-items:center;gap:4px;margin-left:auto} .nav-item{ position:relative;padding:9px 15px;border-radius:var(--r-md); color:var(--text);font-size:15px;font-weight:500; transition:color .18s ease,background .18s ease; } .nav-item:hover{color:var(--text-hi);background:rgba(143,176,230,.08)} .nav-item.is-active{color:var(--primary-light);font-weight:600} .nav-item.is-active::after{ content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;border-radius:2px; background:var(--primary-light);box-shadow:0 0 8px rgba(143,176,230,.7)} .header-actions{display:flex;align-items:center;gap:12px;margin-left:4px} .nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:var(--r-md);padding:9px;color:var(--text-hi);cursor:pointer} .nav-toggle:hover{border-color:var(--border-strong)} /* 移动端抽屉 */ .drawer{ position:fixed;inset:0;z-index:60;background:rgba(8,12,22,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); display:flex;justify-content:flex-end;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s; } .drawer.is-open{visibility:visible;opacity:1} .drawer__panel{display:flex;flex-direction:column;width:min(84vw,340px);height:100%;background:var(--bg-elev);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .28s ease} .drawer.is-open .drawer__panel{transform:none} .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border)} .drawer__head img{height:36px;width:auto} .drawer__close{background:none;border:1px solid var(--border);border-radius:var(--r-md);padding:8px;color:var(--text-hi);cursor:pointer} .drawer__nav{display:flex;flex-direction:column;padding:12px;gap:2px} .drawer__item{ display:flex;align-items:center;justify-content:space-between; padding:13px 14px;border-radius:var(--r-md);color:var(--text);font-size:16px; } .drawer__item:hover{color:var(--text-hi);background:rgba(143,176,230,.08)} .drawer__item.is-active{color:var(--primary-light);font-weight:600;background:rgba(143,176,230,.07)} .drawer__cta{margin:10px 20px} .drawer__foot{margin-top:auto;padding:18px 20px;border-top:1px solid var(--border);color:var(--text-faint);font-size:12px;letter-spacing:.04em}/* ---------- 5. HERO(深色 + 网格 + 光晕 + 粒子) ---------- */ .hero{ position:relative;overflow:hidden;isolation:isolate; padding:120px 0 100px; background: radial-gradient(60% 52% at 78% 8%, rgba(14,110,186,.30), transparent 66%), radial-gradient(52% 56% at 14% 0%, rgba(27,79,161,.34), transparent 62%), linear-gradient(180deg,#0B1120 0%,var(--bg-base) 100%); } .hero::before{ content:"";position:absolute;inset:0;z-index:-2; background-image: linear-gradient(rgba(143,176,230,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(143,176,230,.055) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(80% 80% at 50% 20%,#000 30%,transparent 100%); mask-image:radial-gradient(80% 80% at 50% 20%,#000 30%,transparent 100%); } .hero::after{ content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(42% 46% at 30% 24%, rgba(143,176,230,.10), transparent 70%); } .hero-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none} .glow-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-1;pointer-events:none} .glow-orb--blue{width:420px;height:420px;top:-140px;left:-80px;background:radial-gradient(circle,rgba(27,79,161,.55),transparent 70%);animation:orbFloat 12s ease-in-out infinite} .glow-orb--cyan{width:340px;height:340px;top:40px;right:-60px;background:radial-gradient(circle,rgba(14,110,186,.40),transparent 70%);animation:orbFloat 15s ease-in-out infinite reverse} .glow-orb--teal{width:260px;height:260px;bottom:-80px;left:42%;background:radial-gradient(circle,rgba(15,118,110,.28),transparent 70%);animation:orbFloat 18s ease-in-out infinite} .hero-inner{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center} .hero__eyebrow{margin-bottom:22px} .hero__title{font-size:var(--fs-display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin-bottom:22px} .hero__sub{color:var(--text);font-size:19px;line-height:1.75;max-width:560px;margin-bottom:30px} .text-grad{ background:linear-gradient(96deg,#9DB9EE 0%,#4EA1F0 52%,#38B8D8 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 22px rgba(78,161,240,.35)); } .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px} .hero__trust{display:flex;flex-wrap:wrap;gap:14px 22px} .trust-item{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:14px} .trust-item .icon{width:17px;height:17px;color:var(--primary-light);filter:drop-shadow(0 0 6px rgba(143,176,230,.6))} /* HERO 右侧视觉: 节点网络卡 */ .hero-visual{position:relative;padding:10px 0} .hero-card{ position:relative; background:linear-gradient(160deg,rgba(20,29,49,.9),rgba(12,18,32,.82)); border:1px solid var(--border-strong);border-radius:18px;padding:26px 26px 30px; box-shadow:var(--shadow-card),var(--glow-soft); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .hero-card::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none; background:linear-gradient(120deg,rgba(143,176,230,.08),transparent 40%,rgba(14,110,186,.08))} .hero-card__title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text-hi);letter-spacing:.04em;margin-bottom:22px} .hero-card__title .icon{width:17px;height:17px;color:var(--primary-light)} .node-flow{display:flex;flex-direction:column;gap:0} .node{display:flex;align-items:center;gap:14px;padding:4px 0} .node__dot{ position:relative;width:14px;height:14px;border-radius:50%;flex:none; background:var(--primary-light);box-shadow:0 0 10px rgba(143,176,230,.8); } .node--active .node__dot{ background:radial-gradient(circle at 35% 30%,#CFE0F9,var(--primary-light) 45%,#4EA1F0); box-shadow:0 0 0 0 rgba(143,176,230,.55);animation:nodePulse 2.4s ease-out infinite; } .node__label{color:var(--text-hi);font-size:15px;font-weight:600} .node__sub{color:var(--text-low);font-size:12.5px;margin-top:2px} .node-connector{width:2px;height:30px;margin-left:6px;background:linear-gradient(180deg,var(--primary-light),rgba(143,176,230,.12));box-shadow:0 0 6px rgba(143,176,230,.5)} .float-chip{ position:absolute;display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:12px;font-size:14px;font-weight:700;color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-hover)); border:1px solid rgba(255,255,255,.16);box-shadow:var(--glow-primary);z-index:3; } .float-chip .icon{width:16px;height:16px} .float-chip--sla{top:2px;right:-14px;animation:floatY 5s ease-in-out infinite} .float-chip--speed{bottom:2px;left:-14px;animation:floatY 6s ease-in-out infinite reverse} /* 信任条 */ .trust-strip{padding:18px 0;background:var(--bg-elev);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .trust-strip__inner{display:flex;align-items:center;flex-wrap:wrap;gap:14px 34px} .trust-strip__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--text-mid);text-transform:uppercase} .trust-logo{color:var(--text-low);font-size:15px;font-weight:600;letter-spacing:.06em} .trust-logo::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:9px;vertical-align:2px;background:var(--primary-light);box-shadow:0 0 6px rgba(143,176,230,.7)} /* ---------- 6. 服务亮点卡 ---------- */ .service-card__icon{ width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px; color:var(--primary-light);background:rgba(27,79,161,.22);border:1px solid var(--border); transition:background .25s ease,color .25s ease,box-shadow .3s ease; } .service-card__icon .icon{width:24px;height:24px} .card--hover:hover .service-card__icon{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;border-color:transparent;box-shadow:var(--glow-primary)} .service-card__title{font-size:19px;margin-bottom:10px} .service-card__desc{color:var(--text);font-size:14.5px;line-height:1.7;margin-bottom:16px} .service-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .service-card__foot{border-top:1px solid var(--border);padding-top:16px} /* ---------- 7. 数据条 ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center} .stat{padding:10px 6px;position:relative} .stat__value{ font-family:var(--font-mono);font-weight:700;font-size:clamp(38px,4.4vw,52px);line-height:1.1;color:var(--text-hi); background:linear-gradient(180deg,#EAF1FD 0%,var(--primary-light) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(143,176,230,.28)); } .stat__value sup{font-size:.5em;color:var(--primary-light);-webkit-text-fill-color:var(--primary-light);margin-left:1px} .stat__label{margin-top:8px;color:var(--text-mid);font-size:14px;letter-spacing:.04em} .stats-band-sub{margin-top:34px;text-align:center;color:var(--text);font-size:14.5px} /* ---------- 8. 案例卡 ---------- */ .case-cover{ height:150px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px; font-size:44px;font-weight:700;color:rgba(255,255,255,.92); background: radial-gradient(130% 130% at 18% 0%, rgba(143,176,230,.28), transparent 55%), linear-gradient(150deg,#182746 0%,#0C1220 100%); border:1px solid var(--border);overflow:hidden;position:relative; } .case-cover::after{content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(143,176,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,230,.06) 1px,transparent 1px); background-size:22px 22px;opacity:.7} .case-cover--teal{background:radial-gradient(130% 130% at 18% 0%, rgba(15,118,110,.45), transparent 55%),linear-gradient(150deg,#0F2B2A 0%,#0C1220 100%)} .case-cover--navy{background:radial-gradient(130% 130% at 18% 0%, rgba(14,110,186,.42), transparent 55%),linear-gradient(150deg,#0E2440 0%,#0C1220 100%)} .case-cover small{position:absolute;bottom:10px;right:14px;font-size:12px;color:var(--text-mid);font-weight:500;letter-spacing:.05em;z-index:1} .case-card__head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px} .case-card__industry{color:var(--text-low);font-size:13px;letter-spacing:.04em} .case-card__title{font-size:18px;margin-bottom:8px;line-height:1.4} .case-card__summary{color:var(--text);font-size:14px;line-height:1.7;margin-bottom:16px} .case-card__metric{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-inset);border:1px solid var(--border);margin-bottom:16px} .metric-value{font-family:var(--font-mono);font-weight:700;font-size:24px;color:var(--primary-light);text-shadow:0 0 12px rgba(143,176,230,.45)} .metric-label{color:var(--text-low);font-size:13px} .case-card__foot{border-top:1px solid var(--border);padding-top:16px} /* ---------- 9. 方法论 ---------- */ .process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative} .process__step{ background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative; transition:transform .22s ease,border-color .25s ease,box-shadow .3s ease; } .process__step:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow-card),var(--glow-soft)} .process__num{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--primary-light);letter-spacing:.18em;display:block;margin-bottom:14px;text-shadow:0 0 10px rgba(143,176,230,.5)} .process__title{font-size:17px;margin-bottom:8px} .process__desc{color:var(--text);font-size:13.5px;line-height:1.7;margin-bottom:16px} .process__duration{display:inline-block;font-size:12px;font-weight:600;color:var(--text-mid);padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:rgba(143,176,230,.07)} /* ---------- 10. CTA 条 ---------- */ .cta-band{overflow:hidden} .cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:1} .cta-band__title{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px} .cta-band__sub{color:var(--text);font-size:16px;max-width:520px} .cta-band__actions{display:flex;flex-wrap:wrap;gap:14px;flex:none} /* ---------- 11. 页脚 ---------- */ .site-footer{border-top:1px solid var(--border);background:var(--bg-inset);padding:64px 0 0} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:44px;padding-bottom:44px} .brand-wordmark-dark{height:46px;width:auto;margin-bottom:16px} .footer-brand p{color:var(--text-low);font-size:14px;max-width:300px} .footer-col h4{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-hi);margin-bottom:16px} .footer-col li{margin-bottom:10px} .footer-col a{color:var(--text-low);font-size:14px} .footer-col a:hover{color:var(--text-hi)} .footer-contact li{display:flex;align-items:center;gap:10px;color:var(--text-low);font-size:14px} .footer-contact .icon{width:16px;height:16px;color:var(--primary-light);filter:drop-shadow(0 0 5px rgba(143,176,230,.5))} .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0;border-top:1px solid var(--border);color:var(--text-faint);font-size:13px} .foot-legals{display:flex;gap:20px} .foot-legals a{color:var(--text-faint);font-size:13px} .foot-legals a:hover{color:var(--text-hi)} /* ---------- 12. 子页 Hero ---------- */ .page-hero{ position:relative;overflow:hidden;padding:84px 0 60px;border-bottom:1px solid var(--border); background: radial-gradient(52% 70% at 80% 0%, rgba(14,110,186,.24), transparent 66%), radial-gradient(46% 70% at 10% 0%, rgba(27,79,161,.28), transparent 60%), var(--bg-base); } .page-hero::before{content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(143,176,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,230,.05) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(70% 90% at 50% 0%,#000 40%,transparent 100%); mask-image:radial-gradient(70% 90% at 50% 0%,#000 40%,transparent 100%); pointer-events:none} .page-hero__inner{position:relative;z-index:1} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-faint);margin-bottom:22px} .breadcrumb a{color:var(--text-low)} .breadcrumb a:hover{color:var(--text-hi)} .breadcrumb .sep{color:var(--text-faint)} .page-hero .eyebrow{margin-bottom:18px} .page-hero__title{font-size:var(--fs-h1);font-weight:800;margin-bottom:14px} .page-hero__lead{color:var(--text);font-size:17.5px;max-width:640px} /* ---------- 13. 服务页 ---------- */ .service-row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;padding:52px 0;border-top:1px solid var(--border)} .service-row:first-child{border-top:none;padding-top:12px} .service-row__icon{ width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:18px; color:var(--primary-light);background:rgba(27,79,161,.22);border:1px solid var(--border); box-shadow:var(--glow-soft); } .service-row__icon .icon{width:22px;height:22px} .service-row__title{font-size:26px;margin-bottom:12px} .service-row__desc{color:var(--text);font-size:15.5px;line-height:1.8;margin-bottom:20px} .service-row__points{display:flex;flex-direction:column;gap:10px;margin-bottom:26px} .service-row__points li{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:14.5px} .service-row__points .icon{width:17px;height:17px;margin-top:3px;color:#5EEAD4;filter:drop-shadow(0 0 5px rgba(94,234,212,.4))} .service-row__meta{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;align-self:start} .service-row__meta .m{padding:6px 0} .service-row__meta .k{display:block;font-size:12px;letter-spacing:.08em;color:var(--text-faint);margin-bottom:3px} .service-row__meta .v{font-size:15.5px;font-weight:600;color:var(--text-hi)} .service-row__meta .divider{display:block;height:1px;background:var(--border);margin:10px 0} /* 合作模式卡 */ .model-card__tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--primary-light);margin-bottom:16px;text-shadow:0 0 8px rgba(143,176,230,.4)} .model-card__title{font-size:19px;margin-bottom:10px} .model-card__desc{color:var(--text);font-size:14px;line-height:1.7;margin-bottom:18px} .model-card__term{font-size:13.5px;color:var(--text-low)} .model-card__term b{color:var(--text-hi)} /* 交付物标签墙 */ .deliverable-wall{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .deliverable{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--r-lg);background:var(--bg-elev);border:1px solid var(--border);color:var(--text-hi);font-size:14.5px;font-weight:600} .deliverable .icon{width:18px;height:18px;color:var(--primary-light);filter:drop-shadow(0 0 5px rgba(143,176,230,.5))} /* ---------- 14. 案例页 ---------- */ .filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px} .chip-filter{ padding:8px 18px;border-radius:var(--r-full);font-size:14px;font-weight:500;color:var(--text); border:1px solid var(--border);background:var(--bg-elev);transition:all .2s ease; } .chip-filter:hover{color:var(--text-hi);border-color:var(--border-strong);box-shadow:var(--glow-soft)} .chip-filter.is-active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-hover));border-color:transparent;box-shadow:var(--glow-soft)} .case-row{display:grid;grid-template-columns:.92fr 1.08fr;padding:0;overflow:hidden;margin-bottom:24px} .case-row__cover{ display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:40px 24px; font-size:46px;font-weight:700;color:rgba(255,255,255,.9);min-height:240px;position:relative;overflow:hidden; background:radial-gradient(140% 140% at 15% 0%, rgba(143,176,230,.30), transparent 55%),linear-gradient(150deg,#1A2A49 0%,#0C1220 100%); } .case-row__cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(143,176,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,230,.07) 1px,transparent 1px);background-size:24px 24px} .case-row__cover--teal{background:radial-gradient(140% 140% at 15% 0%, rgba(15,118,110,.5), transparent 55%),linear-gradient(150deg,#10302F 0%,#0C1220 100%)} .case-row__cover--navy{background:radial-gradient(140% 140% at 15% 0%, rgba(14,110,186,.46), transparent 55%),linear-gradient(150deg,#0E2542 0%,#0C1220 100%)} .case-row__cover small{font-size:13px;font-weight:500;color:var(--text-mid);letter-spacing:.08em;z-index:1} .case-row__body{padding:30px} .case-row__head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px} .case-row__industry{color:var(--text-low);font-size:13px;letter-spacing:.04em;margin-left:auto} .case-row__title{font-size:22px;margin-bottom:10px;line-height:1.4} .case-row__desc{color:var(--text);font-size:14.5px;line-height:1.75;margin-bottom:20px} .case-row__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px} .cm{padding:14px;border-radius:var(--r-md);background:var(--bg-inset);border:1px solid var(--border)} .cm .v{font-family:var(--font-mono);font-size:23px;font-weight:700;color:var(--primary-light);text-shadow:0 0 12px rgba(143,176,230,.4)} .cm .k{display:block;margin-top:4px;font-size:12px;color:var(--text-faint)} .case-row__quote{border-left:3px solid var(--secondary-2);padding-left:14px;color:var(--text);font-size:14px;line-height:1.7} .case-row__quote .who{display:block;margin-top:6px;color:var(--text-faint);font-size:12.5px} /* ---------- 15. 关于页 ---------- */ .about-lead{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .about-lead__text .eyebrow{margin-bottom:18px} .about-lead__title{font-size:var(--fs-h2);margin-bottom:18px;line-height:1.3} .about-lead__p{color:var(--text);font-size:15.5px;line-height:1.85} .about-principles{display:flex;flex-direction:column;gap:18px} .principle{display:flex;gap:18px;padding:20px;border-radius:var(--r-lg);background:var(--bg-elev);border:1px solid var(--border);transition:transform .2s ease,border-color .25s ease,box-shadow .3s ease} .principle:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--glow-soft)} .principle__num{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--primary-light);text-shadow:0 0 8px rgba(143,176,230,.5);flex:none;margin-top:2px} .principle__title{font-size:16.5px;margin-bottom:6px} .principle__desc{color:var(--text-low);font-size:13.5px;line-height:1.7} /* 技术栈标签 */ .tech-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .tech-tags .chip{font-size:13px} /* ---------- 16. 团队页 ---------- */ .team-card{text-align:center;padding:32px 24px} .team-card__avatar{ width:78px;height:78px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center; font-size:28px;font-weight:700;color:#fff; background:radial-gradient(circle at 30% 25%,rgba(143,176,230,.5),rgba(27,79,161,.65) 60%,rgba(10,14,26,.9)); border:1px solid var(--border-strong);box-shadow:var(--glow-primary); } .team-card__avatar--teal{background:radial-gradient(circle at 30% 25%,rgba(94,234,212,.5),rgba(15,118,110,.7) 60%,rgba(10,14,26,.9));box-shadow:0 0 24px rgba(15,118,110,.45)} .team-card__avatar--navy{background:radial-gradient(circle at 30% 25%,rgba(143,176,230,.5),rgba(14,110,186,.75) 60%,rgba(10,14,26,.9));box-shadow:0 0 24px rgba(14,110,186,.45)} .team-card__name{font-size:17px;margin-bottom:6px} .team-card__role{color:var(--primary-light);font-size:13px;margin-bottom:10px;letter-spacing:.03em} .team-card__bio{color:var(--text-low);font-size:13px;line-height:1.7} .collab-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .collab-item{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--r-lg);background:var(--bg-elev);border:1px solid var(--border)} .collab-item .icon{width:22px;height:22px;color:var(--primary-light);filter:drop-shadow(0 0 6px rgba(143,176,230,.5));flex:none} .collab-item h3{font-size:15.5px;margin-bottom:5px} .collab-item p{color:var(--text-low);font-size:13px;line-height:1.6} /* ---------- 17. 联系页 ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start} .contact-info{display:flex;flex-direction:column;gap:16px} .contact-card{display:flex;gap:16px;align-items:flex-start} .contact-card__icon{ width:48px;height:48px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center; color:var(--primary-light);background:rgba(27,79,161,.22);border:1px solid var(--border);box-shadow:var(--glow-soft); } .contact-card__icon .icon{width:22px;height:22px} .contact-card__title{font-size:16px;margin-bottom:4px} .contact-card__value{font-size:15px;font-weight:600;color:var(--text-hi);margin-bottom:3px} .contact-card__value a{color:var(--primary-light)} .contact-card__value a:hover{color:#fff} .contact-card__sub{color:var(--text-faint);font-size:12.5px} .form-card{padding:30px} .form-card .lead{font-size:14px} .req{color:#F87171} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field--full{grid-column:1/-1} .field__label{display:block;font-size:13px;font-weight:600;color:var(--text-low);margin-bottom:7px} .input{ width:100%;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-inset); border:1px solid var(--border);color:var(--text-hi);font-family:var(--font-body);font-size:14.5px; transition:border-color .2s ease,box-shadow .25s ease; } .input::placeholder{color:var(--text-faint)} .input:focus{outline:none;border-color:var(--border-strong);box-shadow:var(--glow-soft)} select.input{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238FB0E6' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:38px} .form-card__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:22px} .form-note{display:inline-flex;align-items:center;gap:8px;color:var(--text-faint);font-size:12.5px} .form-note .icon{width:15px;height:15px;color:var(--primary-light)} /* 响应承诺时间条 */ .sla-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px} .sla-item{padding:18px;border-radius:var(--r-lg);background:var(--bg-elev);border:1px solid var(--border);text-align:center} .sla-item .v{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--primary-light);text-shadow:0 0 10px rgba(143,176,230,.4)} .sla-item .k{display:block;margin-top:6px;font-size:12.5px;color:var(--text-low)} /* FAQ */ .faq-list{display:flex;flex-direction:column;gap:14px} .faq-item{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden} .faq-item summary{padding:18px 20px;font-weight:600;color:var(--text-hi);cursor:pointer;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";color:var(--primary-light);font-size:20px;transition:transform .2s ease} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item__body{padding:0 20px 18px;color:var(--text-low);font-size:14px;line-height:1.75} /* ---------- 18. 招聘页 ---------- */ .culture-card{text-align:left} .culture-card .icon{width:26px;height:26px;color:var(--primary-light);filter:drop-shadow(0 0 8px rgba(143,176,230,.6));margin-bottom:16px} .culture-card h3{font-size:17px;margin-bottom:8px} .culture-card p{color:var(--text-low);font-size:13.5px;line-height:1.7} .job-row{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:22px 24px;border-radius:var(--r-lg);background:var(--bg-elev);border:1px solid var(--border);margin-bottom:14px; transition:transform .2s ease,border-color .25s ease,box-shadow .3s ease; } .job-row:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--glow-soft)} .job-row__title{font-size:17px;margin-bottom:6px} .job-row__tags{display:flex;flex-wrap:wrap;gap:8px} .apply-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step} .apply-step{position:relative;padding-top:40px;border-top:2px solid var(--border)} .apply-step::before{counter-increment:step;content:counter(step,decimal-leading-zero); position:absolute;top:-14px;left:0;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--primary-light);background:var(--bg-base);padding:0 8px;text-shadow:0 0 8px rgba(143,176,230,.5)} .apply-step h3{font-size:15px;margin-bottom:6px} .apply-step p{color:var(--text-low);font-size:13px;line-height:1.6} /* ---------- 19. 规范标注工具 ---------- */ .spec-toggle{ position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:var(--r-full);cursor:pointer; background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--text-mid);font-size:13px;font-weight:600; box-shadow:var(--shadow-card),var(--glow-soft);transition:color .2s ease,box-shadow .3s ease; } .spec-toggle:hover{color:#fff;box-shadow:var(--shadow-card),var(--glow-primary)} .spec-toggle .icon{width:16px;height:16px} .show-spec .annotate{outline:1px dashed rgba(143,176,230,.45);outline-offset:3px;position:relative} .show-spec .annotate::after{ content:attr(data-note);position:absolute;bottom:calc(100% + 6px);left:10px;z-index:40; background:#0F1626;border:1px solid var(--primary-light);color:var(--primary-light); font-size:11px;line-height:1.4;padding:5px 9px;border-radius:6px;white-space:nowrap; box-shadow:0 6px 18px rgba(2,6,16,.5),var(--glow-soft);pointer-events:none; } /* ---------- 20. 滚动渐入 ---------- */ [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} [data-reveal].is-visible{opacity:1;transform:none} [data-reveal="fade"]{transform:none} /* ---------- 21. HERO 入场动画 ---------- */ @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .hero__copy>*{animation:fadeUp .8s cubic-bezier(.2,.7,.3,1) both} .hero__eyebrow{animation-delay:.05s} .hero__title{animation-delay:.14s} .hero__sub{animation-delay:.24s} .hero__actions{animation-delay:.34s} .hero__trust{animation-delay:.44s} .hero-visual{animation:fadeUp .9s cubic-bezier(.2,.7,.3,1) .18s both} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,18px)}} @keyframes nodePulse{0%{box-shadow:0 0 0 0 rgba(143,176,230,.55)}70%{box-shadow:0 0 0 13px rgba(143,176,230,0)}100%{box-shadow:0 0 0 0 rgba(143,176,230,0)}} /* ---------- 22. 动效降级 ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} [data-reveal]{opacity:1 !important;transform:none !important} .hero__copy>*{animation:none} .hero-visual{animation:none} .glow-orb,.float-chip{animation:none !important} } /* ---------- 23. 响应式 ---------- */ @media (max-width:1120px){ .grid--4{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr);gap:20px} .process{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:34px} .apply-steps{grid-template-columns:repeat(2,1fr)} .hero-inner{grid-template-columns:1fr;gap:56px} .hero-visual{max-width:560px} .case-row__metrics{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ :root{--section-pad:64px} .main-nav{display:none} .header-cta{display:none} .nav-toggle{display:inline-flex} .header-inner{justify-content:space-between} .brand-logo-mobile{display:block} .brand-wordmark{display:none} .hero{padding:76px 0 72px} .service-row{grid-template-columns:1fr;gap:24px} .about-lead{grid-template-columns:1fr;gap:40px} .contact-grid{grid-template-columns:1fr} .case-row{grid-template-columns:1fr} .case-row__cover{min-height:180px} .collab-strip{grid-template-columns:1fr} .cta-band__inner{flex-direction:column;align-items:flex-start;gap:24px} .sla-strip{grid-template-columns:repeat(2,1fr)} /* 移动端 logo 互换(≤900px 才显示移动 logo): 浅色显示 --light 版本 */ [data-theme="light"] .brand-logo-mobile--light{display:block} /* 移动端强制隐藏字标(浅色下 --light 字标 specificity 更高,需这里压回) */ [data-theme="light"] .brand-wordmark--dark, [data-theme="light"] .brand-wordmark--light{display:none} } @media (max-width:640px){ :root{--section-pad:52px} .grid--3,.grid--4,.process{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr;gap:28px} .case-row__metrics{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .field--full{grid-column:auto} .apply-steps{grid-template-columns:1fr} .hero__actions .btn{width:100%} .float-chip--sla{right:4px} .float-chip--speed{left:4px} .hero__title{letter-spacing:-.01em} .section-foot .btn{width:100%} .footer-bottom{flex-direction:column;align-items:flex-start} } /* ---------- 24. 日夜主题: logo 互换(见 §25) ---------- 深色(默认)显示 `--dark` 版本;浅色显示 `--light` 版本。 .brand-wordmark / .brand-logo-mobile / .footer-logo / .drawer-logo 成对出现于各页
/