/* Theme Name: Yiwaiwai Landing Theme URI: https://eyyweb.cn/ Author: Local Build Author URI: https://eyyweb.cn/ Description: 复刻 pcyiwaiwai.com 的单页客服助手官网。全部图片素材已本地化并做伪原创处理（WebP），图标字体与 SVG 符号完全本地加载。 Version: 1.0.3 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: yiyaiwai */  /* ==========================================================================    基础变量    ========================================================================== */ :root {     --primary-color: #007AFF;     --primary-hover: #0056b3;     --text-main: #1d1d1f;     --text-sub: #86868b;     --bg-gray: #f5f5f7;     --white: #ffffff; }  /* --- 全局基础样式 --- */ * { box-sizing: border-box; }  body {     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;     margin: 0;     color: var(--text-main);     background-color: var(--white);     scroll-behavior: smooth;     -webkit-font-smoothing: antialiased; }  img {     max-width: 100%;     height: auto; }  a {     color: inherit; }  .screen-reader-text {     border: 0;     clip: rect(1px, 1px, 1px, 1px);     clip-path: inset(50%);     height: 1px;     margin: -1px;     overflow: hidden;     padding: 0;     position: absolute !important;     width: 1px;     word-wrap: normal !important; }  .skip-link:focus {     background: #eee;     clip: auto !important;     clip-path: none;     color: #444;     display: block;     font-size: 1em;     height: auto;     left: 5px;     line-height: normal;     padding: 15px 23px 14px;     text-decoration: none;     top: 5px;     width: auto;     z-index: 100000; }  /* --- 基础辅助类 --- */ .d-flex { display: flex !important; } .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .justify-content-center { justify-content: center !important; } .align-items-center { align-items: center !important; }  /* --- 导航栏 --- */ nav {     display: flex;     justify-content: space-between;     align-items: center;     padding: 0 10%;     height: 64px;     background: rgba(255, 255, 255, 0.8);     backdrop-filter: blur(10px);     -webkit-backdrop-filter: blur(10px);     position: sticky;     top: 0;     z-index: 1000;     border-bottom: 1px solid rgba(0, 0, 0, 0.05); }  .logo {     display: flex;     align-items: center;     text-decoration: none;     gap: 10px; }  .logo img {     height: 24px;     width: auto;     display: block; }  .nav-links a {     text-decoration: none;     color: var(--text-main);     margin-left: 25px;     font-size: 14px;     font-weight: 500;     transition: 0.3s; }  .nav-links a:hover { color: var(--primary-color); }  /* --- Hero 区域 --- */ .hero {     padding: 100px 10% 60px;     display: flex;     align-items: center;     background: linear-gradient(180deg, #fff 0%, var(--bg-gray) 100%); }  .hero-content { flex: 1; } .hero-content h1 { font-size: 56px; line-height: 1.1; margin: 0 0 24px; } .hero-content p { font-size: 24px; color: var(--text-sub); margin: 0 0 40px; }  .btn-group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }  .btn-main {     background-color: var(--primary-color) !important;     color: #ffffff !important;     padding: 16px 48px;     border-radius: 40px;     text-decoration: none;     font-weight: 600;     font-size: 18px;     display: inline-block;     transition: 0.3s;     border: none;     box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3); }  .btn-main:hover {     background-color: var(--primary-hover) !important;     transform: scale(1.05);     color: #ffffff !important; }  .hero-image { flex: 1; text-align: right; } .hero-image img { width: 90%; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); }  /* --- 三点介绍 --- */ .features-intro {     display: grid;     grid-template-columns: repeat(3, 1fr);     gap: 40px;     padding: 80px 10%; }  .intro-item { text-align: center; padding: 20px; } .intro-item .emoji { font-size: 40px; line-height: 1; } .intro-item h3 { font-size: 24px; margin: 15px 0; } .intro-item p { color: var(--text-sub); line-height: 1.8; margin: 0; }  /* --- 关于区域 --- */ .about-section {     padding: 100px 10%;     display: flex;     gap: 60px;     align-items: center;     background: var(--bg-gray); }  .about-gif { flex: 1; } .about-gif img { width: 100%; border-radius: 12px; border: 8px solid #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-text { flex: 1; } .about-text h2 { font-size: 32px; margin: 0 0 20px; color: var(--primary-color); } .about-text p { font-size: 18px; color: #444; line-height: 2; margin: 0; }  /* --- 功能支撑区域 --- */ .function-section {     padding: 80px 10%;     text-align: center;     background: var(--white); }  .function-section h2 {     color: #131313;     font-size: 32px;     font-weight: 700;     margin: 0; }  .function-section .divider {     border: 0;     border-top: 1px solid #eee;     margin: 0 0 40px; }  .spacer { height: 20px; }  .g-card {     width: calc(20% - 15px);     min-width: 160px;     height: 160px;     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;     background: #fff;     border: 1px solid #efefef;     border-radius: 12px;     transition: all 0.3s ease;     padding: 15px;     margin-bottom: 10px;     text-decoration: none;     color: inherit; }  .g-card:hover {     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);     transform: translateY(-5px);     border-color: var(--primary-color); }  .g-card .icon {     width: 48px;     height: 48px;     margin-bottom: 15px;     fill: currentColor;     color: var(--primary-color); }  .g-card p {     margin: 0;     font-size: 15px;     font-weight: 600;     color: #333; }  /* --- 页脚 --- */ footer {     background: #1d1d1f;     color: #d2d2d7;     padding: 80px 10% 40px; }  .footer-grid {     display: grid;     grid-template-columns: repeat(4, 1fr);     gap: 40px;     padding-bottom: 40px;     border-bottom: 1px solid #424245; }  .footer-col h4 { color: #f5f5f7; margin: 0 0 20px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 12px; font-size: 13px; cursor: pointer; transition: 0.3s; } .footer-col ul li:hover { color: #fff; }  .footer-bottom {     padding-top: 30px;     font-size: 12px;     display: flex;     justify-content: space-between;     flex-wrap: wrap;     gap: 10px; }  /* --- 通用页面（非首页） --- */ .site-main {     max-width: 860px;     margin: 60px auto 80px;     padding: 0 24px;     font-size: 17px;     line-height: 1.9;     color: #333; }  .site-main h1, .site-main h2, .site-main h3 {     color: var(--text-main); }  /* 首页落地页使用全宽布局 */ .site-main.landing {     max-width: none;     margin: 0;     padding: 0; }  /* --- 移动端适配 --- */ @media (max-width: 1024px) {     .g-card { width: calc(33.33% - 15px); } }  @media (max-width: 768px) {     .hero, .about-section { flex-direction: column; text-align: center; }     .hero-image { margin-top: 40px; text-align: center; }     .hero-content h1 { font-size: 36px; }     .hero-content p { font-size: 18px; }     .btn-group { justify-content: center; }     .g-card { width: calc(50% - 15px); }     .footer-grid { grid-template-columns: repeat(2, 1fr); }     .nav-links { display: none; } }  @media (max-width: 480px) {     .g-card { width: 100%; min-width: 0; } }  /* --- 行业新闻栏目 --- */ .container {     max-width: 1200px;     margin: 0 auto;     padding: 0 24px; }  .site-main.news-page-main {     max-width: none;     margin: 0;     padding: 0; }  .article-section {     padding: 70px 0; }  .news-center-page {     min-height: 62vh;     background: linear-gradient(180deg, #fff 0%, var(--bg-gray) 100%); }  .page-head {     text-align: center;     margin-bottom: 44px; }  .page-title {     font-size: 40px;     font-weight: 800;     line-height: 1.2;     margin: 0 0 14px; }  .page-subtitle {     color: var(--text-sub);     font-size: 16px;     margin: 0; }  .news-center-layout {     display: grid;     grid-template-columns: minmax(0, 1fr) 320px;     gap: 32px;     align-items: start; }  .news-center-main {     min-width: 0; }  .news-list {     display: flex;     flex-direction: column;     gap: 14px; }  .news-row {     display: flex;     align-items: center;     gap: 20px;     background: #fff;     border: 1px solid rgba(0, 0, 0, 0.06);     border-radius: 16px;     padding: 16px 20px;     transition: 0.3s; }  .news-row:hover {     transform: translateY(-2px);     box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.18);     border-color: var(--primary-color); }  .news-row__thumb {     flex: 0 0 140px;     width: 140px;     height: 84px;     border-radius: 10px;     overflow: hidden; }  .news-row__thumb img {     width: 100%;     height: 100%;     object-fit: cover;     display: block;     transition: 0.4s; }  .news-row:hover .news-row__thumb img {     transform: scale(1.06); }  .news-row__body {     flex: 1 1 auto;     min-width: 0; }  .news-row__title {     font-size: 20px;     font-weight: 700;     line-height: 1.5;     margin: 0 0 8px; }  .news-row__title a {     color: var(--text-main);     text-decoration: none;     transition: 0.3s; }  .news-row__title a:hover {     color: var(--primary-color); }  .news-row__time {     font-size: 13px;     color: var(--text-sub); }  .news-row__arrow {     flex: 0 0 40px;     width: 40px;     height: 40px;     display: flex;     align-items: center;     justify-content: center;     border-radius: 50%;     background: #eaf3ff;     color: var(--primary-color);     font-size: 18px;     font-weight: 700;     text-decoration: none;     transition: 0.3s; }  .news-row:hover .news-row__arrow {     background: var(--primary-color);     color: #fff; }  .news-pager {     display: flex;     justify-content: center;     gap: 12px;     flex-wrap: wrap;     margin-top: 36px; }  .news-pager__btn {     display: inline-flex;     align-items: center;     justify-content: center;     min-height: 42px;     padding: 0 22px;     border-radius: 24px;     border: 1px solid rgba(0, 0, 0, 0.08);     background: #fff;     color: var(--text-main);     font-size: 14px;     font-weight: 600;     text-decoration: none;     transition: 0.3s; }  .news-pager__btn:hover {     border-color: var(--primary-color);     color: var(--primary-color); }  .news-pager__center {     background: var(--primary-color);     border-color: var(--primary-color);     color: #fff; }  .news-pager__center:hover {     background: var(--primary-hover);     border-color: var(--primary-hover);     color: #fff; }  .news-pager__btn.is-empty {     opacity: 0.45;     pointer-events: none;     cursor: default; }  .news-sidebar {     position: sticky;     top: 84px;     background: #fff;     border: 1px solid rgba(0, 0, 0, 0.06);     border-radius: 16px;     padding: 24px; }  .news-sidebar__heading {     font-size: 18px;     font-weight: 800;     margin: 0 0 14px;     padding-bottom: 14px;     border-bottom: 2px solid var(--primary-color); }  .news-sidebar__list {     list-style: none;     margin: 0;     padding: 0; }  .news-sidebar__item {     display: flex;     gap: 10px;     padding: 12px 0;     border-bottom: 1px dashed rgba(0, 0, 0, 0.08); }  .news-sidebar__item:last-child {     border-bottom: 0;     padding-bottom: 0; }  .news-sidebar__icon {     flex: 0 0 8px;     width: 8px;     height: 8px;     margin-top: 8px;     border-radius: 50%;     background: var(--primary-color); }  .news-sidebar__link {     flex: 1 1 auto;     color: #333;     font-size: 14px;     line-height: 1.6;     text-decoration: none; }  .news-sidebar__link:hover {     color: var(--primary-color); }  .news-empty {     padding: 80px 0;     text-align: center;     color: var(--text-sub); }  /* --- 行业新闻详情页 --- */ .news-article-page {     min-height: 62vh;     background: var(--bg-gray); }  .article-content {     max-width: 920px;     margin: 0 auto;     background: #fff;     border: 1px solid rgba(0, 0, 0, 0.05);     border-radius: 20px;     padding: 48px;     box-shadow: 0 10px 40px -24px rgba(0, 0, 0, 0.18); }  .article-meta {     display: flex;     align-items: center;     gap: 14px;     flex-wrap: wrap;     color: var(--text-sub);     font-size: 13px;     margin-bottom: 14px; }  .article-meta a {     display: inline-flex;     align-items: center;     padding: 3px 12px;     border-radius: 6px;     background: #eaf3ff;     color: var(--primary-color);     font-weight: 600;     text-decoration: none; }  .article-meta a:hover {     background: var(--primary-color);     color: #fff; }  .article-title {     font-size: 36px;     font-weight: 800;     line-height: 1.25;     margin: 0 0 26px; }  .article-media {     margin: 0 0 28px;     border-radius: 14px;     overflow: hidden; }  .article-media img {     width: 100%;     display: block;     object-fit: cover; }  .article-entry {     color: #333;     font-size: 17px;     line-height: 2; }  .article-entry p {     margin: 0 0 18px; }  .article-entry h2 {     font-size: 26px;     font-weight: 700;     margin: 36px 0 16px; }  .article-entry h3 {     font-size: 20px;     font-weight: 700;     margin: 28px 0 12px; }  .article-entry ul, .article-entry ol {     margin: 0 0 18px;     padding-left: 24px; }  .article-entry li {     margin-bottom: 8px; }  .article-entry blockquote {     margin: 24px 0;     padding: 16px 22px;     border-left: 4px solid var(--primary-color);     background: #f5f8ff;     color: #555; }  .article-entry img {     border-radius: 12px; }  .article-entry a {     color: var(--primary-color); }  .article-nav {     display: flex;     align-items: center;     justify-content: space-between;     gap: 14px;     margin-top: 42px;     padding-top: 26px;     border-top: 1px solid rgba(0, 0, 0, 0.08); }  .article-nav__btn {     display: inline-flex;     align-items: center;     max-width: 320px;     padding: 11px 18px;     border: 1px solid rgba(0, 0, 0, 0.08);     border-radius: 10px;     background: #fff;     color: var(--text-main);     font-size: 14px;     font-weight: 600;     line-height: 1.4;     text-decoration: none;     transition: 0.3s; }  .article-nav__btn:hover {     border-color: var(--primary-color);     color: var(--primary-color); }  .article-nav__prev {     margin-right: auto;     text-align: left; }  .article-nav__center {     background: var(--primary-color);     border-color: var(--primary-color);     color: #fff;     white-space: nowrap; }  .article-nav__center:hover {     background: var(--primary-hover);     border-color: var(--primary-hover);     color: #fff; }  .article-nav__next {     margin-left: auto;     text-align: right; }  .article-nav__btn.is-empty {     opacity: 0.45;     pointer-events: none;     cursor: default; }  @media (max-width: 1024px) {     .news-center-layout {         grid-template-columns: 1fr;     }      .news-sidebar {         position: static;     } }  @media (max-width: 768px) {     .article-section {         padding: 50px 0;     }      .page-title {         font-size: 32px;     }      .news-row__thumb {         flex-basis: 108px;         width: 108px;         height: 72px;     }      .news-row__title {         font-size: 18px;     }      .article-content {         padding: 30px 22px;     }      .article-title {         font-size: 28px;     }      .article-nav {         flex-direction: column;         align-items: stretch;     }      .article-nav__prev,     .article-nav__next {         margin-right: 0;         margin-left: 0;     }      .article-nav__center {         align-self: center;     } }  @media (max-width: 480px) {     .news-row {         gap: 14px;         padding: 14px 16px;     }      .news-row__thumb {         display: none;     }      .news-row__arrow {         flex-basis: 34px;         width: 34px;         height: 34px;     } }  /* --- 首页行业新闻板块 --- */ .home-news-section {     padding: 90px 0;     background: var(--bg-gray); }  .home-news-head {     text-align: center;     margin-bottom: 48px; }  .home-news-head h2 {     font-size: 34px;     font-weight: 800;     line-height: 1.2;     margin: 0 0 12px; }  .home-news-head p {     color: var(--text-sub);     font-size: 16px;     margin: 0; }  .home-news-grid {     display: grid;     grid-template-columns: repeat(3, 1fr);     gap: 24px; }  .home-news-card {     display: flex;     flex-direction: column;     overflow: hidden;     background: #fff;     border: 1px solid rgba(0, 0, 0, 0.06);     border-radius: 16px;     color: var(--text-main);     text-decoration: none;     transition: 0.3s; }  .home-news-card:hover {     transform: translateY(-4px);     box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.22);     border-color: var(--primary-color); }  .home-news-card__media {     aspect-ratio: 16 / 9;     overflow: hidden;     background: #eaf3ff; }  .home-news-card__media img {     width: 100%;     height: 100%;     object-fit: cover;     display: block;     transition: 0.4s; }  .home-news-card:hover .home-news-card__media img {     transform: scale(1.05); }  .home-news-card__media--default {     display: flex;     align-items: center;     justify-content: center;     background: linear-gradient(135deg, #eaf3ff 0%, #f7fbff 100%); }  .home-news-card__media--default span {     color: var(--primary-color);     font-size: 22px;     font-weight: 800;     letter-spacing: 4px; }  .home-news-card__body {     display: flex;     flex-direction: column;     flex: 1 1 auto;     gap: 10px;     padding: 22px; }  .home-news-card__body time {     color: var(--text-sub);     font-size: 12px; }  .home-news-card__body h3 {     display: -webkit-box;     -webkit-line-clamp: 2;     -webkit-box-orient: vertical;     overflow: hidden;     margin: 0;     font-size: 18px;     font-weight: 700;     line-height: 1.5; }  .home-news-card__body p {     display: -webkit-box;     -webkit-line-clamp: 2;     -webkit-box-orient: vertical;     overflow: hidden;     margin: 0;     color: var(--text-sub);     font-size: 14px;     line-height: 1.7; }  .home-news-more {     margin-top: 44px;     text-align: center; }  @media (max-width: 1024px) {     .home-news-grid {         grid-template-columns: repeat(2, 1fr);     } }  @media (max-width: 768px) {     .home-news-section {         padding: 60px 0;     }      .home-news-head h2 {         font-size: 30px;     }      .home-news-grid {         grid-template-columns: 1fr;     } }