/* Theme Name: 极客云码 企业官网建设主题 Theme URI: https://www.jikeyunma.com/ Description: 科技蓝风格的企业官网 / 企业官网建设主题，内置 SEO 与 GEO（生成式引擎优化）结构化数据，移动优先、源码交付。 Version: 1.0.0 Requires PHP: 7.4 Tested up to: 6.6 Author: 极客云码 Author URI: https://www.jikeyunma.com/ License: GPL-2.0-or-later Text Domain: yunzhan Tags: custom-logo, custom-menu, featured-images, footer-widgets, responsive-layout, seo, blog, one-column, two-columns */ /* ========================================================= 企业官网建设官网 — 设计系统 / 全局样式 风格：科技蓝 · 专业可信 (Tech Blue, Professional) 色板：Brand Blue #2563EB → Brand Violet #7C3AED 渐变 ========================================================= */ :root { /* 品牌色 */ --brand-blue: #2563EB; --brand-blue-600: #1D4ED8; --brand-dark: #1E3A8A; --brand-violet: #7C3AED; --brand-cyan: #38BDF8; /* 中性色 */ --ink: #0F172A; --ink-700: #334155; --ink-500: #64748B; --surface: #F1F5F9; --surface-2: #F8FAFC; --white: #FFFFFF; --border: #E2E8F0; /* 渐变 */ --grad-brand: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); --grad-dark: linear-gradient(135deg, #0F172A 0%, #1E3A8A 55%, #7C3AED 100%); --grad-soft: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .06); --shadow-lg: 0 12px 32px rgba(37, 99, 235, .14), 0 4px 8px rgba(15, 23, 42, .08); --shadow-card: 0 8px 24px rgba(15, 23, 42, .07); /* 圆角 */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; /* 容器 */ --maxw: 1200px; --gap: 24px; --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------- 布局容器 ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 88px 0; } .section--tight { padding: 64px 0; } .section--surface { background: var(--surface); } .section--soft { background: var(--grad-soft); } .section--dark { background: linear-gradient(135deg, rgba(15,23,42,.95) 0%, rgba(30,58,138,.92) 55%, rgba(124,58,237,.88) 100%), url("../img/stats-bg.jpg") center/cover no-repeat; color: var(--white); } /* ---------- 排版 ---------- */ .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-blue); background: rgba(37, 99, 235, .1); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 18px; } .section--dark .eyebrow { color: var(--brand-cyan); background: rgba(56, 189, 248, .15); } .h-display { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } .h-section { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; } .h-sub { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; } .lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-500); max-width: 720px; } .section--dark .lead { color: rgba(255,255,255,.78); } .text-center { text-align: center; } .text-gradient { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .section-head .lead { margin: 16px auto 0; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-size: 15px; font-weight: 700; padding: 13px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-lg); } .btn-primary:hover { box-shadow: 0 16px 40px rgba(37,99,235,.28); } .btn-outline { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; } .section--dark .btn-outline { border-color: rgba(255,255,255,.45); } .btn-outline:hover { background: rgba(255,255,255,.1); } .btn-ghost { background: var(--white); color: var(--brand-blue); border-color: var(--border); box-shadow: var(--shadow-sm); } .btn-ghost:hover { border-color: var(--brand-blue); } .btn-block { width: 100%; } /* ---------- 头部导航 ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; } .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 800; box-shadow: var(--shadow-md); } .brand small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-500); letter-spacing: .04em; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links > li { list-style: none; } .nav-links a { padding: 9px 16px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; color: var(--ink-700); transition: background .15s ease, color .15s ease; } .nav-links a:hover, .nav-links a.active { background: var(--surface); color: var(--brand-blue); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-cta .btn { padding: 10px 20px; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .2s; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 96px 0 104px; background: var(--grad-dark); color: #fff; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(56,189,248,.20), transparent 42%), radial-gradient(circle at 82% 70%, rgba(124,58,237,.28), transparent 46%); } .hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } /* 内页：面包屑独占整行，避免占掉左栏把标题挤到右栏 */ .hero .breadcrumb { grid-column: 1 / -1; align-self: end; } .hero-copy { margin-top: 18px; } .hero-copy--full { grid-column: 1 / -1; max-width: 900px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; margin-bottom: 22px; } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74,222,128,.25); } .hero h1 { font-size: clamp(36px, 5.4vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; } .hero p.lead { color: rgba(255,255,255,.82); margin: 22px 0 32px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-visual { position: relative; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); padding: 14px 14px 18px; box-shadow: var(--shadow-lg); backdrop-filter: blur(4px); } .hero-visual .hero-shot { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(2, 6, 23, .5); } .hero-visual .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding: 0 4px 2px; } .hero-visual .chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(56,189,248,.16); border: 1px solid rgba(56,189,248,.28); color: #bfe6ff; } /* ---------- 信任带 ---------- */ .trust { background: var(--surface); border-bottom: 1px solid var(--border); padding: 30px 0; } .trust .container { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; } .trust .label { font-size: 13px; font-weight: 700; color: var(--ink-500); letter-spacing: .04em; } .trust .logos { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .trust .logos span { font-size: 18px; font-weight: 800; color: var(--ink-700); opacity: .72; letter-spacing: -.01em; } /* ---------- 卡片网格 ---------- */ .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(37,99,235,.35); } .icon-box { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: var(--grad-soft); color: var(--brand-blue); } .icon-box svg { width: 26px; height: 26px; } .card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; } .card p { color: var(--ink-500); font-size: 15px; } .card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; color: var(--brand-blue); font-size: 14px; } /* 价格卡 */ .price-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); position: relative; } .price-card.featured { border-color: var(--brand-blue); box-shadow: var(--shadow-lg); } .price-card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-brand); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-md); } .price-card h3 { font-size: 20px; font-weight: 800; } .price-card .price { font-size: 38px; font-weight: 800; margin: 14px 0 4px; letter-spacing: -.02em; } .price-card .price small { font-size: 15px; font-weight: 600; color: var(--ink-500); } .price-card .desc { color: var(--ink-500); font-size: 14px; margin-bottom: 20px; } .price-card ul { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-700); } .price-card li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--brand-blue); } .price-card .btn { margin-top: auto; } /* 案例卡 */ .case-card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border); background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .case-card .thumb { height: 200px; position: relative; overflow: hidden; background: var(--grad-soft); } .case-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; } .case-card:hover .thumb img { transform: scale(1.05); } .case-card .thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(to top, rgba(15,23,42,.78), rgba(15,23,42,0)); pointer-events: none; } .case-card .thumb .big { position: absolute; z-index: 2; left: 20px; bottom: 12px; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(2, 6, 23, .55); } .case-card .body { padding: 24px; } .case-card .body h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .case-card .body p { color: var(--ink-500); font-size: 14px; } .case-card .metric { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--brand-blue); background: var(--grad-soft); padding: 6px 12px; border-radius: var(--r-pill); } /* 统计数字带 */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat { text-align: center; } .stat .num { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -.02em; } .stat .num .text-gradient { display: inline; } .stat .label { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 4px; } .section:not(.section--dark) .stat .label { color: var(--ink-500); } /* 流程 */ .step { display: flex; gap: 18px; align-items: flex-start; } .step .idx { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--grad-brand); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; box-shadow: var(--shadow-md); } .step h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .step p { color: var(--ink-500); font-size: 14px; } /* FAQ */ .faq { max-width: 820px; margin: 0 auto; } .faq-item { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 14px; background: #fff; overflow: hidden; } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 24px; font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font); } .faq-q .chev { transition: transform .2s ease; color: var(--brand-blue); flex: none; } .faq-item.open .faq-q .chev { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .faq-a .inner { padding: 0 24px 22px; color: var(--ink-500); font-size: 15px; } .faq-item.open .faq-a { max-height: 400px; } /* 最终 CTA */ .final-cta { background: var(--grad-brand); color: #fff; border-radius: var(--r-lg); padding: 60px; text-align: center; } .final-cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; } .final-cta p { color: rgba(255,255,255,.85); margin: 14px auto 30px; max-width: 560px; } .final-cta .hero-cta { justify-content: center; } /* 表单 */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--ink-700); } .field input, .field textarea, .field select { width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink); padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; } .field textarea { min-height: 120px; resize: vertical; } .form-note { font-size: 13px; color: var(--ink-500); margin-top: 6px; } /* 询价提交结果提示 */ .form-msg { padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; } .form-msg.ok { background: #e8f7ee; border-color: #b7e4c7; color: #14663a; } .form-msg.error { background: #fdecea; border-color: #f5c2be; color: #a12b25; } /* 蜜罐字段：正常访客不可见，只有机器人会填写 */ .gq-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } .info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-card); } .info-card .row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); } .info-card .row:last-child { border-bottom: 0; } .info-card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--grad-soft); color: var(--brand-blue); display: grid; place-items: center; flex: none; } .info-card .ic svg { width: 20px; height: 20px; } .info-card .row .k { font-size: 13px; color: var(--ink-500); font-weight: 600; } .info-card .row .v { font-size: 16px; font-weight: 700; color: var(--ink); } .info-card .row a.v:hover { color: var(--brand-blue); } /* 文章卡 */ .post-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .post-card .cover { height: 176px; background: var(--grad-soft); position: relative; overflow: hidden; } .post-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; } .post-card:hover .cover img { transform: scale(1.05); } .post-card .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,42,.30), rgba(15,23,42,0) 55%); pointer-events: none; } .post-card .cover .tagmini { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--brand-blue); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .post-card .body { padding: 22px; } .post-card .meta { font-size: 13px; color: var(--ink-500); margin-bottom: 8px; } .post-card h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; } .post-card p { font-size: 14px; color: var(--ink-500); } /* 页脚 */ .site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 64px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; } .site-footer .brand { color: #fff; } .site-footer .brand small { color: rgba(255,255,255,.5); } .footer-about { font-size: 14px; line-height: 1.7; margin-top: 16px; max-width: 300px; } .footer-col h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 16px; } .footer-col a { display: block; font-size: 14px; padding: 6px 0; transition: color .15s; } .footer-col a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; } .footer-bottom a { color: rgba(255,255,255,.6); } .footer-bottom a:hover { color: #fff; } /* 面包屑 */ .breadcrumb { font-size: 13px; color: rgba(255,255,255,.7); padding: 14px 0 0; } .breadcrumb a:hover { color: #fff; } /* ---------- 实拍图（通用） ---------- */ .shot { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); } .shot--wide { aspect-ratio: 3 / 2; object-fit: cover; } .shot--tall { aspect-ratio: 4 / 3; object-fit: cover; } .figure-cap { font-size: 13px; color: var(--ink-500); margin-top: 10px; text-align: center; } /* 文章详情封面 */ .article-cover { margin: 0 auto 36px; max-width: 820px; } .article-cover img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-card); } /* 工具类 */ .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .wrap { flex-wrap: wrap; } /* ---------- 响应式 ---------- */ @media (max-width: 980px) { .hero .container { grid-template-columns: 1fr; gap: 40px; } .hero-visual { max-width: 480px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); gap: 32px; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 680px) { .section { padding: 60px 0; } .nav-links, .nav-cta .btn-ghost { display: none; } .nav-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 72px; left: 0; right: 0; background: #fff; padding: 16px 24px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); } .nav-links.open a { padding: 12px 14px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .final-cta { padding: 40px 24px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .trust .logos { gap: 24px; } } /* 可访问性：键盘聚焦 */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* ========================================================= 文章正文排版（.article-body） 目的：为「问题式 H2 + 直给结论句 + 列表/表格」的长文结构提供样式。 这套结构对 GEO 尤其关键——AI 需要可分块识别的

/