/* ============================================================ UKAMOBI · 内页中度视觉升级(共享) 适用:Advertisers / Developer / Ad Network 用法:给加 class="page-adv",并在 style.css 之后加载本文件。全部以 .page-adv 前缀 scoped,不影响首页及其它未标记页面。 ============================================================ */ /* ---------- 设计 token（全局,确保首页等无 .page-adv 的页面也能用)---------- */ :root { --up-blue: #0067f4; --up-cyan: #2bdbdc; --up-ink: #0f1b33; --up-muted: #5b6675; --up-line: #eef1f6; --up-grad: linear-gradient(135deg, #0067f4 0%, #2bdbdc 100%); --up-navy: #0b1b3a; } /* ============================================================ 1. HERO 视觉锚点 ============================================================ */ .page-adv .page-hero { background: radial-gradient(circle at 18% 28%, rgba(43, 219, 220, 0.28), transparent 42%), radial-gradient(circle at 82% 22%, rgba(0, 103, 244, 0.42), transparent 48%), radial-gradient(circle at 55% 92%, rgba(91, 79, 255, 0.22), transparent 50%), linear-gradient(135deg, #005ad5 0%, #003a8c 100%); } /* 右上发光球体 */ .page-adv .page-hero::after { content: ""; position: absolute; right: -70px; top: 10px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 219, 220, 0.55), transparent 65%); filter: blur(6px); z-index: 1; pointer-events: none; } .page-adv .page-hero .page-title { font-weight: 700; letter-spacing: -0.5px; } /* 漂浮玻璃数据芯片 */ .adv-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .adv-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; color: #fff; font-weight: 600; font-size: 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); animation: adv-float 7s ease-in-out infinite; } .adv-chip i { color: var(--up-cyan); font-size: 18px; } .adv-chip:nth-child(1) { left: 7%; top: 28%; animation-delay: 0s; } .adv-chip:nth-child(2) { right: 9%; top: 22%; animation-delay: 1.2s; } .adv-chip:nth-child(3) { left: 11%; bottom: 20%; animation-delay: 2.1s; } .adv-chip:nth-child(4) { right: 7%; bottom: 34%; animation-delay: 0.6s; } @keyframes adv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (max-width: 1199px) { .adv-chips { display: none; } .page-adv .page-hero::after { width: 180px; height: 180px; right: -50px; } } /* ============================================================ 2. 关键指标深色数据带 ============================================================ */ .adv-stats { position: relative; padding: 84px 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(43, 219, 220, 0.16), transparent 40%), radial-gradient(circle at 85% 80%, rgba(0, 103, 244, 0.26), transparent 45%), linear-gradient(135deg, var(--up-navy) 0%, #081227 100%); } /* 点阵网格叠层 */ .adv-stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .adv-stats .section-title .title { color: #fff; } .adv-stats .section-title .text { color: rgba(255, 255, 255, 0.7); } .adv-stat { position: relative; z-index: 2; text-align: center; padding: 18px 10px; } .adv-stat-number { display: flex; align-items: baseline; justify-content: center; gap: 3px; font-weight: 800; line-height: 1; } .adv-stat-num { font-size: 62px; background: linear-gradient(135deg, #2bdbdc, #5aa0ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .adv-stat-pre, .adv-stat-unit { color: #fff; font-weight: 700; font-size: 32px; } .adv-stat-label { margin-top: 14px; color: rgba(255, 255, 255, 0.72); font-size: 15px; font-weight: 500; } @media (max-width: 767px) { .adv-stat { padding: 14px 6px; } .adv-stat-num { font-size: 48px; } .adv-stat-pre, .adv-stat-unit { font-size: 26px; } } /* ============================================================ 3. 卡片去模板化(.single-features) ============================================================ */ .features-area .single-features { position: relative; background: #fff; border: 1px solid var(--up-line); border-radius: 18px; padding: 40px 26px 34px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05); overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* 顶部渐变描边条 */ .features-area .single-features::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--up-grad); } .features-area .single-features:hover { transform: translateY(-8px); border-color: rgba(0, 103, 244, 0.25); box-shadow: 0 22px 48px rgba(0, 103, 244, 0.16); } /* 图标 chip 化(去掉 blob);兼容与两种图标 */ .features-area .single-features .features-icon { width: 74px; height: 74px; display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--up-grad); box-shadow: 0 12px 26px rgba(0, 103, 244, 0.3); } .features-area .single-features .features-icon i { font-size: 34px; line-height: 1; color: #fff; } .features-area .single-features .features-icon .features-img-icon { width: 38px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); /* 图标转白,贴合渐变 chip */ } .features-area .single-features .features-icon .shape { display: none; } .features-area .single-features .features-content { margin-top: 26px; } .features-area .single-features .features-content .features-title a { font-size: 21px; font-weight: 700; color: var(--up-ink); } .features-area .single-features .features-content .features-title a:hover { color: var(--up-blue); } .features-area .single-features .features-content .text { margin-top: 12px; font-size: 15px; line-height: 25px; color: var(--up-muted); } /* ============================================================ 4. about-area 流水线化(各页 .about-area 节段统一适用) Advertisers#bidding / Developer#integration / AdNetwork#ecosystem ============================================================ */ .page-adv .about-area .row > .col-lg-6:nth-child(2) { counter-reset: advstep; } /* 图片渐变光晕边框 */ .page-adv .about-area .about-feature-image { position: relative; padding: 2px; border-radius: 20px; background: var(--up-grad); box-shadow: 0 30px 60px rgba(0, 103, 244, 0.22); } .page-adv .about-area .about-feature-image img { display: block; border-radius: 18px; } /* pipeline 节点 */ .page-adv .about-area .about-feature-items { position: relative; background: #fff; border: 1px solid var(--up-line); border-radius: 16px; padding: 20px 22px 20px 76px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); counter-increment: advstep; } /* 编号节点 */ .page-adv .about-area .about-feature-items::before { content: counter(advstep, decimal-leading-zero); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; border-radius: 12px; background: var(--up-grad); box-shadow: 0 8px 18px rgba(0, 103, 244, 0.28); } /* 连接线 */ .page-adv .about-area .about-feature-items:not(:last-child)::after { content: ""; position: absolute; left: 38px; bottom: -18px; width: 2px; height: 18px; background: linear-gradient(var(--up-blue), rgba(0, 103, 244, 0.08)); } /* 隐藏原小图标,由编号节点替代 */ .page-adv .about-area .feature-items-icon { display: none; } .page-adv .about-area .about-feature-items-content { padding-top: 2px; } .page-adv .about-area .about-feature-items-content .items-title { font-size: 18px; font-weight: 700; color: var(--up-ink); } .page-adv .about-area .about-feature-items-content .text { margin-top: 6px; font-size: 14px; line-height: 23px; color: var(--up-muted); } /* ============================================================ 5. 滚动 reveal(仅 JS 生效时隐藏,防 no-JS 空白) ============================================================ */ .upgrade-js .single-features, .upgrade-js .about-area .about-feature-items, .upgrade-js .adv-stat, .upgrade-js .stat-item, .upgrade-js .single-blog { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .upgrade-js .single-features.is-in, .upgrade-js .about-area .about-feature-items.is-in, .upgrade-js .adv-stat.is-in, .upgrade-js .stat-item.is-in, .upgrade-js .single-blog.is-in { opacity: 1; transform: none; }